[base-ui][Select] Fix Select button layout shift, add placeholder prop#38796
Merged
Conversation
Netlify deploy previewBundle size reportDetails of bundle changes (Toolpad) |
mj12albert
changed the title
mj12albert
marked this pull request as ready for review
September 4, 2023 07:48
danilo-leal
added
scope: select
Member
|
We can include the placeholder and ZWS in the Select component itself, not just the demos. |
mj12albert
force-pushed
the
docs/base-select-layout-shift
branch
from
September 13, 2023 14:47
a070f57 to
61216d4
Compare
mj12albert
changed the title
mj12albert
changed the title
mj12albert
changed the title
775926c2b424cfcaeda1be14ef073924cca7e659
9554a5fbe92bf4de14c09ed7b2f25503dea3e8cd
mj12albert
force-pushed
the
docs/base-select-layout-shift
branch
from
September 14, 2023 03:37
61216d4 to
3effe97
Compare
Member
Author
|
@michaldudak I've added the I don't think it needs to be added to the hook, as |
mj12albert
commented
Sep 14, 2023
|
|
||
| const componentToTest = ( | ||
| <Select defaultListboxOpen slotProps={{ popper: { disablePortal: true } }}> | ||
| <Select defaultListboxOpen defaultValue={1} slotProps={{ popper: { disablePortal: true } }}> |
Member
Author
There was a problem hiding this comment.
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
Member
Nice, Next.js users will be happy 👌 |
This was referenced Oct 16, 2023
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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
renderValuefunction 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