[FormControlLabel] Add a failing test case and fix it (#12141)

Author: oliviertassinari

packages/material-ui/src/FormControlLabel/FormControlLabel.js

@@ -47,40 +47,37 @@ function FormControlLabel(props, context) {
     value,
     ...other
   } = props;
-
   const { muiFormControl } = context;
-  let disabled = disabledProp;
 
-  if (typeof control.props.disabled !== 'undefined') {
-    if (typeof disabled === 'undefined') {
-      disabled = control.props.disabled;
-    }
+  let disabled = disabledProp;
+  if (typeof disabled === 'undefined' && typeof control.props.disabled !== 'undefined') {
+    disabled = control.props.disabled;
   }
-
-  if (muiFormControl) {
-    if (typeof disabled === 'undefined') {
-      disabled = muiFormControl.disabled;
-    }
+  if (typeof disabled === 'undefined' && muiFormControl) {
+    disabled = muiFormControl.disabled;
   }
 
-  const className = classNames(
-    classes.root,
-    {
-      [classes.disabled]: disabled,
-    },
-    classNameProp,
-  );
+  const controlProps = {
+    disabled,
+  };
+  ['checked', 'name', 'onChange', 'value', 'inputRef'].forEach(key => {
+    if (typeof control.props[key] === 'undefined' && typeof props[key] !== 'undefined') {
+      controlProps[key] = props[key];
+    }
+  });
 
   return (
-    <label className={className} {...other}>
-      {React.cloneElement(control, {
-        disabled,
-        checked: typeof control.props.checked === 'undefined' ? checked : control.props.checked,
-        name: control.props.name || name,
-        onChange: control.props.onChange || onChange,
-        value: control.props.value || value,
-        inputRef: control.props.inputRef || inputRef,
-      })}
+    <label
+      className={classNames(
+        classes.root,
+        {
+          [classes.disabled]: disabled,
+        },
+        classNameProp,
+      )}
+      {...other}
+    >
+      {React.cloneElement(control, controlProps)}
       <Typography
         component="span"
         className={classNames(classes.label, { [classes.disabled]: disabled })}

packages/material-ui/src/FormControlLabel/FormControlLabel.test.js

@@ -4,7 +4,7 @@ import { createShallow, createMount, getClasses } from '../test-utils';
 import Checkbox from '../Checkbox';
 import FormControlLabel from './FormControlLabel';
 
-describe('FormControlLabel', () => {
+describe('<FormControlLabel />', () => {
   let shallow;
   let mount;
   let classes;
@@ -28,7 +28,7 @@ describe('FormControlLabel', () => {
   });
 
   describe('prop: disabled', () => {
-    it('should disable everything', () => {
+    it('should disable everything 1', () => {
       const wrapper = shallow(<FormControlLabel label="Pizza" disabled control={<div />} />);
       const label = wrapper.childAt(1);
       assert.strictEqual(
@@ -41,7 +41,7 @@ describe('FormControlLabel', () => {
       assert.strictEqual(label.hasClass(classes.disabled), true);
     });
 
-    it('should disable everything', () => {
+    it('should disable everything 2', () => {
       const wrapper = shallow(<FormControlLabel label="Pizza" control={<div disabled />} />);
       const label = wrapper.childAt(1);
       assert.strictEqual(
@@ -105,4 +105,16 @@ describe('FormControlLabel', () => {
       });
     });
   });
+
+  it('should not inject extra properties', () => {
+    // eslint-disable-next-line react/prop-types
+    const Control = ({ inputRef, ...props }) => <div name="name" {...props} />;
+    const wrapper = mount(<FormControlLabel label="Pizza" control={<Control />} />);
+    assert.strictEqual(wrapper.find('div').props().name, 'name');
+  });
+
+  it('should forward some properties', () => {
+    const wrapper = mount(<FormControlLabel value="value" label="Pizza" control={<div />} />);
+    assert.strictEqual(wrapper.find('div').props().value, 'value');
+  });
 });