Tabs component steals focus on render

[hkot1991]

Is your feature request related to a problem? Please describe.
When using the Tabs and TabList the focus is automatically set to the active tab on render, do to this line in TabList:
const selectedTabRef = useCallback((node) => { if (node !== null) { node.focus() } }, [])

This messes with out solution where we have a search input and an tablist. In our case the search input looses focus every time the user types a letter since this leads to the tab component being rendered.

Describe the solution you'd like
If this is an intentional feature then I would like the option to override it.
If its not intentional then I would prefer that it would be removed

[mimarz]

Hi!

We we're not able to reproduce this behaviour. Could you possibly post a small example on how you have setup the components? 🤔

[hkot1991]

Her is a sandbox of the problem:
https://codesandbox.io/s/festive-cohen-pbv4b

If you type one letter in the search field the focus shifts to the first tab. So you have to click on the search field to type a new letter, but once you type a new letter the focus shifts to the first tab again

[mimarz]

Her is a sandbox of the problem:
https://codesandbox.io/s/festive-cohen-pbv4b

If you type one letter in the search field the focus shifts to the first tab. So you have to click on the search field to type a new letter, but once you type a new letter the focus shifts to the first tab again

Ah, I see the problem. Because you have the hooks for both <Search> & <Tabs> in the same component, when search value changes, its forcing a re-render of the whole page...

Seems heavy duty to re-render all of it, but I guess this is intended as you want search results to be displayed using tabs?

[hkot1991]

Yes exactly, not my design I'm just the poor sucker who has to implement this 😄

Is there any way to prevent this from happening?

[mimarz]

Yes exactly, not my design I'm just the poor sucker who has to implement this 😄

Is there any way to prevent this from happening?

hehe, fun fun! 🤪

We'll have to look closer at how we can solve this as we need to support keyboard navigation for accessibility reasons. @vnys Will have a look at it :)

Not sure how you can prevent it now. Maybe try to put the <Search> & <Tabs> in separate components and use context for sharing needed values between them.

[hkot1991]

I understand the need for keyboard navigation to work, but why is the focus set upon rendering, it seems like a strange thing to do. If you refresh the sandbox you can see that the first tab will have the focus style on it. Don't think I have seen any page that has a focus on once you enter the page, usually you would have to press the tab-key for focus to occur on the page. If you where to comment out that line from the tablist, will keyboard navigation break for the tab component?
Because it still seems to work for me if I remove that line

[mimarz]

I understand the need for keyboard navigation to work, but why is the focus set upon rendering, it seems like a strange thing to do. If you refresh the sandbox you can see that the first tab will have the focus style on it. Don't think I have seen any page that has a focus on once you enter the page, usually you would have to press the tab-key for focus to occur on the page. If you where to comment out that line from the tablist, will keyboard navigation break for the tab component?
Because it still seems to work for me if I remove that line

No, its not supposed to be there on render when its not selected/focused, its a bug 🐛 alright! Probably an unwanted side-effect of needing keyboard navigation. As to what the fix is, ill have to leave it up to @vnys 😅

[vnys]

I’ll have a look at it first thing in the morning 😊

[vnys]

@hkot1991 This isn’t trivial unfortunately. The reason for using that callback hook is to be able to focus on the current tab when you navigate using the keyboard. If you comment out that line you’re referring to, and then use the arrow keys to switch between the tabs, you’ll see that the focus doesn’t change the way you would expect. But hijacking focus is obviously not the way it should have been solved, so we’ll find a better way to do that.

[vnys]

Wasn’t that hard after all 🙄 I’ll release an update as soon as I get a 👍 on #336