Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: select console error to not suggest to set readonly to true (#27740)

Browse Source 
fix #27657 

added test in the `ReactDOMSELECT-test.js` to not allow regession to
happen in future.

After changes this is what the error message looks like


https://github.com/facebook/react/assets/72331432/53dcbe2a-70d2-43d2-a52d-a4fc389fdfbf
This commit is contained in:
BIKI DAS
2023-12-01 15:55:55 +00:00
committed by GitHub
parent 3e97c00deb
commit 5dd35968be
2 changed files with 130 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-dom-bindings/src/shared/ReactControlledValuePropTypes.js
Vendored
+13 -6
View File
@@ -32,12 +32,19 @@ export function checkControlledValueProps(
props.value == null
)
) {
console.error(
'You provided a `value` prop to a form field without an ' +
'`onChange` handler. This will render a read-only field. If ' +
'the field should be mutable use `defaultValue`. Otherwise, ' +
'set either `onChange` or `readOnly`.',
);
if (tagName === 'select') {
console.error(
'You provided a `value` prop to a form field without an ' +
'`onChange` handler. This will render a read-only field. If ' +
'the field should be mutable use `defaultValue`. Otherwise, set `onChange`.',
);
} else {
console.error(
'You provided a `value` prop to a form field without an ' +
'`onChange` handler. This will render a read-only field. If ' +
'the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.',
);
}
}
if (
packages/react-dom/src/__tests__/ReactDOMSelect-test.js
Vendored
+117
View File
@@ -1289,5 +1289,122 @@ describe('ReactDOMSelect', () => {
' This value must be coerced to a string before using it here.',
);
});
it('should not warn about missing onChange if value is not set', () => {
expect(() => {
ReactTestUtils.renderIntoDocument(
<select>
<option value="monkey">A monkey!</option>
<option value="giraffe">A giraffe!</option>
<option value="gorilla">A gorilla!</option>
</select>,
);
}).not.toThrow();
});
it('should not throw an error about missing onChange if value is undefined', () => {
expect(() => {
ReactTestUtils.renderIntoDocument(
<select value={undefined}>
<option value="monkey">A monkey!</option>
<option value="giraffe">A giraffe!</option>
<option value="gorilla">A gorilla!</option>
</select>,
);
}).not.toThrow();
});
it('should not warn about missing onChange if onChange is set', () => {
const change = jest.fn();
expect(() => {
ReactTestUtils.renderIntoDocument(
<select value="monkey" onChange={change}>
<option value="monkey">A monkey!</option>
<option value="giraffe">A giraffe!</option>
<option value="gorilla">A gorilla!</option>
</select>,
);
}).not.toThrow();
});
it('should not warn about missing onChange if disabled is true', () => {
expect(() => {
ReactTestUtils.renderIntoDocument(
<select value="monkey" disabled={true}>
<option value="monkey">A monkey!</option>
<option value="giraffe">A giraffe!</option>
<option value="gorilla">A gorilla!</option>
</select>,
);
}).not.toThrow();
});
it('should warn about missing onChange if value is false', () => {
expect(() =>
ReactTestUtils.renderIntoDocument(
<select value={false}>
<option value="monkey">A monkey!</option>
<option value="giraffe">A giraffe!</option>
<option value="gorilla">A gorilla!</option>
</select>,
),
).toErrorDev(
'Warning: You provided a `value` prop to a form ' +
'field without an `onChange` handler. This will render a read-only ' +
'field. If the field should be mutable use `defaultValue`. ' +
'Otherwise, set `onChange`.',
);
});
it('should warn about missing onChange if value is 0', () => {
expect(() =>
ReactTestUtils.renderIntoDocument(
<select value={0}>
<option value="monkey">A monkey!</option>
<option value="giraffe">A giraffe!</option>
<option value="gorilla">A gorilla!</option>
</select>,
),
).toErrorDev(
'Warning: You provided a `value` prop to a form ' +
'field without an `onChange` handler. This will render a read-only ' +
'field. If the field should be mutable use `defaultValue`. ' +
'Otherwise, set `onChange`.',
);
});
it('should warn about missing onChange if value is "0"', () => {
expect(() =>
ReactTestUtils.renderIntoDocument(
<select value="0">
<option value="monkey">A monkey!</option>
<option value="giraffe">A giraffe!</option>
<option value="gorilla">A gorilla!</option>
</select>,
),
).toErrorDev(
'Warning: You provided a `value` prop to a form ' +
'field without an `onChange` handler. This will render a read-only ' +
'field. If the field should be mutable use `defaultValue`. ' +
'Otherwise, set `onChange`.',
);
});
it('should warn about missing onChange if value is ""', () => {
expect(() =>
ReactTestUtils.renderIntoDocument(
<select value="">
<option value="monkey">A monkey!</option>
<option value="giraffe">A giraffe!</option>
<option value="gorilla">A gorilla!</option>
</select>,
),
).toErrorDev(
'Warning: You provided a `value` prop to a form ' +
'field without an `onChange` handler. This will render a read-only ' +
'field. If the field should be mutable use `defaultValue`. ' +
'Otherwise, set `onChange`.',
);
});
});
});