Skip to content

Commit 20d12a7

Browse files
nealwrightnealwright
committed
Corrects error message for select with props.multiple set to true and a null value.
1 parent 4131af3 commit 20d12a7

File tree

5 files changed

+101
-71
lines changed

5 files changed

+101
-71
lines changed

‎scripts/rollup/results.json

Lines changed: 64 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
22
"bundleSizes": {
33
"react.development.js (UMD_DEV)": {
4-
"size": 54777,
5-
"gzip": 14345
4+
"size": 54819,
5+
"gzip": 14348
66
},
77
"react.production.min.js (UMD_PROD)": {
88
"size": 6634,
@@ -25,40 +25,40 @@
2525
"gzip": 6703
2626
},
2727
"react-dom.development.js (UMD_DEV)": {
28-
"size": 614249,
29-
"gzip": 141958
28+
"size": 622093,
29+
"gzip": 143491
3030
},
3131
"react-dom.production.min.js (UMD_PROD)": {
32-
"size": 99500,
33-
"gzip": 31459
32+
"size": 100052,
33+
"gzip": 31613
3434
},
3535
"react-dom.development.js (NODE_DEV)": {
36-
"size": 576510,
37-
"gzip": 133279
36+
"size": 584378,
37+
"gzip": 134811
3838
},
3939
"react-dom.production.min.js (NODE_PROD)": {
40-
"size": 104453,
41-
"gzip": 32832
40+
"size": 104973,
41+
"gzip": 32985
4242
},
4343
"ReactDOMFiber-dev.js (FB_DEV)": {
44-
"size": 573391,
45-
"gzip": 132712
44+
"size": 581259,
45+
"gzip": 134242
4646
},
4747
"ReactDOMFiber-prod.js (FB_PROD)": {
48-
"size": 409575,
49-
"gzip": 91600
48+
"size": 412354,
49+
"gzip": 92115
5050
},
5151
"react-dom-test-utils.development.js (NODE_DEV)": {
52-
"size": 41660,
53-
"gzip": 11093
52+
"size": 41687,
53+
"gzip": 11100
5454
},
5555
"ReactTestUtils-dev.js (FB_DEV)": {
56-
"size": 41222,
57-
"gzip": 11028
56+
"size": 41249,
57+
"gzip": 11034
5858
},
5959
"react-dom-unstable-native-dependencies.development.js (UMD_DEV)": {
60-
"size": 86507,
61-
"gzip": 21920
60+
"size": 86535,
61+
"gzip": 21924
6262
},
6363
"react-dom-unstable-native-dependencies.production.min.js (UMD_PROD)": {
6464
"size": 15163,
@@ -81,76 +81,76 @@
8181
"gzip": 15465
8282
},
8383
"react-dom-server.browser.development.js (UMD_DEV)": {
84-
"size": 129604,
85-
"gzip": 33468
84+
"size": 130439,
85+
"gzip": 33699
8686
},
8787
"react-dom-server.browser.production.min.js (UMD_PROD)": {
88-
"size": 14959,
89-
"gzip": 5848
88+
"size": 15059,
89+
"gzip": 5885
9090
},
9191
"react-dom-server.browser.development.js (NODE_DEV)": {
92-
"size": 99526,
93-
"gzip": 26362
92+
"size": 100349,
93+
"gzip": 26599
9494
},
9595
"react-dom-server.browser.production.min.js (NODE_PROD)": {
96-
"size": 14889,
97-
"gzip": 5844
96+
"size": 14989,
97+
"gzip": 5873
9898
},
9999
"ReactDOMServer-dev.js (FB_DEV)": {
100-
"size": 98947,
101-
"gzip": 26272
100+
"size": 99770,
101+
"gzip": 26499
102102
},
103103
"ReactDOMServer-prod.js (FB_PROD)": {
104-
"size": 42275,
105-
"gzip": 11813
104+
"size": 42468,
105+
"gzip": 11846
106106
},
107107
"react-dom-server.node.development.js (NODE_DEV)": {
108-
"size": 101804,
109-
"gzip": 26916
108+
"size": 102627,
109+
"gzip": 27151
110110
},
111111
"react-dom-server.node.production.min.js (NODE_PROD)": {
112-
"size": 15814,
113-
"gzip": 6172
112+
"size": 15914,
113+
"gzip": 6203
114114
},
115115
"react-art.development.js (UMD_DEV)": {
116-
"size": 366731,
117-
"gzip": 81411
116+
"size": 304065,
117+
"gzip": 65801
118118
},
119119
"react-art.production.min.js (UMD_PROD)": {
120-
"size": 82271,
121-
"gzip": 25526
120+
"size": 46364,
121+
"gzip": 14489
122122
},
123123
"react-art.development.js (NODE_DEV)": {
124-
"size": 291038,
125-
"gzip": 62178
124+
"size": 294139,
125+
"gzip": 62704
126126
},
127127
"react-art.production.min.js (NODE_PROD)": {
128-
"size": 52180,
129-
"gzip": 16354
128+
"size": 52306,
129+
"gzip": 16377
130130
},
131131
"ReactARTFiber-dev.js (FB_DEV)": {
132-
"size": 289892,
133-
"gzip": 62221
132+
"size": 292993,
133+
"gzip": 62753
134134
},
135135
"ReactARTFiber-prod.js (FB_PROD)": {
136-
"size": 217580,
137-
"gzip": 45263
136+
"size": 218059,
137+
"gzip": 45323
138138
},
139139
"ReactNativeFiber-dev.js (RN_DEV)": {
140-
"size": 275060,
141-
"gzip": 48092
140+
"size": 277048,
141+
"gzip": 48329
142142
},
143143
"ReactNativeFiber-prod.js (RN_PROD)": {
144-
"size": 215733,
145-
"gzip": 37458
144+
"size": 216111,
145+
"gzip": 37521
146146
},
147147
"react-test-renderer.development.js (NODE_DEV)": {
148-
"size": 295122,
149-
"gzip": 62617
148+
"size": 298257,
149+
"gzip": 63139
150150
},
151151
"ReactTestRendererFiber-dev.js (FB_DEV)": {
152-
"size": 293966,
153-
"gzip": 62666
152+
"size": 297101,
153+
"gzip": 63194
154154
},
155155
"react-test-renderer-shallow.development.js (NODE_DEV)": {
156156
"size": 9157,
@@ -161,8 +161,8 @@
161161
"gzip": 2208
162162
},
163163
"react-noop-renderer.development.js (NODE_DEV)": {
164-
"size": 282598,
165-
"gzip": 59528
164+
"size": 285699,
165+
"gzip": 60046
166166
},
167167
"react-dom-server.development.js (UMD_DEV)": {
168168
"size": 120897,
@@ -189,16 +189,16 @@
189189
"gzip": 7520
190190
},
191191
"ReactNativeRTFiber-dev.js (RN_DEV)": {
192-
"size": 218534,
193-
"gzip": 37944
192+
"size": 209321,
193+
"gzip": 35877
194194
},
195195
"ReactNativeRTFiber-prod.js (RN_PROD)": {
196-
"size": 167912,
197-
"gzip": 28774
196+
"size": 158131,
197+
"gzip": 26596
198198
},
199199
"react-test-renderer.production.min.js (NODE_PROD)": {
200-
"size": 53838,
201-
"gzip": 16625
200+
"size": 53964,
201+
"gzip": 16647
202202
},
203203
"react-test-renderer-shallow.production.min.js (NODE_PROD)": {
204204
"size": 4508,

‎src/renderers/dom/shared/hooks/ReactDOMNullInputValuePropHook.js

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,10 @@ if (__DEV__) {
1414
var {ReactDebugCurrentFrame} = require('ReactGlobalSharedState');
1515
}
1616

17-
var didWarnValueNull = false;
17+
var didWarnValueNull = {
18+
default: false,
19+
multiple: false,
20+
};
1821

1922
function getStackAddendum() {
2023
var stack = ReactDebugCurrentFrame.getStackAddendum();
@@ -25,17 +28,25 @@ function validateProperties(type, props) {
2528
if (type !== 'input' && type !== 'textarea' && type !== 'select') {
2629
return;
2730
}
28-
if (props != null && props.value === null && !didWarnValueNull) {
31+
32+
var isMultipleSelect = type === 'select' && props.multiple === true;
33+
var errorType = isMultipleSelect ? 'multiple' : 'default';
34+
var isFirstError = !didWarnValueNull[errorType];
35+
36+
if (props != null && props.value === null && isFirstError) {
2937
warning(
3038
false,
3139
'`value` prop on `%s` should not be null. ' +
32-
'Consider using the empty string to clear the component or `undefined` ' +
40+
'Consider using an empty %s to clear the component or `undefined` ' +
3341
'for uncontrolled components.%s',
3442
type,
43+
errorType === 'multiple'
44+
? 'array when multiple is set to true'
45+
: 'string',
3546
getStackAddendum(),
3647
);
3748

38-
didWarnValueNull = true;
49+
didWarnValueNull[errorType] = true;
3950
}
4051
}
4152

‎src/renderers/dom/shared/wrappers/__tests__/ReactDOMInput-test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -810,7 +810,7 @@ describe('ReactDOMInput', () => {
810810
ReactTestUtils.renderIntoDocument(<input type="text" value={null} />);
811811
expectDev(console.error.calls.argsFor(0)[0]).toContain(
812812
'`value` prop on `input` should not be null. ' +
813-
'Consider using the empty string to clear the component or `undefined` ' +
813+
'Consider using an empty string to clear the component or `undefined` ' +
814814
'for uncontrolled components.',
815815
);
816816

‎src/renderers/dom/shared/wrappers/__tests__/ReactDOMSelect-test.js

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -514,7 +514,7 @@ describe('ReactDOMSelect', () => {
514514
);
515515
expectDev(console.error.calls.argsFor(0)[0]).toContain(
516516
'`value` prop on `select` should not be null. ' +
517-
'Consider using the empty string to clear the component or `undefined` ' +
517+
'Consider using an empty string to clear the component or `undefined` ' +
518518
'for uncontrolled components.',
519519
);
520520

@@ -524,6 +524,25 @@ describe('ReactDOMSelect', () => {
524524
expectDev(console.error.calls.count()).toBe(1);
525525
});
526526

527+
it('should warn if value is null and multiple is true', () => {
528+
spyOn(console, 'error');
529+
ReactTestUtils.renderIntoDocument(
530+
<select value={null} multiple={true}><option value="test" /></select>,
531+
);
532+
533+
expectDev(console.error.calls.argsFor(0)[0]).toContain(
534+
'`value` prop on `select` should not be null. ' +
535+
'Consider using an empty array when multiple is ' +
536+
'set to true to clear the component or `undefined` ' +
537+
'for uncontrolled components.',
538+
);
539+
540+
ReactTestUtils.renderIntoDocument(
541+
<select value={null} multiple={true}><option value="test" /></select>,
542+
);
543+
expectDev(console.error.calls.count()).toBe(1);
544+
});
545+
527546
it('should refresh state on change', () => {
528547
var stub = (
529548
<select value="giraffe" onChange={noop}>

‎src/renderers/dom/shared/wrappers/__tests__/ReactDOMTextarea-test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -357,7 +357,7 @@ describe('ReactDOMTextarea', () => {
357357
ReactTestUtils.renderIntoDocument(<textarea value={null} />);
358358
expectDev(console.error.calls.argsFor(0)[0]).toContain(
359359
'`value` prop on `textarea` should not be null. ' +
360-
'Consider using the empty string to clear the component or `undefined` ' +
360+
'Consider using an empty string to clear the component or `undefined` ' +
361361
'for uncontrolled components.',
362362
);
363363

0 commit comments

Comments
 (0)