[base-ui][useSelect] Support browser autofill

[DiegoAndai]

• I have followed (at least) the PR section of the contributing guide.

Closes #37646

Support browser autofill in the useSelect hook and Select component.

Changes:

• Add onChange handler to getHiddenInputProps which
  • dispatches a (new) browser autofill action if the value is found in the options
  • dispatches a (new) clear selection action if the value is an empty string
• Add autoComplete prop to Select component and forward to the hidden input
• Added tests for all the changes.

Manual testing

I tested with

• 1Password on Chrome
• Chrome native autofill (including clear autofill, avoiding #31426 by clearing when the onChange handler is called with an empty string as value)
• Safari native autofill

I couldn't get Firefox autofill to work on my computer, so I didn't test with that one. Apparently, the feature is blocked by region.

Demo

Before changes: https://codesandbox.io/s/base-ui-select-autofill-demo-benchmark-rz7qff?file=/src/Demo.tsx
After changes: https://codesandbox.io/s/base-ui-select-autofill-demo-nj6ylw?file=/src/Demo.tsx

Screen.Recording.2023-10-24.at.16.38.06.mov

[mui-bot]

Netlify deploy preview

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

@material-ui/unstyled: parsed: +0.38% , gzip: +0.25%
@mui/joy: parsed: +0.12% , gzip: +0.11%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against ab94a1d

[DiegoAndai]

@michaldudak I'm thinking about the following refactor:

• Remove the autoComplete prop from the Select component
• Add support for slotProps.input (or slotProps.hiddenInput) so users can provide the autoComplete value that way

What do you think? What would you name the input's slot if we go that route?

[michaldudak]

I'd keep it on the Select. It'll be more in-line with the native HTML select.

[michaldudak]

Looks and works great! Good job!