Reach Tabs flashes all tab panes when visit the page - Githubissues

reach / reach-ui

The Accessible Foundation for React Apps and Design Systems

https://reacttraining.com/reach-ui/

MIT License

5.97k stars 559 forks source link

Reach Tabs flashes all tab panes when visit the page #971

Closed HuyAms closed 1 year ago

HuyAms commented 2 years ago

🐛 Bug report

Current Behavior

There is a flash of all Tab Panels when I first visit the page

https://user-images.githubusercontent.com/26871154/191351851-4418e0d8-7148-4374-8813-07b1316aafe8.mov

Expected behavior

Only the active tab should be visible

Reproducible example

Please see the bug in this Codesandbox

Try to hit the refresh button a few times to see the issue Screenshot 2022-09-20 at 22 59 30

Suggested solution(s)

Additional context

I think it works well with React but has an issue with Remix

Your environment

Software	Name(s)	Version
Reach Package	@reach/tabs	^0.17.0
React	react	18.2.0
Browser	Chrome	105.0.5195.125 (Official Build) (x86_64)
Assistive tech
Node		v17.3.1
npm/yarn		8.3.0
Operating System	MacOS	11.3.1

theMosaad commented 2 years ago

duplicate of https://github.com/reach/reach-ui/issues/907