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

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

💻 Link to reproduction

🧐 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:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

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 inside useTabPanels.

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

lifejugglercommented, May 13, 2022

neither is mine 😦

Read more comments on GitHub >

github_iconTop 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 ...
Read more >
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....
Read more >
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...
Read more >
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 ......
Read more >
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,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found