Skip to content

Commit e2e94d9

Browse files
Biki-dasAndyPengc12
Biki-das
authored and
AndyPengc12
committed
fix: select console error to not suggest to set readonly to true (facebook#27740)
fix facebook#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
1 parent 13341c6 commit e2e94d9

File tree

2 files changed

+130
-6
lines changed

2 files changed

+130
-6
lines changed

‎packages/react-dom-bindings/src/shared/ReactControlledValuePropTypes.js

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,12 +32,19 @@ export function checkControlledValueProps(
3232
props.value == null
3333
)
3434
) {
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+
}
4148
}
4249

4350
if (

‎packages/react-dom/src/__tests__/ReactDOMSelect-test.js

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1289,5 +1289,122 @@ describe('ReactDOMSelect', () => {
12891289
' This value must be coerced to a string before using it here.',
12901290
);
12911291
});
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+
});
12921409
});
12931410
});

0 commit comments

Comments
 (0)