Deduplication of warn when selected is set on <option> (#11821)
* Deduplication of warn selected on option - Wrote a failing test - Deduplication when selected is set on option * Ran yarn preitter * Fixed PR request - Moved dedupe test to above - Moved && case to seperate if to seperate static and dynamic things - Render'd component twice * Actually check for deduplication * Minor nits
Adrian Carolli committed
Dec 9, 2017 at 21:06 UTC
51e3f498a20572ecd5360c0460da212903a089bb
2 files changed
+39
-5
packages/react-dom/src/__tests__/ReactDOMSelect-test.js
+29
@@ -540,6 +540,7 @@ describe('ReactDOMSelect', () => {
540
</select>,
541
);
542
if (__DEV__) {
543
+ expect(console.error.calls.count()).toBe(1);
544
expect(console.error.calls.argsFor(0)[0]).toContain(
545
'`value` prop on `select` should not be null. ' +
546
'Consider using an empty string to clear the component or `undefined` ' +
@@ -557,6 +558,34 @@ describe('ReactDOMSelect', () => {
558
}
559
});
560
561
+ it('should warn if selected is set on <option>', () => {
562
+ spyOnDev(console, 'error');
563
+
564
+ ReactTestUtils.renderIntoDocument(
565
+ <select>
566
+ <option selected={true} />
567
+ <option selected={true} />
568
+ </select>,
569
+ );
570
+ if (__DEV__) {
571
+ expect(console.error.calls.count()).toBe(1);
572
+ }
573
+
574
+ ReactTestUtils.renderIntoDocument(
575
+ <select>
576
+ <option selected={true} />
577
+ <option selected={true} />
578
+ </select>,
579
+ );
580
+ if (__DEV__) {
581
+ expect(console.error.calls.count()).toBe(1);
582
+ expect(console.error.calls.argsFor(0)[0]).toContain(
583
+ 'Use the `defaultValue` or `value` props on <select> instead of ' +
584
+ 'setting `selected` on <option>.',
585
+ );
586
+ }
587
+ });
588
+
589
it('should warn if value is null and multiple is true', () => {
590
spyOnDev(console, 'error');
591
ReactTestUtils.renderIntoDocument(
packages/react-dom/src/client/ReactDOMFiberOption.js
+10
-5
@@ -10,6 +10,8 @@
10
import React from 'react';
11
import warning from 'fbjs/lib/warning';
12
13
+let didWarnSelectedSetOnOption = false;
14
+
15
function flattenChildren(children) {
16
let content = '';
17
@@ -36,11 +38,14 @@ function flattenChildren(children) {
38
export function validateProps(element: Element, props: Object) {
39
// TODO (yungsters): Remove support for `selected` in <option>.
40
if (__DEV__) {
39
- warning(
40
- props.selected == null,
41
- 'Use the `defaultValue` or `value` props on <select> instead of ' +
42
- 'setting `selected` on <option>.',
43
- );
41
+ if (!didWarnSelectedSetOnOption) {
42
+ warning(
43
+ props.selected == null,
44
+ 'Use the `defaultValue` or `value` props on <select> instead of ' +
45
+ 'setting `selected` on <option>.',
46
+ );
47
+ didWarnSelectedSetOnOption = true;
48
+ }
49
}
50
}
51