Skip to content

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

Merged
mj12albert merged 9 commits intomui:masterfrom
mj12albert:docs/base-select-layout-shift
Sep 14, 2023
Merged

[base-ui][Select] Fix Select button layout shift, add placeholder prop#38796
mj12albert merged 9 commits intomui:masterfrom
mj12albert:docs/base-select-layout-shift

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 scope: select Changes related to the select. package: @mui/base Specific to @mui/base (legacy). labels Sep 4, 2023
@michaldudak
Copy link
Member

michaldudak commented Sep 8, 2023

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

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

@mj12albert mj12albert Sep 14, 2023

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
@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 type: bug It doesn't behave as expected. 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

package: @mui/base Specific to @mui/base (legacy). scope: select Changes related to the select. type: bug It doesn't behave as expected.

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