Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Changing order of tabs causes selected tab to not match the rendered TabPanel

See original GitHub issue

Thank you for a wonderful library!

🐛 Bug report

I am using a controlled Tabs component where I loop over an array to render the individual Tab components. The tabs array is ordered based on some property of the array items and the order may change. When the array changes due to a reordering the selected Tab is no longer in sync with the selected TabPanel.

💥 Steps to reproduce

Create a controlled Tabs component
Model tabs as an array and render in a loop
Change order of the items in the array
See selected Tab and TabPanel out of sync.

💻 Link to reproduction

https://codesandbox.io/s/controlled-tabs--ordered-tabs-ompqp?file=/src/App.tsx

🧐 Expected behavior

Selected Tab and TabPanel are in sync.

🌍 System information

Software	Version(s)
Chakra UI	1.3.2
Browser	88
Operating System	macOS 11.2

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:5 (1 by maintainers)

Top GitHub Comments

1reaction

with-heartcommented, Feb 8, 2021

Oh boy. I likely just built something at work that suffers from this same issue 😬

Appears to be caused by a disconnect between index coming from useDescendant and the index coming from validChildren.map inside useTabPanels. https://github.com/chakra-ui/chakra-ui/blob/500b1eea0876909b670c103ffa354b2b77ff024f/packages/tabs/src/use-tabs.ts#L361-L363

index and selectedIndex no longer correspond once the order of items changes.

0reactions

lifejugglercommented, May 13, 2022

neither is mine 😦

Top Results From Across the Web

Reactjs material ui prevent re-render tabs on enter

I have built a material-ui based UI containing tabs in reactJS. Anytime a tab is selected, the content ...

Tabs - Chakra UI

Tabs expects TabList and TabPanels as children. The order doesn't matter, you can have TabList at the top, at the bottom, or both....

apex:tabPanel issue with setting the correct tab after validation ...

This doesn't work and everytime I land on the first tab. To fix this I am setting the rootController's selectedTab variable from the...

Tabs - Chakra UI

A React component that helps you build accessible tabs, by providing keyboard interactions and ARIA attributes described in the WAI-ARIA Tab Panel Design ......

Set the tab order for controls - Microsoft Support

In Access desktop databases you can change the tab order of controls on forms and reports, remove a control from the tab order,...