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.

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

<Tab> moves selected indicator from inside <button> to outside when hydrating #881

Open
bchu1 opened this issue Oct 21, 2024 · 1 comment
Assignees
Labels
Bug Something isn't working Eng P0

Comments

@bchu1
Copy link

bchu1 commented Oct 21, 2024

Describe the bug
On the initial SSR render, the blue underline indicator is inside the button element of the tab. After hydration, the element is placed after all the tab <button>s. The causes the position to move.

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://cryoetdataportal.czscience.com/browse-data/datasets (Remix)
  2. Notice the flicker of the selection indicator.
  3. This is also reproducible in Next.js

Expected behavior
No flicker

@masoudmanson masoudmanson added Bug Something isn't working P0 Eng labels Oct 22, 2024
@masoudmanson masoudmanson self-assigned this Oct 22, 2024
@masoudmanson
Copy link
Contributor

Hey @bchu1,

Thank you for reporting the bug, I'll check this out and let you know once the fix is ready. 😊🙏🏻

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug Something isn't working Eng P0
Projects
None yet
Development

No branches or pull requests

2 participants