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
This commit is contained in:
Adrian Carolli 2017-12-09 21:06:41 -05:00 committed by Dan Abramov
parent f23dd7150f
commit 51e3f498a2
2 changed files with 39 additions and 5 deletions

View File

@ -540,6 +540,7 @@ describe('ReactDOMSelect', () => {
</select>, </select>,
); );
if (__DEV__) { if (__DEV__) {
expect(console.error.calls.count()).toBe(1);
expect(console.error.calls.argsFor(0)[0]).toContain( expect(console.error.calls.argsFor(0)[0]).toContain(
'`value` prop on `select` should not be null. ' + '`value` prop on `select` should not be null. ' +
'Consider using an empty string to clear the component or `undefined` ' + 'Consider using an empty string to clear the component or `undefined` ' +
@ -557,6 +558,34 @@ describe('ReactDOMSelect', () => {
} }
}); });
it('should warn if selected is set on <option>', () => {
spyOnDev(console, 'error');
ReactTestUtils.renderIntoDocument(
<select>
<option selected={true} />
<option selected={true} />
</select>,
);
if (__DEV__) {
expect(console.error.calls.count()).toBe(1);
}
ReactTestUtils.renderIntoDocument(
<select>
<option selected={true} />
<option selected={true} />
</select>,
);
if (__DEV__) {
expect(console.error.calls.count()).toBe(1);
expect(console.error.calls.argsFor(0)[0]).toContain(
'Use the `defaultValue` or `value` props on <select> instead of ' +
'setting `selected` on <option>.',
);
}
});
it('should warn if value is null and multiple is true', () => { it('should warn if value is null and multiple is true', () => {
spyOnDev(console, 'error'); spyOnDev(console, 'error');
ReactTestUtils.renderIntoDocument( ReactTestUtils.renderIntoDocument(

View File

@ -10,6 +10,8 @@
import React from 'react'; import React from 'react';
import warning from 'fbjs/lib/warning'; import warning from 'fbjs/lib/warning';
let didWarnSelectedSetOnOption = false;
function flattenChildren(children) { function flattenChildren(children) {
let content = ''; let content = '';
@ -36,11 +38,14 @@ function flattenChildren(children) {
export function validateProps(element: Element, props: Object) { export function validateProps(element: Element, props: Object) {
// TODO (yungsters): Remove support for `selected` in <option>. // TODO (yungsters): Remove support for `selected` in <option>.
if (__DEV__) { if (__DEV__) {
if (!didWarnSelectedSetOnOption) {
warning( warning(
props.selected == null, props.selected == null,
'Use the `defaultValue` or `value` props on <select> instead of ' + 'Use the `defaultValue` or `value` props on <select> instead of ' +
'setting `selected` on <option>.', 'setting `selected` on <option>.',
); );
didWarnSelectedSetOnOption = true;
}
} }
} }