[TextField] Bind the focus/blur explicitly

mui · Jun 9, 2018 · 7243e5c · 7243e5c
1 parent a5df649
commit 7243e5c
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 50 deletions.
diff --git a/docs/src/pages/demos/selection-controls/SwitchLabels.js b/docs/src/pages/demos/selection-controls/SwitchLabels.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import FormGroup from '@material-ui/core/FormGroup';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Switch from '@material-ui/core/Switch';
@@ -46,8 +45,4 @@ class SwitchLabels extends React.Component {
   }
 }
 
-SwitchLabels.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
 export default SwitchLabels;
diff --git a/packages/material-ui/src/FormControl/FormControl.js b/packages/material-ui/src/FormControl/FormControl.js
@@ -93,20 +93,11 @@ class FormControl extends React.Component {
     };
   }
 
-  handleFocus = event => {
-    if (this.props.onFocus) {
-      this.props.onFocus(event);
-    }
+  handleFocus = () => {
     this.setState(state => (!state.focused ? { focused: true } : null));
   };
 
-  handleBlur = event => {
-    // The event might be undefined.
-    // For instance, a child component might call this hook
-    // when an input is disabled but still having the focus.
-    if (this.props.onBlur && event) {
-      this.props.onBlur(event);
-    }
+  handleBlur = () => {
     this.setState(state => (state.focused ? { focused: false } : null));
   };
 
@@ -146,8 +137,6 @@ class FormControl extends React.Component {
           className,
         )}
         {...other}
-        onFocus={this.handleFocus}
-        onBlur={this.handleBlur}
       />
     );
   }
@@ -188,14 +177,6 @@ FormControl.propTypes = {
    * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
    */
   margin: PropTypes.oneOf(['none', 'dense', 'normal']),
-  /**
-   * @ignore
-   */
-  onBlur: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onFocus: PropTypes.func,
   /**
    * If `true`, the label will indicate that the input is required.
    */

diff --git a/packages/material-ui/src/FormControl/FormControl.test.js b/packages/material-ui/src/FormControl/FormControl.test.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import { spy } from 'sinon';
 import { assert } from 'chai';
 import { createShallow, getClasses } from '../test-utils';
 import Input from '../Input';
@@ -223,38 +222,23 @@ describe('<FormControl />', () => {
 
       describe('handleFocus', () => {
         it('should set the focused state', () => {
-          assert.strictEqual(wrapper.state('focused'), false);
+          assert.strictEqual(wrapper.state().focused, false);
           muiFormControlContext.onFocus();
-          assert.strictEqual(wrapper.state('focused'), true);
+          assert.strictEqual(wrapper.state().focused, true);
           muiFormControlContext.onFocus();
-          assert.strictEqual(wrapper.state('focused'), true);
-        });
-
-        it('should be able to use a onFocus property', () => {
-          const handleFocus = spy();
-          wrapper.setProps({ onFocus: handleFocus });
-          muiFormControlContext.onFocus();
-          assert.strictEqual(handleFocus.callCount, 1);
+          assert.strictEqual(wrapper.state().focused, true);
         });
       });
 
       describe('handleBlur', () => {
         it('should clear the focused state', () => {
-          assert.strictEqual(wrapper.state('focused'), false);
+          assert.strictEqual(wrapper.state().focused, false);
           muiFormControlContext.onFocus();
-          assert.strictEqual(wrapper.state('focused'), true);
+          assert.strictEqual(wrapper.state().focused, true);
           muiFormControlContext.onBlur();
-          assert.strictEqual(wrapper.state('focused'), false);
+          assert.strictEqual(wrapper.state().focused, false);
           muiFormControlContext.onBlur();
-          assert.strictEqual(wrapper.state('focused'), false);
-        });
-
-        it('should be able to use a onBlur property', () => {
-          const handleBlur = spy();
-          wrapper.setProps({ onBlur: handleBlur });
-          muiFormControlContext.onFocus();
-          muiFormControlContext.onBlur({});
-          assert.strictEqual(handleBlur.callCount, 1);
+          assert.strictEqual(wrapper.state().focused, false);
         });
       });
     });

diff --git a/packages/material-ui/src/Input/Input.js b/packages/material-ui/src/Input/Input.js
@@ -289,7 +289,7 @@ class Input extends React.Component {
   input = null; // Holds the input reference
 
   handleFocus = event => {
-    // Fix an bug with IE11 where the focus/blur events are triggered
+    // Fix a bug with IE11 where the focus/blur events are triggered
     // while the input is disabled.
     if (formControlState(this.props, this.context).disabled) {
       event.stopPropagation();
@@ -300,13 +300,23 @@ class Input extends React.Component {
     if (this.props.onFocus) {
       this.props.onFocus(event);
     }
+
+    const { muiFormControl } = this.context;
+    if (muiFormControl && muiFormControl.onFocus) {
+      muiFormControl.onFocus(event);
+    }
   };
 
   handleBlur = event => {
     this.setState({ focused: false });
     if (this.props.onBlur) {
       this.props.onBlur(event);
     }
+
+    const { muiFormControl } = this.context;
+    if (muiFormControl && muiFormControl.onBlur) {
+      muiFormControl.onBlur(event);
+    }
   };
 
   handleChange = event => {

diff --git a/packages/material-ui/src/internal/SwitchBase.js b/packages/material-ui/src/internal/SwitchBase.js
@@ -47,6 +47,28 @@ class SwitchBase extends React.Component {
   input = null;
   isControlled = null;
 
+  handleFocus = event => {
+    if (this.props.onFocus) {
+      this.props.onFocus(event);
+    }
+
+    const { muiFormControl } = this.context;
+    if (muiFormControl && muiFormControl.onFocus) {
+      muiFormControl.onFocus(event);
+    }
+  };
+
+  handleBlur = event => {
+    if (this.props.onBlur) {
+      this.props.onBlur(event);
+    }
+
+    const { muiFormControl } = this.context;
+    if (muiFormControl && muiFormControl.onBlur) {
+      muiFormControl.onBlur(event);
+    }
+  };
+
   handleInputChange = event => {
     const checked = event.target.checked;
 
@@ -105,6 +127,8 @@ class SwitchBase extends React.Component {
         disabled={disabled}
         tabIndex={null}
         role={undefined}
+        onFocus={this.handleFocus}
+        onBlur={this.handleBlur}
         {...other}
       >
         {checked ? checkedIcon : icon}
@@ -186,6 +210,10 @@ SwitchBase.propTypes = {
    * @ignore
    */
   name: PropTypes.string,
+  /**
+   * @ignore
+   */
+  onBlur: PropTypes.func,
   /**
    * Callback fired when the state is changed.
    *
@@ -194,6 +222,10 @@ SwitchBase.propTypes = {
    * @param {boolean} checked The `checked` value of the switch
    */
   onChange: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onFocus: PropTypes.func,
   /**
    * @ignore
    */