Accessibility · Senior · Question 20 of 75

A React handler sets state to show a panel, then calls `ref.current.focus()`. Why does it fail?

1ref objects can't point at any focusable elements
2React blocks focus() calls inside of event handlers
3The panel isn't rendered yet when focus is called

Show the answer

Correct answer: The panel isn't rendered yet when focus is called

Explanation

State updates are batched and rendered after the handler. Use an effect keyed to the state or flushSync when the element must exist right away.

Further reading

Test yourself

Take the Accessibility · Senior quiz: questions and options are shuffled, and you get a review of your mistakes at the end.