[Select] Create new Select component

[atomiks]

Preview: https://deploy-preview-541--base-ui.netlify.app/components/react-select/

• Closes [Select] does not accept slotProp: **placement** #547
• Closes [Select] On Safari, clicking on the Select input does not close its listbox #476
• Closes [Modal + Select] Using keyboard Esc while Modal's Select is open should not close the Modal #327
• Closes [Select] Using keyboard Tab while Select is open does not move focus to the next field #328
• Closes [Select] Implement new API #217
• Closes [Select] Select menu can't be closed by clicking away #8
• Closes [Select] The macOSVoiceOver doesn't read current value correctly on Safari #82
• Closes [Select] Support opening the Select and selecting an option with one click #66
• Closes [Select] Typeahead doesn't work on a closed Select #65
• Closes [Select] Mouse pointer doesn't steal focus on hover  #64
• Closes [Select] Highlight doesn't highlight properly if an Option has the value null #56
• Closes [RFC][Select] Rendering the selected value in SSR & during hydration #54 (solved via Select.Value placeholder prop)
• Closes [Select] Out of range defaultValue causes onChange to fire on mount #7 (TODO: provide a warning if defaultValue / value don't match any of the options)
• Closes [Select] SSR empty render  #37 (seem the same as [RFC][Select] Rendering the selected value in SSR & during hydration #54)
• Closes [Select] Set the onChange's event.target.value #14 (now invalid)

TODO:

• Integrate with useField
• Renamed alignMethod prop to alignOptionToTrigger

Olivier's edit: the v2 of mui/material-ui#8023 😄

[mui-bot]

Netlify deploy preview

https://deploy-preview-541--base-ui.netlify.app/

Generated by 🚫 dangerJS against cccd3b2

[michaldudak]

It would be great if the Trigger had a CSS variable with the width of the popup, so it can match it (as in native OS controls)

[atomiks]

Do you mean the inverse? --anchor-width for popup is available. The trigger can't know the width of the popup when it's not mounted

[michaldudak]

No, I didn't mean the inverse. Native OS selects adapt their width to the longest option. Perhaps this could be an option when keepMounted=true.

[atomiks]

That's true, but I'm hesitant to add something that doesn't work by default. Furthermore, it's likely very performance intensive with longer lists to calculate as you'll need to measure every option with getBoundingClientRect to calculate the largest one. It also doesn't work during SSR, so will cause layout shift. It's likely something that should be hardcoded by the user if necessary.

[michaldudak]

Could you please review the list of reported Select bugs and set this PR to close the ones that will be fixed by it?

[flaviendelangle]

When you open the select, the page scrollbar disappears causing a layout shift on the right navbar in the doc (https://deploy-preview-541--base-ui.netlify.app/components/react-select/)

The @mui/material select also removes the scrollbar but there is no layout shift (https://mui.com/material-ui/react-select/)

[atomiks]

@flaviendelangle interesting. The padding-right: 15px for the scrollbar width offset once it disappears prevents the main content from shifting but not the right navbar content (and end of the top navbar)

[michaldudak]

I'm wondering if we should prevent scrolling by default at all. I find it annoying when I open a select and something else changes appearance (=the scrollbar disappears). Native implementations differ in this matter - iOS prevents scrolling but doesn't hide the scrollbar, while Windows closes the popup when the page scrolls.
IMO locking the scroll is more important in modal windows.

I found an issue that's likely related to scroll locking: https://codesandbox.io/p/sandbox/q7qfjg - when you open the select, there's a small layout shift and you're able to scroll the page horizontally until the whole trigger disappears.

[atomiks]

I'm wondering if we should prevent scrolling by default at all. I find it annoying when I open a select and something else changes appearance (=the scrollbar disappears).

The scroll locking changes we made in #604 prevents layout shift issues from disappearing scrollbars. The scroll lock is necessary with the item align anchoring because you can wheel the popup to reveal more items, but this can cause the page to scroll. It's not locked for the trigger align method.

I found an issue that's likely related to scroll locking: https://codesandbox.io/p/sandbox/q7qfjg - when you open the select, there's a small layout shift and you're able to scroll the page horizontally until the whole trigger disappears.

This looks like a bug with the .SelectPopup min-width style that doesn't limit itself by the --available-width.

This solves it:

  min-width: min(var(--available-width), calc(var(--anchor-width) + 20px));

There's a thread discussing default "functional styles" to apply to these elements and an API to override them in a thread in the base-ui channel. This could help prevent certain issues like this, including:

• Making the popup scrollable by default
• Limiting the popup's size to the available space (but the above calculation requires the user to use their own custom padding value)

[michaldudak]

This looks like a bug with the .SelectPopup min-width style that doesn't limit itself by the --available-width.

This solves it:

The repro was taken directly from the demos, so they'll need to have the styles updated.

[michaldudak]

The previous implementation supported multiple selection. Do you plan to add it here as well or in a separate component?

[atomiks]

Given the potential complexity, a separate component + we'd need to discuss such an API first

[oliviertassinari]

I imagine we won't support mui/material-ui#20402 (comment) just yet:

Screen.Recording.2024-10-03.at.00.50.04.mov

https://codesandbox.io/p/sandbox/magical-sara-zqhf6x. I think we should open a new issue for it, e.g. https://x.com/devongovett/status/1248306411508916224. One mistake I did there back in the days is I think to not compare values with autocompelte on toLowerCase() mode, like Chrome native select seems to do.

[atomiks]

@oliviertassinari actually I did try to add support for it but I couldn't seem to get even the native select to autofill in my browser. I'll try to work off this demo instead.

[michaldudak]

There's an issue when using objects as options - the component complains the selected option is not present among the available options: https://codesandbox.io/p/sandbox/upbeat-sun-v7yx2k (this fails in both controlled and uncontrolled mode).

Additionally, FYI, we briefly discussed rendering a native select on mobile devices by default. This could be done in a separate PR once we flesh out the details, but it's good to keep it in mind.