[Select] Doesn't reset value after clicking Clear form by using autofill values by the browser

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

I've been struggling with a strange behavior that I think is more like a bug of the Select component itself. I just want to make sure that I'm not doing anything wrong or am not missing some properties to set.

Okay the thing is, I'm using material ui and when I use the autofill feature provided by the browser everything seem to work fine. But when clearing the form the Select value is not resetting to the default one. This behavior only happens with the Select component, if a use the select on native mode works fine but I want to use the mui Select.

This is what is happening now

https://user-images.githubusercontent.com/31553757/157980857-eb4ecfb9-f2d4-4fd8-992a-dfe815028fe4.mov

Expected behavior 🤔

Being able to use the autofill feature and clear the form including the select component

https://user-images.githubusercontent.com/31553757/157980265-92ec94e2-17c3-4fee-b1e0-7eb74e0a68f7.mov

Steps to reproduce 🕹

Use this link to follow the steps

Steps:

1. Fill up all the information and chose a different value from Select component) and click submit, then reload the sandbox and you will be able to see the autofill option when focusing an input.

2. next, When I click on Clear form

All the values are being reseted except the value in the select component.

Context 🔦

No response

Your environment 🌎

No response

Start with the reproduction in the linked CodeSandbox, specifically /src/App.js, and compare the MUI Select with its native mode while using browser autofill and Clear form. Trace how the Select value responds to the form reset; done means autofilled values, including the Select, return to the default state after clearing.