Skip to content

fix: prevent layout shift when Select component dropdown appears #17990

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

Merged
merged 1 commit into from
May 23, 2025

Conversation

jaaydenh
Copy link
Contributor

@jaaydenh jaaydenh commented May 22, 2025

When scrollbars are always visible, open the dropdown for a Select component causes a layout shift because of scrollbars being hidden when the Select is open. This fix prevents the layout shift from the scrollbar being removed.

Screen.Recording.2025-05-22.at.17.06.37.mov

Copy link
Collaborator

@BrunoQuaresma BrunoQuaresma left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just double check it does not cause any side effects in other components such as dialogs.

@jaaydenh
Copy link
Contributor Author

@BrunoQuaresma added another commit to handle the case of MUI popovers

@jaaydenh jaaydenh force-pushed the jaaydenh/select-layout-shift branch from c1c518c to 56d7008 Compare May 23, 2025 17:55
@jaaydenh jaaydenh merged commit ce4c8c7 into main May 23, 2025
33 checks passed
@jaaydenh jaaydenh deleted the jaaydenh/select-layout-shift branch May 23, 2025 19:51
@github-actions github-actions bot locked and limited conversation to collaborators May 23, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants