diff --git a/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js b/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js index c5536129b543b..2959274d1c865 100644 --- a/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js +++ b/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js @@ -184,7 +184,7 @@ describe('DOMPropertyOperations', () => { container, ), ).toErrorDev( - 'A component is changing a controlled input of type text to be uncontrolled', + 'A component is changing a controlled input to be uncontrolled', ); if (disableInputAttributeSyncing) { expect(container.firstChild.hasAttribute('value')).toBe(false); diff --git a/packages/react-dom/src/__tests__/ReactDOMComponentTree-test.js b/packages/react-dom/src/__tests__/ReactDOMComponentTree-test.js index b00bd145ae148..cc2f557706805 100644 --- a/packages/react-dom/src/__tests__/ReactDOMComponentTree-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMComponentTree-test.js @@ -178,9 +178,9 @@ describe('ReactDOMComponentTree', () => { const component = ; const instance = ReactDOM.render(component, container); expect(() => simulateInput(instance.a, finishValue)).toErrorDev( - '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). ' + + 'Warning: A component is changing an uncontrolled input to be controlled. ' + + 'This is likely caused by the value changing from undefined to ' + + 'a defined value, which should not happen. ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: ' + 'https://fb.me/react-controlled-components', diff --git a/packages/react-dom/src/__tests__/ReactDOMInput-test.js b/packages/react-dom/src/__tests__/ReactDOMInput-test.js index 4674f9e40e393..007e91166709a 100644 --- a/packages/react-dom/src/__tests__/ReactDOMInput-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMInput-test.js @@ -475,8 +475,7 @@ describe('ReactDOMInput', () => { expect(() => ReactDOM.render(, container), ).toErrorDev( - 'A component is changing a controlled input of type ' + - 'text to be uncontrolled.', + 'A component is changing a controlled input to be uncontrolled.', ); expect(node.value).toBe('0'); }); @@ -854,8 +853,7 @@ describe('ReactDOMInput', () => { container, ), ).toErrorDev( - 'A component is changing a controlled input of type ' + - 'submit to be uncontrolled.', + 'A component is changing a controlled input to be uncontrolled.', ); const node = container.firstChild; @@ -874,8 +872,7 @@ describe('ReactDOMInput', () => { container, ), ).toErrorDev( - 'A component is changing a controlled input of type ' + - 'reset to be uncontrolled.', + 'A component is changing a controlled input to be uncontrolled.', ); const node = container.firstChild; @@ -1268,8 +1265,9 @@ describe('ReactDOMInput', () => { ); ReactDOM.render(stub, container); expect(() => ReactDOM.render(, container)).toErrorDev( - 'Warning: A component is changing a controlled input of type text to be uncontrolled. ' + - 'Input elements should not switch from controlled to uncontrolled (or vice versa). ' + + 'Warning: A component is changing a controlled input to be uncontrolled. ' + + 'This is likely caused by the value changing from a defined to ' + + 'undefined, which should not happen. ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' + ' in input (at **)', @@ -1286,8 +1284,9 @@ describe('ReactDOMInput', () => { ).toErrorDev([ '`value` prop on `input` should not be null. ' + 'Consider using an empty string to clear the component or `undefined` for uncontrolled components', - 'Warning: A component is changing a controlled input of type text to be uncontrolled. ' + - 'Input elements should not switch from controlled to uncontrolled (or vice versa). ' + + 'Warning: A component is changing a controlled input to be uncontrolled. ' + + 'This is likely caused by the value changing from a defined to ' + + 'undefined, which should not happen. ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' + ' in input (at **)', @@ -1305,8 +1304,9 @@ describe('ReactDOMInput', () => { container, ), ).toErrorDev( - 'Warning: A component is changing a controlled input of type text to be uncontrolled. ' + - 'Input elements should not switch from controlled to uncontrolled (or vice versa). ' + + 'Warning: A component is changing a controlled input to be uncontrolled. ' + + 'This is likely caused by the value changing from a defined to ' + + 'undefined, which should not happen. ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' + ' in input (at **)', @@ -1319,8 +1319,9 @@ describe('ReactDOMInput', () => { expect(() => ReactDOM.render(, container), ).toErrorDev( - '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). ' + + 'Warning: A component is changing an uncontrolled input to be controlled. ' + + 'This is likely caused by the value changing from undefined to ' + + 'a defined value, which should not happen. ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' + ' in input (at **)', @@ -1336,8 +1337,9 @@ describe('ReactDOMInput', () => { expect(() => ReactDOM.render(, container), ).toErrorDev( - '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). ' + + 'Warning: A component is changing an uncontrolled input to be controlled. ' + + 'This is likely caused by the value changing from undefined to ' + + 'a defined value, which should not happen. ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' + ' in input (at **)', @@ -1352,8 +1354,9 @@ describe('ReactDOMInput', () => { expect(() => ReactDOM.render(, container), ).toErrorDev( - 'Warning: A component is changing a controlled input of type checkbox to be uncontrolled. ' + - 'Input elements should not switch from controlled to uncontrolled (or vice versa). ' + + 'Warning: A component is changing a controlled input to be uncontrolled. ' + + 'This is likely caused by the value changing from a defined to ' + + 'undefined, which should not happen. ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' + ' in input (at **)', @@ -1368,8 +1371,9 @@ describe('ReactDOMInput', () => { expect(() => ReactDOM.render(, container), ).toErrorDev( - 'Warning: A component is changing a controlled input of type checkbox to be uncontrolled. ' + - 'Input elements should not switch from controlled to uncontrolled (or vice versa). ' + + 'Warning: A component is changing a controlled input to be uncontrolled. ' + + 'This is likely caused by the value changing from a defined to ' + + 'undefined, which should not happen. ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' + ' in input (at **)', @@ -1387,8 +1391,9 @@ describe('ReactDOMInput', () => { container, ), ).toErrorDev( - 'Warning: A component is changing a controlled input of type checkbox to be uncontrolled. ' + - 'Input elements should not switch from controlled to uncontrolled (or vice versa). ' + + 'Warning: A component is changing a controlled input to be uncontrolled. ' + + 'This is likely caused by the value changing from a defined to ' + + 'undefined, which should not happen. ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' + ' in input (at **)', @@ -1401,8 +1406,9 @@ describe('ReactDOMInput', () => { expect(() => ReactDOM.render(, container), ).toErrorDev( - '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). ' + + 'Warning: A component is changing an uncontrolled input to be controlled. ' + + 'This is likely caused by the value changing from undefined to ' + + 'a defined value, which should not happen. ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' + ' in input (at **)', @@ -1415,8 +1421,9 @@ describe('ReactDOMInput', () => { expect(() => ReactDOM.render(, container), ).toErrorDev( - '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). ' + + 'Warning: A component is changing an uncontrolled input to be controlled. ' + + 'This is likely caused by the value changing from undefined to ' + + 'a defined value, which should not happen. ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' + ' in input (at **)', @@ -1427,8 +1434,9 @@ describe('ReactDOMInput', () => { const stub = ; ReactDOM.render(stub, container); expect(() => ReactDOM.render(, container)).toErrorDev( - '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). ' + + 'Warning: A component is changing a controlled input to be uncontrolled. ' + + 'This is likely caused by the value changing from a defined to ' + + 'undefined, which should not happen. ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' + ' in input (at **)', @@ -1441,8 +1449,9 @@ describe('ReactDOMInput', () => { expect(() => ReactDOM.render(, container), ).toErrorDev( - '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). ' + + 'Warning: A component is changing a controlled input to be uncontrolled. ' + + 'This is likely caused by the value changing from a defined to ' + + 'undefined, which should not happen. ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' + ' in input (at **)', @@ -1455,8 +1464,9 @@ describe('ReactDOMInput', () => { expect(() => ReactDOM.render(, container), ).toErrorDev( - '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). ' + + 'Warning: A component is changing a controlled input to be uncontrolled. ' + + 'This is likely caused by the value changing from a defined to ' + + 'undefined, which should not happen. ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' + ' in input (at **)', @@ -1469,8 +1479,9 @@ describe('ReactDOMInput', () => { expect(() => ReactDOM.render(, container), ).toErrorDev( - '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). ' + + 'Warning: A component is changing an uncontrolled input to be controlled. ' + + 'This is likely caused by the value changing from undefined to ' + + 'a defined value, which should not happen. ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' + ' in input (at **)', @@ -1483,8 +1494,9 @@ describe('ReactDOMInput', () => { expect(() => ReactDOM.render(, container), ).toErrorDev( - '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). ' + + 'Warning: A component is changing an uncontrolled input to be controlled. ' + + 'This is likely caused by the value changing from undefined to ' + + 'a defined value, which should not happen. ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' + ' in input (at **)', @@ -1535,8 +1547,9 @@ describe('ReactDOMInput', () => { expect(() => ReactDOM.render(, container), ).toErrorDev( - '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). ' + + 'Warning: A component is changing a controlled input to be uncontrolled. ' + + 'This is likely caused by the value changing from a defined to ' + + 'undefined, which should not happen. ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' + ' in input (at **)', @@ -1817,8 +1830,7 @@ describe('ReactDOMInput', () => { it('reverts the value attribute to the initial value', () => { expect(renderInputWithStringThenWithUndefined).toErrorDev( - 'Input elements should not switch from controlled to ' + - 'uncontrolled (or vice versa).', + 'A component is changing a controlled input to be uncontrolled.', ); if (disableInputAttributeSyncing) { expect(input.getAttribute('value')).toBe(null); @@ -1829,8 +1841,7 @@ describe('ReactDOMInput', () => { it('preserves the value property', () => { expect(renderInputWithStringThenWithUndefined).toErrorDev( - 'Input elements should not switch from controlled to ' + - 'uncontrolled (or vice versa).', + 'A component is changing a controlled input to be uncontrolled.', ); expect(input.value).toBe('latest'); }); @@ -1869,8 +1880,7 @@ describe('ReactDOMInput', () => { '`value` prop on `input` should not be null. ' + 'Consider using an empty string to clear the component ' + 'or `undefined` for uncontrolled components.', - 'Input elements should not switch from controlled ' + - 'to uncontrolled (or vice versa).', + 'A component is changing a controlled input to be uncontrolled.', ]); if (disableInputAttributeSyncing) { expect(input.hasAttribute('value')).toBe(false); @@ -1884,8 +1894,7 @@ describe('ReactDOMInput', () => { '`value` prop on `input` should not be null. ' + 'Consider using an empty string to clear the component ' + 'or `undefined` for uncontrolled components.', - 'Input elements should not switch from controlled ' + - 'to uncontrolled (or vice versa).', + 'A component is changing a controlled input to be uncontrolled.', ]); expect(input.value).toBe('latest'); }); diff --git a/packages/react-dom/src/client/ReactDOMInput.js b/packages/react-dom/src/client/ReactDOMInput.js index 0f5d61b8dc426..2d7efd24ffaae 100644 --- a/packages/react-dom/src/client/ReactDOMInput.js +++ b/packages/react-dom/src/client/ReactDOMInput.js @@ -141,11 +141,11 @@ export function updateWrapper(element: Element, props: Object) { !didWarnUncontrolledToControlled ) { console.error( - 'A component is changing an uncontrolled input of type %s to be controlled. ' + - 'Input elements should not switch from uncontrolled to controlled (or vice versa). ' + + 'A component is changing an uncontrolled input to be controlled. ' + + 'This is likely caused by the value changing from undefined to ' + + 'a defined value, which should not happen. ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components', - props.type, ); didWarnUncontrolledToControlled = true; } @@ -155,11 +155,11 @@ export function updateWrapper(element: Element, props: Object) { !didWarnControlledToUncontrolled ) { console.error( - 'A component is changing a controlled input of type %s to be uncontrolled. ' + - 'Input elements should not switch from controlled to uncontrolled (or vice versa). ' + + 'A component is changing a controlled input to be uncontrolled. ' + + 'This is likely caused by the value changing from a defined to ' + + 'undefined, which should not happen. ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components', - props.type, ); didWarnControlledToUncontrolled = true; }