In, feat(client): refactor lower-jaw elements to jsx.element by Sboonny · Pull Request #49015 · freeCodeCamp/freeCodeCamp (github.com), I am trying to refactor the element to JSX.element, because:
- jsx.element has its own state, which means when the camper interacts with the component, the parent doesn’t re-render.
- when the parent state changes, it doesn’t need to render the elements again, because it remembers the state of jsx.element.
- It’s way easier to understand and read.
But there is a test failing because the browser doesn’t focus on the “Submit” button, when campers press “Ctrl + enter”, here is a gif for it.
Attempts
- I have attempted to use
focus::visible
by using.btn::focus-visible
selector, and let the browser handle this, but with no luck.
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
- I have swapped the createRef, to
useRef
hoping that I am missing something and to be honest testing my luck, but same as before no luck
const submitButtonRef = useRef<HTMLButtonElement>(null);
...
useEffect(() => {
if (challengeIsCompleted && !isEditorInFocus) {
submitButtonRef?.current?.focus();
}
...
<LowerJawButtons
ref={submitButtonRef}
/>
I am wondering, what am I missing that stops the browser from focusing on the button?
Additional context:
console.log(submitButtonRef?.current?.focus());
will result in undefinded
and not focusEvent
like I hoped.