From 454648754b47f535264a0c1a893cbdb022191202 Mon Sep 17 00:00:00 2001
From: Kevin Ross <kevin.ross@alienfast.com>
Date: Sat, 9 Sep 2017 11:36:57 -0500
Subject: [PATCH] [Input] Dodge the BFcache issue (#8110)

---
 docs/src/pages/demos/selects/SimpleSelect.js  |  4 +--
 .../src/pages/demos/text-fields/TextFields.js |  2 +-
 .../getting-started/supported-components.md   |  9 ++++---
 src/Input/Input.js                            | 25 ++++++++-----------
 src/Input/Input.spec.js                       |  6 +----
 5 files changed, 20 insertions(+), 26 deletions(-)

diff --git a/docs/src/pages/demos/selects/SimpleSelect.js b/docs/src/pages/demos/selects/SimpleSelect.js
index d85adb27e801f1..9eb27973da2e5c 100644
--- a/docs/src/pages/demos/selects/SimpleSelect.js
+++ b/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>
     );
   }
 }
diff --git a/docs/src/pages/demos/text-fields/TextFields.js b/docs/src/pages/demos/text-fields/TextFields.js
index b814e267a4dbd4..9610dd15fccb96 100644
--- a/docs/src/pages/demos/text-fields/TextFields.js
+++ b/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"
diff --git a/docs/src/pages/getting-started/supported-components.md b/docs/src/pages/getting-started/supported-components.md
index 3d6c7af2c40c35..79c3f495a4b9d4 100644
--- a/docs/src/pages/getting-started/supported-components.md
+++ b/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)) ✓**
diff --git a/src/Input/Input.js b/src/Input/Input.js
index 6762a54b603c0c..4e7875308e7454 100644
--- a/src/Input/Input.js
+++ b/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
diff --git a/src/Input/Input.spec.js b/src/Input/Input.spec.js
index 1cb877ee15c272..0aa4ded548d633 100644
--- a/src/Input/Input.spec.js
+++ b/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`);
     });
   });