[Autocomplete, KeyboardDatePicker] HTML reset doesn't work for Autocomplete and KeyboardDatePicker .

[collegeimprovements]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

KeyboardDatePicker and Autocomplete doesn't respect reset.

Expected Behavior 🤔

KeyboardDatePicker and Autocomplete's value should get reset when one clicks on reset.

Steps to Reproduce 🕹

Link: https://codesandbox.io/s/relaxed-northcutt-ksy8o
Click on reset and see that only TextField's value is getting reset.

[oliviertassinari]

@collegeimprovements It's doesn't seem to be supported by React: https://codesandbox.io/s/recursing-ptolemy-zk41d.

import * as React from "react";
import { render } from "react-dom";

function App() {
  const [value, setValue] = React.useState("");

  const handleChange = event => {
    setValue(event.target.value);
  };

  return (
    <form className="App" onSubmit={e => alert("hi")}>
      <input type="text" />
      <input type="text" value={value} onChange={handleChange} />
      <input type="submit" />
      <input type="reset" />
    </form>
  );
}

const rootElement = document.getElementById("root");
render(<App />, rootElement);

@bluebill1049 Any tip on this problem?

BTW how is the integration with Material-UI going? :) Did #18269 (comment) help?

[bluebill1049]

Hey, @collegeimprovements, native form reset is going to be tricky for the custom components. because it's hard to get a controlled component to detect native reset API when it gets invoked unless dispatching some custom event and subscribe to them (which is probably not ideal at your app-level). personally I would host all the values in a local state and making your own reset function to reset the state and input values (like the example above by the author). It's working for TextField because it's using native input inside without additional UI elements to display value, however, if you adding the label prop, you would probably experience the same problem (the label is not animated to the top of your input when reset invoked). Hope my English make sense 👅

Hello @oliviertassinari :) Happy New Year 2020 ❤️wish you have another successful year with MUI. I think react-hook-form works well with MUI now, most of the users have moved into Controller component which basically wrapper controlled component and collecting value. The great thing about it; it still isolates the re-render within without effecting the form/app level.

[oliviertassinari]

@bluebill1049 Awesome, I wish you the best !