fix: select console error to not suggest to set readonly to true (#27740)
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
BIKI DAS committed
Dec 1, 2023 at 21:25 UTC
5dd35968bef791ccc5948c657fabf191a77fff3f
2 files changed
+130
-6
packages/react-dom-bindings/src/shared/ReactControlledValuePropTypes.js
+13
-6
@@ -32,12 +32,19 @@ export function checkControlledValueProps(
32
props.value == null
33
)
34
) {
35
- console.error(
36
- 'You provided a `value` prop to a form field without an ' +
37
- '`onChange` handler. This will render a read-only field. If ' +
38
- 'the field should be mutable use `defaultValue`. Otherwise, ' +
39
- 'set either `onChange` or `readOnly`.',
40
- );
35
+ if (tagName === 'select') {
36
+ console.error(
37
+ 'You provided a `value` prop to a form field without an ' +
38
+ '`onChange` handler. This will render a read-only field. If ' +
39
+ 'the field should be mutable use `defaultValue`. Otherwise, set `onChange`.',
40
+ );
41
+ } else {
42
+ console.error(
43
+ 'You provided a `value` prop to a form field without an ' +
44
+ '`onChange` handler. This will render a read-only field. If ' +
45
+ 'the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.',
46
+ );
47
+ }
48
}
49
50
if (
packages/react-dom/src/__tests__/ReactDOMSelect-test.js
+117
@@ -1289,5 +1289,122 @@ describe('ReactDOMSelect', () => {
1289
' This value must be coerced to a string before using it here.',
1290
);
1291
});
1292
+
1293
+ it('should not warn about missing onChange if value is not set', () => {
1294
+ expect(() => {
1295
+ ReactTestUtils.renderIntoDocument(
1296
+ <select>
1297
+ <option value="monkey">A monkey!</option>
1298
+ <option value="giraffe">A giraffe!</option>
1299
+ <option value="gorilla">A gorilla!</option>
1300
+ </select>,
1301
+ );
1302
+ }).not.toThrow();
1303
+ });
1304
+
1305
+ it('should not throw an error about missing onChange if value is undefined', () => {
1306
+ expect(() => {
1307
+ ReactTestUtils.renderIntoDocument(
1308
+ <select value={undefined}>
1309
+ <option value="monkey">A monkey!</option>
1310
+ <option value="giraffe">A giraffe!</option>
1311
+ <option value="gorilla">A gorilla!</option>
1312
+ </select>,
1313
+ );
1314
+ }).not.toThrow();
1315
+ });
1316
+
1317
+ it('should not warn about missing onChange if onChange is set', () => {
1318
+ const change = jest.fn();
1319
+ expect(() => {
1320
+ ReactTestUtils.renderIntoDocument(
1321
+ <select value="monkey" onChange={change}>
1322
+ <option value="monkey">A monkey!</option>
1323
+ <option value="giraffe">A giraffe!</option>
1324
+ <option value="gorilla">A gorilla!</option>
1325
+ </select>,
1326
+ );
1327
+ }).not.toThrow();
1328
+ });
1329
+
1330
+ it('should not warn about missing onChange if disabled is true', () => {
1331
+ expect(() => {
1332
+ ReactTestUtils.renderIntoDocument(
1333
+ <select value="monkey" disabled={true}>
1334
+ <option value="monkey">A monkey!</option>
1335
+ <option value="giraffe">A giraffe!</option>
1336
+ <option value="gorilla">A gorilla!</option>
1337
+ </select>,
1338
+ );
1339
+ }).not.toThrow();
1340
+ });
1341
+
1342
+ it('should warn about missing onChange if value is false', () => {
1343
+ expect(() =>
1344
+ ReactTestUtils.renderIntoDocument(
1345
+ <select value={false}>
1346
+ <option value="monkey">A monkey!</option>
1347
+ <option value="giraffe">A giraffe!</option>
1348
+ <option value="gorilla">A gorilla!</option>
1349
+ </select>,
1350
+ ),
1351
+ ).toErrorDev(
1352
+ 'Warning: You provided a `value` prop to a form ' +
1353
+ 'field without an `onChange` handler. This will render a read-only ' +
1354
+ 'field. If the field should be mutable use `defaultValue`. ' +
1355
+ 'Otherwise, set `onChange`.',
1356
+ );
1357
+ });
1358
+
1359
+ it('should warn about missing onChange if value is 0', () => {
1360
+ expect(() =>
1361
+ ReactTestUtils.renderIntoDocument(
1362
+ <select value={0}>
1363
+ <option value="monkey">A monkey!</option>
1364
+ <option value="giraffe">A giraffe!</option>
1365
+ <option value="gorilla">A gorilla!</option>
1366
+ </select>,
1367
+ ),
1368
+ ).toErrorDev(
1369
+ 'Warning: You provided a `value` prop to a form ' +
1370
+ 'field without an `onChange` handler. This will render a read-only ' +
1371
+ 'field. If the field should be mutable use `defaultValue`. ' +
1372
+ 'Otherwise, set `onChange`.',
1373
+ );
1374
+ });
1375
+
1376
+ it('should warn about missing onChange if value is "0"', () => {
1377
+ expect(() =>
1378
+ ReactTestUtils.renderIntoDocument(
1379
+ <select value="0">
1380
+ <option value="monkey">A monkey!</option>
1381
+ <option value="giraffe">A giraffe!</option>
1382
+ <option value="gorilla">A gorilla!</option>
1383
+ </select>,
1384
+ ),
1385
+ ).toErrorDev(
1386
+ 'Warning: You provided a `value` prop to a form ' +
1387
+ 'field without an `onChange` handler. This will render a read-only ' +
1388
+ 'field. If the field should be mutable use `defaultValue`. ' +
1389
+ 'Otherwise, set `onChange`.',
1390
+ );
1391
+ });
1392
+
1393
+ it('should warn about missing onChange if value is ""', () => {
1394
+ expect(() =>
1395
+ ReactTestUtils.renderIntoDocument(
1396
+ <select value="">
1397
+ <option value="monkey">A monkey!</option>
1398
+ <option value="giraffe">A giraffe!</option>
1399
+ <option value="gorilla">A gorilla!</option>
1400
+ </select>,
1401
+ ),
1402
+ ).toErrorDev(
1403
+ 'Warning: You provided a `value` prop to a form ' +
1404
+ 'field without an `onChange` handler. This will render a read-only ' +
1405
+ 'field. If the field should be mutable use `defaultValue`. ' +
1406
+ 'Otherwise, set `onChange`.',
1407
+ );
1408
+ });
1409
});
1410
});