[Input] Dodge the BFcache issue

mui · Sep 9, 2017 · ae46767 · ae46767
1 parent fade206
commit ae46767
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 21 deletions.
diff --git 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
@@ -33,7 +33,7 @@ class TextFields extends React.Component {
     const classes = this.props.classes;
 
     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
@@ -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
@@ -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