{"commit":{"authorEmail":"marcin@mazurek.pro","authoredAt":"2016-08-29T19:23:30+01:00","revision":"ba84b5b0a7047115e60a8fc68d563782a5756fba","authorName":"Marcin Mazurek","subject":"Warn if input changes controlledness - also for null (#7544) (#7603)","shortRevision":"ba84b5b0a7"},"files":[{"status":"M","path":"src\/renderers\/dom\/client\/wrappers\/ReactDOMInput.js"},{"status":"M","path":"src\/renderers\/dom\/client\/wrappers\/__tests__\/ReactDOMInput-test.js"}],"parents":["5331fd00bc3936d19916d934a0fb0e549499ca4e"],"patch":"diff --git a\/src\/renderers\/dom\/client\/wrappers\/ReactDOMInput.js b\/src\/renderers\/dom\/client\/wrappers\/ReactDOMInput.js\nindex dfa860a2db..4350b4b050 100644\n--- a\/src\/renderers\/dom\/client\/wrappers\/ReactDOMInput.js\n+++ b\/src\/renderers\/dom\/client\/wrappers\/ReactDOMInput.js\n@@ -36,7 +36,7 @@ function forceUpdateIfMounted() {\n \n function isControlled(props) {\n var usesChecked = props.type === 'checkbox' || props.type === 'radio';\n- return usesChecked ? props.checked !== undefined : props.value !== undefined;\n+ return usesChecked ? props.checked != null : props.value != null;\n }\n \n \/**\ndiff --git a\/src\/renderers\/dom\/client\/wrappers\/__tests__\/ReactDOMInput-test.js b\/src\/renderers\/dom\/client\/wrappers\/__tests__\/ReactDOMInput-test.js\nindex 797841df73..f138e12e75 100644\n--- a\/src\/renderers\/dom\/client\/wrappers\/__tests__\/ReactDOMInput-test.js\n+++ b\/src\/renderers\/dom\/client\/wrappers\/__tests__\/ReactDOMInput-test.js\n@@ -580,7 +580,7 @@ describe('ReactDOMInput', function() {\n expect(console.error.calls.count()).toBe(1);\n });\n \n- it('should warn if controlled input switches to uncontrolled', function() {\n+ it('should warn if controlled input switches to uncontrolled (value is undefined)', function() {\n var stub = ;\n var container = document.createElement('div');\n ReactDOM.render(stub, container);\n@@ -594,6 +594,20 @@ describe('ReactDOMInput', function() {\n );\n });\n \n+ it('should warn if controlled input switches to uncontrolled (value is null)', function() {\n+ var stub = ;\n+ var container = document.createElement('div');\n+ ReactDOM.render(stub, container);\n+ ReactDOM.render(, container);\n+ expect(console.error.calls.count()).toBeGreaterThan(0);\n+ expect(console.error.calls.argsFor(1)[0]).toContain(\n+ 'A component is changing a controlled input of type text to be uncontrolled. ' +\n+ 'Input elements should not switch from controlled to uncontrolled (or vice versa). ' +\n+ 'Decide between using a controlled or uncontrolled input ' +\n+ 'element for the lifetime of the component. More info: https:\/\/fb.me\/react-controlled-components'\n+ );\n+ });\n+\n it('should warn if controlled input switches to uncontrolled with defaultValue', function() {\n var stub = ;\n var container = document.createElement('div');\n@@ -608,7 +622,7 @@ describe('ReactDOMInput', function() {\n );\n });\n \n- it('should warn if uncontrolled input switches to controlled', function() {\n+ it('should warn if uncontrolled input (value is undefined) switches to controlled', function() {\n var stub = ;\n var container = document.createElement('div');\n ReactDOM.render(stub, container);\n@@ -622,7 +636,21 @@ describe('ReactDOMInput', function() {\n );\n });\n \n- it('should warn if controlled checkbox switches to uncontrolled', function() {\n+ it('should warn if uncontrolled input (value is null) switches to controlled', function() {\n+ var stub = ;\n+ var container = document.createElement('div');\n+ ReactDOM.render(stub, container);\n+ ReactDOM.render(, container);\n+ expect(console.error.calls.count()).toBeGreaterThan(0);\n+ expect(console.error.calls.argsFor(1)[0]).toContain(\n+ 'A component is changing an uncontrolled input of type text to be controlled. ' +\n+ 'Input elements should not switch from uncontrolled to controlled (or vice versa). ' +\n+ 'Decide between using a controlled or uncontrolled input ' +\n+ 'element for the lifetime of the component. More info: https:\/\/fb.me\/react-controlled-components'\n+ );\n+ });\n+\n+ it('should warn if controlled checkbox switches to uncontrolled (checked is undefined)', function() {\n var stub = ;\n var container = document.createElement('div');\n ReactDOM.render(stub, container);\n@@ -636,6 +664,20 @@ describe('ReactDOMInput', function() {\n );\n });\n \n+ it('should warn if controlled checkbox switches to uncontrolled (checked is null)', function() {\n+ var stub = ;\n+ var container = document.createElement('div');\n+ ReactDOM.render(stub, container);\n+ ReactDOM.render(, container);\n+ expect(console.error.calls.count()).toBe(1);\n+ expect(console.error.calls.argsFor(0)[0]).toContain(\n+ 'A component is changing a controlled input of type checkbox to be uncontrolled. ' +\n+ 'Input elements should not switch from controlled to uncontrolled (or vice versa). ' +\n+ 'Decide between using a controlled or uncontrolled input ' +\n+ 'element for the lifetime of the component. More info: https:\/\/fb.me\/react-controlled-components'\n+ );\n+ });\n+\n it('should warn if controlled checkbox switches to uncontrolled with defaultChecked', function() {\n var stub = ;\n var container = document.createElement('div');\n@@ -650,7 +692,7 @@ describe('ReactDOMInput', function() {\n );\n });\n \n- it('should warn if uncontrolled checkbox switches to controlled', function() {\n+ it('should warn if uncontrolled checkbox (checked is undefined) switches to controlled', function() {\n var stub = ;\n var container = document.createElement('div');\n ReactDOM.render(stub, container);\n@@ -664,7 +706,21 @@ describe('ReactDOMInput', function() {\n );\n });\n \n- it('should warn if controlled radio switches to uncontrolled', function() {\n+ it('should warn if uncontrolled checkbox (checked is null) switches to controlled', function() {\n+ var stub = ;\n+ var container = document.createElement('div');\n+ ReactDOM.render(stub, container);\n+ ReactDOM.render(, container);\n+ expect(console.error.calls.count()).toBe(1);\n+ expect(console.error.calls.argsFor(0)[0]).toContain(\n+ 'A component is changing an uncontrolled input of type checkbox to be controlled. ' +\n+ 'Input elements should not switch from uncontrolled to controlled (or vice versa). ' +\n+ 'Decide between using a controlled or uncontrolled input ' +\n+ 'element for the lifetime of the component. More info: https:\/\/fb.me\/react-controlled-components'\n+ );\n+ });\n+\n+ it('should warn if controlled radio switches to uncontrolled (checked is undefined)', function() {\n var stub = ;\n var container = document.createElement('div');\n ReactDOM.render(stub, container);\n@@ -678,6 +734,20 @@ describe('ReactDOMInput', function() {\n );\n });\n \n+ it('should warn if controlled radio switches to uncontrolled (checked is null)', function() {\n+ var stub = ;\n+ var container = document.createElement('div');\n+ ReactDOM.render(stub, container);\n+ ReactDOM.render(, container);\n+ expect(console.error.calls.count()).toBe(1);\n+ expect(console.error.calls.argsFor(0)[0]).toContain(\n+ 'A component is changing a controlled input of type radio to be uncontrolled. ' +\n+ 'Input elements should not switch from controlled to uncontrolled (or vice versa). ' +\n+ 'Decide between using a controlled or uncontrolled input ' +\n+ 'element for the lifetime of the component. More info: https:\/\/fb.me\/react-controlled-components'\n+ );\n+ });\n+\n it('should warn if controlled radio switches to uncontrolled with defaultChecked', function() {\n var stub = ;\n var container = document.createElement('div');\n@@ -692,7 +762,7 @@ describe('ReactDOMInput', function() {\n );\n });\n \n- it('should warn if uncontrolled radio switches to controlled', function() {\n+ it('should warn if uncontrolled radio (checked is undefined) switches to controlled', function() {\n var stub = ;\n var container = document.createElement('div');\n ReactDOM.render(stub, container);\n@@ -706,6 +776,20 @@ describe('ReactDOMInput', function() {\n );\n });\n \n+ it('should warn if uncontrolled radio (checked is null) switches to controlled', function() {\n+ var stub = ;\n+ var container = document.createElement('div');\n+ ReactDOM.render(stub, container);\n+ ReactDOM.render(, container);\n+ expect(console.error.calls.count()).toBe(1);\n+ expect(console.error.calls.argsFor(0)[0]).toContain(\n+ 'A component is changing an uncontrolled input of type radio to be controlled. ' +\n+ 'Input elements should not switch from uncontrolled to controlled (or vice versa). ' +\n+ 'Decide between using a controlled or uncontrolled input ' +\n+ 'element for the lifetime of the component. More info: https:\/\/fb.me\/react-controlled-components'\n+ );\n+ });\n+\n it('should not warn if radio value changes but never becomes controlled', function() {\n var container = document.createElement('div');\n ReactDOM.render(, container);\n","body":""}

dillon1000/react

Files changed