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

[base-ui][Select] Fix Select button layout shift, add placeholder prop #38796

Merged
merged 9 commits into from
Sep 14, 2023
Merged

[base-ui][Select] Fix Select button layout shift, add placeholder prop #38796

merged 9 commits into from
Sep 14, 2023

Conversation

mj12albert
Copy link
Member

@mj12albert mj12albert commented Sep 4, 2023 •
edited by oliviertassinari
Loading

Fixes 1 of 3 in mui/base-ui#37, solving this hydration layout shift:

Screen.Recording.2023-09-14.at.23.32.21.mov

This PR adds updates the default renderValue function to fall back to a zero-width space that prevents layout shift in SSR or when the value is empty.

Preview link (disable JS to try) https://deploy-preview-38796--material-ui.netlify.app/base-ui/react-select/#introduction

New demo: https://deploy-preview-38796--material-ui.netlify.app/base-ui/react-select/#option-appearance

@mui-bot
Copy link

mui-bot commented Sep 4, 2023 •
edited
Loading

Netlify deploy preview

https://deploy-preview-38796--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 19022cc

@mj12albert mj12albert added the docs Improvements or additions to the documentation label Sep 4, 2023
@mj12albert mj12albert changed the title Fix select intro layout shift [docs][base-ui] Fix Select intro demo layout shift Sep 4, 2023
@mj12albert mj12albert marked this pull request as ready for review September 4, 2023 07:48
@danilo-leal danilo-leal added component: select This is the name of the generic UI component, not the React module! package: base-ui Specific to @mui/base labels Sep 4, 2023
@michaldudak
Copy link
Member

We can include the placeholder and ZWS in the Select component itself, not just the demos.

@mj12albert mj12albert force-pushed the docs/base-select-layout-shift branch from a070f57 to 61216d4 Compare September 13, 2023 14:47
@mj12albert mj12albert changed the title [docs][base-ui] Fix Select intro demo layout shift [docs][base-ui] Fix Select button layout shift Sep 13, 2023
@mj12albert mj12albert removed the docs Improvements or additions to the documentation label Sep 13, 2023
@mj12albert mj12albert changed the title [docs][base-ui] Fix Select button layout shift [base-ui][Select] Fix Select button layout shift Sep 13, 2023
@mj12albert mj12albert changed the title [base-ui][Select] Fix Select button layout shift [base-ui][Select] Fix Select button layout shift, add placeholder prop Sep 13, 2023
@mj12albert mj12albert force-pushed the docs/base-select-layout-shift branch from 61216d4 to 3effe97 Compare September 14, 2023 03:37
@mj12albert
Copy link
Member Author

mj12albert commented Sep 14, 2023 •
edited
Loading

@michaldudak I've added the placeholder prop to the Select component and updated existing demos that don't have an initial value to show placeholder text

I don't think it needs to be added to the hook, as placeholder would just pass through and would not be returned by a prop getter

mj12albert
mj12albert commented Sep 14, 2023
View reviewed changes
packages/mui-base/src/Select/Select.test.tsx
@@ -20,7 +20,7 @@ describe('<Select />', () => {
const { render } = createRenderer();

const componentToTest = (
<Select defaultListboxOpen slotProps={{ popper: { disablePortal: true } }}>
<Select defaultListboxOpen defaultValue={1} slotProps={{ popper: { disablePortal: true } }}>
Copy link
Member Author

Choose a reason for hiding this comment

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

This is so that the ZWS is not rendered, or else className="notranslate" will cause the "test disabling class generation" part of describeConformanceUnstyled to fail

michaldudak
michaldudak approved these changes Sep 14, 2023
View reviewed changes
Copy link
Member

@michaldudak michaldudak left a comment

Choose a reason for hiding this comment

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

LGTM!

@mj12albert mj12albert merged commit ad905f5 into mui:master Sep 14, 2023
8 checks passed
@mj12albert mj12albert deleted the docs/base-select-layout-shift branch September 14, 2023 14:34
@oliviertassinari oliviertassinari mentioned this pull request Sep 14, 2023
Merged
@oliviertassinari
Copy link
Member

oliviertassinari commented Sep 14, 2023 •
edited
Loading

Preview link (disable JS to try)

Nice, Next.js users will be happy 👌

@oliviertassinari oliviertassinari added the bug 🐛 Something doesn't work label Sep 14, 2023
This was referenced Oct 16, 2023
Closed
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@michaldudak michaldudak michaldudak approved these changes

@DiegoAndai DiegoAndai Awaiting requested review from DiegoAndai

Assignees
No one assigned
Labels
bug 🐛 Something doesn't work component: select This is the name of the generic UI component, not the React module! package: base-ui Specific to @mui/base
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@mj12albert @mui-bot @michaldudak @oliviertassinari @danilo-leal