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:
parent
f23dd7150f
commit
51e3f498a2
|
@ -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(
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue