[FormControl] Fix onFocus and onBlur events override (#6952)

CLoses #6940
mui · May 25, 2017 · 9c79509 · 9c79509
1 parent 2611239
commit 9c79509
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 2 deletions.
diff --git a/src/Form/FormControl.js b/src/Form/FormControl.js
@@ -50,12 +50,18 @@ class FormControl extends Component {
   }
 
   handleFocus = () => {
+    if (this.props.onFocus) {
+      this.props.onFocus();
+    }
     if (!this.state.focused) {
       this.setState({ focused: true });
     }
   };
 
   handleBlur = () => {
+    if (this.props.onBlur) {
+      this.props.onBlur();
+    }
     if (this.state.focused) {
       this.setState({ focused: false });
     }
@@ -84,10 +90,10 @@ class FormControl extends Component {
 
     return (
       <div
-        onFocus={this.handleFocus}
-        onBlur={this.handleBlur}
         className={classNames(classes.root, className)}
         {...other}
+        onFocus={this.handleFocus}
+        onBlur={this.handleBlur}
       >
         {children}
       </div>
@@ -112,6 +118,14 @@ FormControl.propTypes = {
    * If `true`, the label should be displayed in an error state.
    */
   error: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  onBlur: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onFocus: PropTypes.func,
   /**
    * If `true`, the label will indicate that the input is required.
    */

diff --git a/src/Form/FormControl.spec.js b/src/Form/FormControl.spec.js
@@ -1,6 +1,7 @@
 // @flow
 
 import React from 'react';
+import { spy } from 'sinon';
 import { assert } from 'chai';
 import { createShallow } from '../test-utils';
 import FormControl, { styleSheet } from './FormControl';
@@ -124,6 +125,15 @@ describe('<FormControl />', () => {
           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);
+        });
       });
 
       describe('handleBlur', () => {
@@ -136,6 +146,16 @@ describe('<FormControl />', () => {
           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);
+        });
       });
     });
   });