Tabs automatically indexing on page load

[benpatersonx]

Describe the bug
When you load a page using the tabs component, the first item automatically appears with a focus ring around it or 'indexed' even though it should simply just show as selected. I believe it is an issue with the tab index.

To Reproduce
Steps to reproduce the behavior:

1. Use the 'Tabs' component from flowbite-react (src/lib/components/Tab/Tabs.tsx)
2. Load/reload the page
3. You'll see that the first tab item is automatically focused/indexed (see screenshots)

Expected behavior
All tabs should appear the same until the user interacts with them, apart from the first which should simply be selected not focused like it is.

Screenshots

System information:

• Device: Desktop PC
• Resolution: 2560 x 1440
• OS: Windows
• Browser: Google Chrome
• Version: 109.0.5414.120

Project information:

• Tailwind: 3.2.7
• Flowbite: 1.6.3
• Flowbite React: 0.3.8
• Type: NextJS

[evanmays]

+1

[evanmays]

Temporary workaround I'm using is to put this hidden button near the top of the page.

<button id="supersecretbutton" style={{width:"0%", height:0, display:"inline", position: "absolute", top:0}} />

Then in the component that holds the flowbite Tab, trigger the new hidden button to be focused after 10ms.

useEffect(() => {
    // run after 0.1 seconds
    setTimeout(() => {
      // horrible
      document.getElementById("supersecretbutton")?.focus()
    }, 10)
  }, [])

You may have to play around with increasing 10ms to something like 100ms.

Note, this solution sucks for accessibility. I'm using it in a prototype product.

The problem with the tab component is it sets focus on the first tab during the initial render
The long term solution is probably to default this state field to -1
https://github.com/themesberg/flowbite-react/blob/main/src/lib/components/Tab/Tabs.tsx#L82
So that this focus doesn't run on first render
https://github.com/themesberg/flowbite-react/blob/main/src/lib/components/Tab/Tabs.tsx#L115

[timomedia]

+1

[timomedia]

Please help us fix this. Currently if each page uses tabs then when accessing the default url it will select the first tab and automatically jump the scroll bar there. It's exactly like the picture above that @benpatersonx posted.

[ex-oleh]

focus ring is not the worst thing about this behavior. if you have a card component that has tabs at the bottom of the screen,
the view will always scroll to it on page refresh.

[timomedia]

@ex-oleh
Yes.
It will always scroll to the section tab when the page loads. This is a pretty bad thing.