Fix “no onChange handler” warning to fire on falsy values ("", 0, false) too

packages/react-dom/src/__tests__/DOMPropertyOperations-test.js

@@ -79,7 +79,7 @@ describe('DOMPropertyOperations', () => {
 
     it('should not remove empty attributes for special properties', () => {
       const container = document.createElement('div');
-      ReactDOM.render(<input value="" />, container);
+      ReactDOM.render(<input value="" onChange={() => {}} />, container);
       expect(container.firstChild.getAttribute('value')).toBe('');
       expect(container.firstChild.value).toBe('');
     });

packages/react-dom/src/__tests__/ReactDOMInput-test.js

@@ -47,6 +47,30 @@ describe('ReactDOMInput', () => {
     document.body.removeChild(container);
   });
 
+  it('should warn of no event listener with a falsey value of 0', () => {
+    expect(() => {
+      ReactTestUtils.renderIntoDocument(<input type="text" value={0} />);
+    }).toWarnDev(
+      'Failed prop type: You provided a `value` prop to a form field without an `onChange` handler.',
+    );
+  });
+
+  it('should warn of no event listener with a falsey value of ""', () => {
+    expect(() => {
+      ReactTestUtils.renderIntoDocument(<input type="text" value="" />);
+    }).toWarnDev(
+      'Failed prop type: You provided a `value` prop to a form field without an `onChange` handler.',
+    );
+  });
+
+  it('should warn of no event listener with a value of "0"', () => {
+    expect(() => {
+      ReactTestUtils.renderIntoDocument(<input type="text" value="0" />);
+    }).toWarnDev(
+      'Failed prop type: You provided a `value` prop to a form field without an `onChange` handler.',
+    );
+  });
+
   it('should properly control a value even if no event listener exists', () => {
     let node;
 
@@ -452,7 +476,7 @@ describe('ReactDOMInput', () => {
   });
 
   it('should display `value` of number 0', () => {
-    const stub = <input type="text" value={0} />;
+    const stub = <input type="text" value={0} onChange={emptyFunction} />;
     const node = ReactDOM.render(stub, container);
 
     expect(node.value).toBe('0');
@@ -590,8 +614,14 @@ describe('ReactDOMInput', () => {
   });
 
   it('should properly transition from an empty value to 0', function() {
-    ReactDOM.render(<input type="text" value="" />, container);
-    ReactDOM.render(<input type="text" value={0} />, container);
+    ReactDOM.render(
+      <input type="text" value="" onChange={emptyFunction} />,
+      container,
+    );
+    ReactDOM.render(
+      <input type="text" value={0} onChange={emptyFunction} />,
+      container,
+    );
 
     const node = container.firstChild;
 
@@ -600,8 +630,14 @@ describe('ReactDOMInput', () => {
   });
 
   it('should properly transition from 0 to an empty value', function() {
-    ReactDOM.render(<input type="text" value={0} />, container);
-    ReactDOM.render(<input type="text" value="" />, container);
+    ReactDOM.render(
+      <input type="text" value={0} onChange={emptyFunction} />,
+      container,
+    );
+    ReactDOM.render(
+      <input type="text" value="" onChange={emptyFunction} />,
+      container,
+    );
 
     const node = container.firstChild;
 
@@ -610,8 +646,14 @@ describe('ReactDOMInput', () => {
   });
 
   it('should properly transition a text input from 0 to an empty 0.0', function() {
-    ReactDOM.render(<input type="text" value={0} />, container);
-    ReactDOM.render(<input type="text" value="0.0" />, container);
+    ReactDOM.render(
+      <input type="text" value={0} onChange={emptyFunction} />,
+      container,
+    );
+    ReactDOM.render(
+      <input type="text" value="0.0" onChange={emptyFunction} />,
+      container,
+    );
 
     const node = container.firstChild;
 
@@ -620,8 +662,14 @@ describe('ReactDOMInput', () => {
   });
 
   it('should properly transition a number input from "" to 0', function() {
-    ReactDOM.render(<input type="number" value="" />, container);
-    ReactDOM.render(<input type="number" value={0} />, container);
+    ReactDOM.render(
+      <input type="number" value="" onChange={emptyFunction} />,
+      container,
+    );
+    ReactDOM.render(
+      <input type="number" value={0} onChange={emptyFunction} />,
+      container,
+    );
 
     const node = container.firstChild;
 
@@ -630,8 +678,14 @@ describe('ReactDOMInput', () => {
   });
 
   it('should properly transition a number input from "" to "0"', function() {
-    ReactDOM.render(<input type="number" value="" />, container);
-    ReactDOM.render(<input type="number" value="0" />, container);
+    ReactDOM.render(
+      <input type="number" value="" onChange={emptyFunction} />,
+      container,
+    );
+    ReactDOM.render(
+      <input type="number" value="0" onChange={emptyFunction} />,
+      container,
+    );
 
     const node = container.firstChild;
 
@@ -874,6 +928,16 @@ describe('ReactDOMInput', () => {
     dispatchEventOnNode(node, 'input');
   });
 
+  it('should warn of no event listener with a falsey checked prop', () => {
+    expect(() =>
+      ReactTestUtils.renderIntoDocument(
+        <input type="checkbox" checked="false" />,
+      ),
+    ).toWarnDev(
+      'Failed prop type: You provided a `checked` prop to a form field without an `onChange` handler.',
+    );
+  });
+
   it('should warn with checked and no onChange handler with readOnly specified', () => {
     ReactDOM.render(
       <input type="checkbox" checked="false" readOnly={true} />,
@@ -1021,7 +1085,10 @@ describe('ReactDOMInput', () => {
     const stub = <input type="text" />;
     ReactDOM.render(stub, container);
     expect(() =>
-      ReactDOM.render(<input type="text" value="controlled" />, container),
+      ReactDOM.render(
+        <input type="text" value="controlled" onChange={emptyFunction} />,
+        container,
+      ),
     ).toWarnDev(
       'Warning: A component is changing an uncontrolled input of type text to be controlled. ' +
         'Input elements should not switch from uncontrolled to controlled (or vice versa). ' +
@@ -1032,7 +1099,7 @@ describe('ReactDOMInput', () => {
   });
 
   it('should warn if uncontrolled input (value is null) switches to controlled', () => {
-    const stub = <input type="text" value={null} />;
+    const stub = <input type="text" value={null} onChange={emptyFunction} />;
     expect(() => ReactDOM.render(stub, container)).toWarnDev(
       '`value` prop on `input` should not be null. ' +
         'Consider using an empty string to clear the component or `undefined` for uncontrolled components.',
@@ -1103,7 +1170,10 @@ describe('ReactDOMInput', () => {
     const stub = <input type="checkbox" />;
     ReactDOM.render(stub, container);
     expect(() =>
-      ReactDOM.render(<input type="checkbox" checked={true} />, container),
+      ReactDOM.render(
+        <input type="checkbox" checked={true} onChange={emptyFunction} />,
+        container,
+      ),
     ).toWarnDev(
       'Warning: A component is changing an uncontrolled input of type checkbox to be controlled. ' +
         'Input elements should not switch from uncontrolled to controlled (or vice versa). ' +
@@ -1114,10 +1184,15 @@ describe('ReactDOMInput', () => {
   });
 
   it('should warn if uncontrolled checkbox (checked is null) switches to controlled', () => {
-    const stub = <input type="checkbox" checked={null} />;
+    const stub = (
+      <input type="checkbox" checked={null} onChange={emptyFunction} />
+    );
     ReactDOM.render(stub, container);
     expect(() =>
-      ReactDOM.render(<input type="checkbox" checked={true} />, container),
+      ReactDOM.render(
+        <input type="checkbox" checked={true} onChange={emptyFunction} />,
+        container,
+      ),
     ).toWarnDev(
       'Warning: A component is changing an uncontrolled input of type checkbox to be controlled. ' +
         'Input elements should not switch from uncontrolled to controlled (or vice versa). ' +
@@ -1143,7 +1218,10 @@ describe('ReactDOMInput', () => {
     const stub = <input type="radio" checked={true} onChange={emptyFunction} />;
     ReactDOM.render(stub, container);
     expect(() =>
-      ReactDOM.render(<input type="radio" checked={null} />, container),
+      ReactDOM.render(
+        <input type="radio" checked={null} onChange={emptyFunction} />,
+        container,
+      ),
     ).toWarnDev(
       'Warning: A component is changing a controlled input of type radio to be uncontrolled. ' +
         'Input elements should not switch from controlled to uncontrolled (or vice versa). ' +
@@ -1182,10 +1260,13 @@ describe('ReactDOMInput', () => {
   });
 
   it('should warn if uncontrolled radio (checked is null) switches to controlled', () => {
-    const stub = <input type="radio" checked={null} />;
+    const stub = <input type="radio" checked={null} onChange={emptyFunction} />;
     ReactDOM.render(stub, container);
     expect(() =>
-      ReactDOM.render(<input type="radio" checked={true} />, container),
+      ReactDOM.render(
+        <input type="radio" checked={true} onChange={emptyFunction} />,
+        container,
+      ),
     ).toWarnDev(
       'Warning: A component is changing an uncontrolled input of type radio to be controlled. ' +
         'Input elements should not switch from uncontrolled to controlled (or vice versa). ' +

packages/react-dom/src/__tests__/ReactDOMSelect-test.js

@@ -9,6 +9,8 @@
 
 'use strict';
 
+const emptyFunction = require('fbjs/lib/emptyFunction');
+
 describe('ReactDOMSelect', () => {
   let React;
   let ReactDOM;
@@ -548,7 +550,7 @@ describe('ReactDOMSelect', () => {
   it('should warn if value is null', () => {
     expect(() =>
       ReactTestUtils.renderIntoDocument(
-        <select value={null}>
+        <select value={null} onChange={emptyFunction}>
           <option value="test" />
         </select>,
       ),
@@ -559,7 +561,7 @@ describe('ReactDOMSelect', () => {
     );
 
     ReactTestUtils.renderIntoDocument(
-      <select value={null}>
+      <select value={null} onChange={emptyFunction}>
         <option value="test" />
       </select>,
     );
@@ -586,7 +588,7 @@ describe('ReactDOMSelect', () => {
   it('should warn if value is null and multiple is true', () => {
     expect(() =>
       ReactTestUtils.renderIntoDocument(
-        <select value={null} multiple={true}>
+        <select value={null} multiple={true} onChange={emptyFunction}>
           <option value="test" />
         </select>,
       ),
@@ -598,7 +600,7 @@ describe('ReactDOMSelect', () => {
     );
 
     ReactTestUtils.renderIntoDocument(
-      <select value={null} multiple={true}>
+      <select value={null} multiple={true} onChange={emptyFunction}>
         <option value="test" />
       </select>,
     );

packages/react-dom/src/__tests__/ReactDOMTextarea-test.js

@@ -97,7 +97,7 @@ describe('ReactDOMTextarea', () => {
   });
 
   it('should display `value` of number 0', () => {
-    const stub = <textarea value={0} />;
+    const stub = <textarea value={0} onChange={emptyFunction} />;
     const node = renderTextarea(stub);
 
     expect(node.value).toBe('0');
@@ -387,15 +387,19 @@ describe('ReactDOMTextarea', () => {
 
   it('should warn if value is null', () => {
     expect(() =>
-      ReactTestUtils.renderIntoDocument(<textarea value={null} />),
+      ReactTestUtils.renderIntoDocument(
+        <textarea value={null} onChange={emptyFunction} />,
+      ),
     ).toWarnDev(
       '`value` prop on `textarea` should not be null. ' +
         'Consider using an empty string to clear the component or `undefined` ' +
         'for uncontrolled components.',
     );
 
     // No additional warnings are expected
-    ReactTestUtils.renderIntoDocument(<textarea value={null} />);
+    ReactTestUtils.renderIntoDocument(
+      <textarea value={null} onChange={emptyFunction} />,
+    );
   });
 
   it('should warn if value and defaultValue are specified', () => {

packages/react-dom/src/shared/ReactControlledValuePropTypes.js

@@ -30,11 +30,12 @@ if (__DEV__) {
   const propTypes = {
     value: function(props, propName, componentName) {
       if (
-        !props[propName] ||
+        !(propName in props) ||
         hasReadOnlyValue[props.type] ||
         props.onChange ||
         props.readOnly ||
-        props.disabled
+        props.disabled ||
+        props.value === null
       ) {
         return null;
       }
@@ -47,10 +48,11 @@ if (__DEV__) {
     },
     checked: function(props, propName, componentName) {
       if (
-        !props[propName] ||
+        !(propName in props) ||
         props.onChange ||
         props.readOnly ||
-        props.disabled
+        props.disabled ||
+        props.value === null
       ) {
         return null;
       }