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;
}