React-Tabs and React-Selection: Tabs Steal Focus From Select

Question

How can I prevent the autofocus problem after tab is clicked? For example, when I clicked the tab and I scrolled down to the different div with selection, I opened and chose the options from selection. The focus kept returning to the tab that I clicked.

Undesired behavior

Desired behavior

Please let me know if this is something you can come up with solution to this problem.

Answer 1

It's hard to tell what exactly your problem is without seeing code, but you can control focus state using ref and accessing targets with refs. i.e.

const ref = React.useRef()

const toggleFocus = () => ref.current.focus()

return <input ref={ref} ... />

So, on open of a new tab, you could call "toggleFocus" (or whatever you call it) to focus the particular input you want to focus.

Hope that helps?