Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bug: Tabs and Panels aren't working as expected using React.StrictMode #219

Open
alessio-libardi opened this issue Oct 5, 2021 · 1 comment · May be fixed by #220
Open

Bug: Tabs and Panels aren't working as expected using React.StrictMode #219

alessio-libardi opened this issue Oct 5, 2021 · 1 comment · May be fixed by #220

Comments

@alessio-libardi
Copy link

Using React.StrictMode to wrap our app give inconsistent results in how the Tabs and Panels indexes are generated.

Related issue: Wonderflow Design System #153
@alessio-libardi
Copy link
Author

alessio-libardi commented Oct 5, 2021 •
edited

The issue is related to the useConstant hook that gets called twice in development. This further causes the tabs and panels count to be duplicated.

Edit: After more investigation of the code the issue seems more related to the way the <Tab> and <Panel> count is done. Basically the useTabState and usePanelState are counting how many times the <Tab> and <Panel> are rendered so that each can get its appropriate state and consequentially be actived. Using <StrictMode> this is obviously a problem. I'll further investigate on a solution.

alessio-libardi pushed a commit to alessio-libardi/tabs that referenced this issue Oct 5, 2021
fix: improve tab and panel counting
ebf9fc2 
replace tab and panel counting based on render cycles with children as unique keys

Fixes issues jeetiss#219
@alessio-libardi alessio-libardi linked a pull request Oct 5, 2021 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: remove inconsistencies when using React.StrictMode alessio-libardi/tabs
1 participant
@alessio-libardi