[base-ui][material-ui] Uncontrolled Select component do not fully reset when inside a <form> with a reset button

[aayush-makwana]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example without using state: https://codesandbox.io/p/sandbox/youthful-bash-w5sq9t

Link to live example using state: https://codesandbox.io/p/sandbox/mystifying-fire-lkdm86

Current behavior 😯

When using Select component, Pressing the reset button in a form does not revert value of the Select to its default value.

If I use Select with state then it will work properly.

Expected behavior 🤔

Changes in the value of the Select will get reset while clicking on the reset button when we are not using the state (for the first codesandbox).

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

``` System: OS: Windows 10 10.0.19045 Binaries: Node: 20.9.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: Not Found Edge: Chromium (120.0.2210.77) npmPackages: @emotion/react: ^11.11.1 => 11.11.1 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.28 @mui/core-downloads-tracker: 5.15.1 @mui/material: ^5.15.1 => 5.15.1 @mui/private-theming: 5.15.1 @mui/styled-engine: 5.15.1 @mui/system: 5.15.1 @mui/types: 7.2.11 @mui/utils: 5.15.1 @types/react: ^18.2.45 => 18.2.45 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^4.9.5 => 4.9.5 ```

[DiegoAndai]

Thanks for the report @aayush-makwana, and sorry for the late reply.

@mj12albert @michaldudak @colmtuite I wonder if this should be supported in Base UI (and Material UI when we ship the components based on Base UI). What do you think? I tested and:

• It's not working on Base UI: https://stackblitz.com/edit/react-efb1yf?file=Demo.tsx
• It does work on the native select: https://stackblitz.com/edit/web-platform-2szfhl?file=index.html

The same goes for the related issues: https://github.com/mui/material-ui/issues/40253, https://github.com/mui/material-ui/issues/40245, https://github.com/mui/material-ui/issues/40252, https://github.com/mui/material-ui/issues/40244, https://github.com/mui/material-ui/issues/40243

[michaldudak]

Yup, Base UI's Select should ideally support it the same way the browser's autofill is handled.

[DiegoAndai]

@michaldudak good 🙌🏼

I'll add the Base UI label to this one and the related issues (Except for the Input, which already works in Base UI 🎉). Should I do anything else besides adding the Base UI label?

[mj12albert]

This could be tricky to implement for components (e.g. Select) that don't necessarily have native HTML form controls (e.g. input, select), as means relying on a reset event that's fired by a (parent) <form>: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset_event

However since this reset behavior can be achieved in controlled mode, I don't think this is terribly urgent at the moment 😬

[michaldudak]

Should I do anything else besides adding the Base UI label?

No, that's enough. We can revisit it once we have all the API changes we recently discussed.