[Input] Dodge the BFcache issue (#8110)

docs/src/pages/demos/selects/SimpleSelect.js

@@ -33,7 +33,7 @@ class SimpleSelect extends React.Component {
     const classes = this.props.classes;
 
     return (
-      <div className={classes.container}>
+      <form className={classes.container} autoComplete="off">
         <FormControl className={classes.formControl}>
           <InputLabel htmlFor="age-simple">Age</InputLabel>
           <Select
@@ -119,7 +119,7 @@ class SimpleSelect extends React.Component {
           </Select>
           <FormHelperText>Read only</FormHelperText>
         </FormControl>
-      </div>
+      </form>
     );
   }
 }

docs/src/pages/demos/text-fields/TextFields.js

@@ -33,7 +33,7 @@ class TextFields extends React.Component {
     const { classes } = this.props;
 
     return (
-      <form className={classes.container} noValidate>
+      <form className={classes.container} noValidate autoComplete="off">
         <TextField
           id="name"
           label="Name"

docs/src/pages/getting-started/supported-components.md

@@ -70,8 +70,8 @@ to discuss the approach before submitting a PR.
   - **[Button menu](https://www.google.com/design/spec/components/menus.html#menus-usage) (Can be constructed) ✓**
   - **[Scrollable](https://www.google.com/design/spec/components/menus.html#menus-usage) ✓**
   - [Cascade](https://www.google.com/design/spec/components/menus.html#menus-usage)
-  - [Textfield dropdown](https://www.google.com/design/spec/components/menus.html#menus-behavior) (DropDownMenu)
-  - [Contextual / App bar dropdown](https://www.google.com/design/spec/components/menus.html#menus-usage) (IconMenu)
+  - **[Textfield dropdown](https://www.google.com/design/spec/components/menus.html#menus-behavior) (Selet) ✓**
+  - **[Contextual / App bar dropdown](https://www.google.com/design/spec/components/menus.html#menus-usage) (IconButton + Menu) ✓**
   - **[Simple menus](https://www.google.com/design/spec/components/menus.html#menus-simple-menus) (Menu) ✓**
 - [Pickers](https://www.google.com/design/spec/components/pickers.html)
   - [Date picker](https://www.google.com/design/spec/components/pickers.html#pickers-date-pickers)
@@ -91,7 +91,7 @@ to discuss the approach before submitting a PR.
 - **[Snackbars](https://www.google.com/design/spec/components/snackbars-toasts.html) ✓**
 - **[Subheaders](https://www.google.com/design/spec/components/subheaders.html) ✓**
   - **[List](https://www.google.com/design/spec/components/subheaders.html#subheaders-list-subheaders) ✓**
-  - [Grid](https://www.google.com/design/spec/components/subheaders.html#subheaders-list-subheaders)
+  - **[Grid](https://www.google.com/design/spec/components/subheaders.html#subheaders-list-subheaders) ✓**
   - [Menu](https://www.google.com/design/spec/components/subheaders.html#subheaders-list-subheaders)
 - [Steppers](https://www.google.com/design/spec/components/steppers.html)
   - [Horizontal](https://www.google.com/design/spec/components/steppers.html#steppers-types-of-steppers)
@@ -111,7 +111,8 @@ to discuss the approach before submitting a PR.
     - **[Icon and text](https://www.google.com/design/spec/components/tabs.html#tabs-usage) ✓**
 - **[Text fields](https://www.google.com/design/spec/components/text-fields.html) ✓**
   - **[Single-line](https://www.google.com/design/spec/components/text-fields.html#text-fields-single-line-text-field) ✓**
-  - [Multi-line](https://www.google.com/design/spec/components/text-fields.html#text-fields-multi-line-text-field)
+  - [Multi-line](https://material.io/guidelines/components/text-fields.html#text-fields-field-types)
+  - [Text-area](https://material.io/guidelines/components/text-fields.html#text-fields-field-types)
   - **[Full-width](https://www.google.com/design/spec/components/text-fields.html#text-fields-multi-line-text-field) ✓**
   - [Character counter](https://www.google.com/design/spec/components/text-fields.html#text-fields-character-counter)
   - **[Autocomplete](https://www.google.com/design/spec/components/text-fields.html#text-fields-auto-complete-text-field) (Can be done with external library such as [react-autosuggest](https://github.com/moroshko/react-autosuggest)) ✓**

src/Input/Input.js

@@ -271,31 +271,31 @@ export type Props = {
   /**
    * @ignore
    */
-  onBlur?: Function,
+  onBlur?: (event: SyntheticFocusEvent<>) => void,
   /**
    * TODO
    */
-  onChange?: Function,
+  onChange?: (event: SyntheticInputEvent<>) => void,
   /**
    * TODO
    */
-  onClean?: Function,
+  onClean?: () => void,
   /**
    * TODO
    */
-  onDirty?: Function,
+  onDirty?: () => void,
   /**
    * @ignore
    */
-  onFocus?: Function,
+  onFocus?: (event: SyntheticFocusEvent<>) => void,
   /**
    * @ignore
    */
-  onKeyDown?: Function,
+  onKeyDown?: (event: SyntheticKeyboardEvent<>) => void,
   /**
    * @ignore
    */
-  onKeyUp?: Function,
+  onKeyUp?: (event: SyntheticKeyboardEvent<>) => void,
   /**
    * TODO
    */
@@ -347,12 +347,9 @@ class Input extends React.Component<AllProps, State> {
   }
 
   componentDidMount() {
-    // Fix SSR issue with the go back feature of the browsers.
-    // Let's say you start filling the input with "foo", you change the page then after comes back.
-    // The browser will reset the input value to "foo", but we also need to tell React about it.
-    this.handleChange({
-      target: this.input,
-    });
+    if (!this.isControlled()) {
+      this.checkDirty(this.input);
+    }
   }
 
   componentWillUpdate(nextProps) {
@@ -378,7 +375,7 @@ class Input extends React.Component<AllProps, State> {
     }
   };
 
-  handleChange = event => {
+  handleChange = (event: SyntheticInputEvent<>) => {
     if (!this.isControlled()) {
       this.checkDirty(this.input);
     } // else perform in the willUpdate

src/Input/Input.spec.js

@@ -90,11 +90,7 @@ describe('<Input />', () => {
     events.forEach(n => {
       const event = n.charAt(2).toLowerCase() + n.slice(3);
       wrapper.find('input').simulate(event);
-      assert.strictEqual(
-        handlers[n].callCount,
-        n === 'onChange' ? 2 : 1,
-        `should have called the ${n} handler`,
-      );
+      assert.strictEqual(handlers[n].callCount, 1, `should have called the ${n} handler`);
     });
   });