You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm using @headlessui/react, and I use the code provided at the top of the Tabs documentation page as a starting point. I just added a button to toggle the middle tab presence, and I'm hardcoding the selectedIndex to 1 (but no onChange is provided however).
This was tested with a Vite project (and the same behavior occurs in a Webpack bigger project).
As you can see with the given project, initially the "Popular" tab is highlighted as intended.
By clicking "Toggle Popular" button, this tab will disappear, and "Trending" become the active one. This is fine because it became the tab with index 1.
Now, if we click again on the "Toggle Popular" button, this starts to be wrong, because the "Popular" tab is listed again, but the active one is still the "Trending" tab! This is not respecting the selectedIndex property.
Clicking one more time on the "Toggle Popular" button, the "Popular" entry get removed as expected, but no tab at all is active. The "Trending" tab should have been the active one here.
More surprisingly, in our project, the behavior disappear with a production build. We only observe this in a development build. (With the minimal Vite project provided in this issue, it occurs in both case however.)
(edit: spelling)
The text was updated successfully, but these errors were encountered:
When a tab is already active and new tabs are inserted or existing tabs are removed then we try to maintain the already selected tab active. This is currently why you see the behaviour your see.
However, this is good behaviour if tabs are uncontrolled, but I get that if you want to control your tabs that you want to control your tabs and not us. So that's definitely a bug we need to fix and that I'm working on right now.
I know it's been a while since you opened this bug report, but a workaround for you right now would be to use key={index} instead of key={category}. This will re-render the current tab because the contents at a given index changes, instead of the tab moving around because the key is stable.
What package within Headless UI are you using?
I'm using @headlessui/react, and I use the code provided at the top of the Tabs documentation page as a starting point. I just added a button to toggle the middle tab presence, and I'm hardcoding the
selectedIndex
to 1 (but noonChange
is provided however).This was tested with a Vite project (and the same behavior occurs in a Webpack bigger project).
What version of that package are you using?
For example: v1.7.18
What browser are you using?
Tested with Firefox and Chrome.
Reproduction URL
See https://github.com/fjolliton/headlessui-tabs-index-issue.
Describe your issue
As you can see with the given project, initially the "Popular" tab is highlighted as intended.
By clicking "Toggle Popular" button, this tab will disappear, and "Trending" become the active one. This is fine because it became the tab with index 1.
Now, if we click again on the "Toggle Popular" button, this starts to be wrong, because the "Popular" tab is listed again, but the active one is still the "Trending" tab! This is not respecting the
selectedIndex
property.Clicking one more time on the "Toggle Popular" button, the "Popular" entry get removed as expected, but no tab at all is active. The "Trending" tab should have been the active one here.
More surprisingly, in our project, the behavior disappear with a production build. We only observe this in a development build. (With the minimal Vite project provided in this issue, it occurs in both case however.)
(edit: spelling)
The text was updated successfully, but these errors were encountered: