From 74945476018a8ae0024f9e05523242c3010f7db5 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Mon, 12 Mar 2018 13:47:32 -0600 Subject: [PATCH 1/2] do not set both value and defaultValue on select --- CHANGELOG.md | 1 + .../select/__snapshots__/select.test.js.snap | 27 +++++++++++++++++++ src/components/form/select/select.js | 11 +++++++- src/components/form/select/select.test.js | 16 +++++++++++ 4 files changed, 54 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 657aa42ff65..0dfba54b894 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ **Bug fixes** +- `EuiSelect` do not set `defaultValue` property when `value` property is provided. - `EuiBottomBar` now uses `EuiPortal` to avoid zindex conflicts ([#487](https://github.com/elastic/eui/pull/487)) - Upped dark theme contrast on disabled buttons ([#487](https://github.com/elastic/eui/pull/487)) diff --git a/src/components/form/select/__snapshots__/select.test.js.snap b/src/components/form/select/__snapshots__/select.test.js.snap index cbced5b237e..ffb5884338f 100644 --- a/src/components/form/select/__snapshots__/select.test.js.snap +++ b/src/components/form/select/__snapshots__/select.test.js.snap @@ -118,3 +118,30 @@ exports[`EuiSelect props options are rendered 1`] = ` `; + +exports[`EuiSelect props value option is rendered 1`] = ` + + + + + +`; diff --git a/src/components/form/select/select.js b/src/components/form/select/select.js index 425f4813482..2db71758fe1 100644 --- a/src/components/form/select/select.js +++ b/src/components/form/select/select.js @@ -21,6 +21,7 @@ export const EuiSelect = ({ isLoading, hasNoInitialSelection, defaultValue, + value, ...rest }) => { const classes = classNames( @@ -39,6 +40,13 @@ export const EuiSelect = ({ ); } + // React HTML input can not have both value and defaultValue properties. + // https://reactjs.org/docs/uncontrolled-components.html#default-values + let selectDefaultValue; + if (!value) { + selectDefaultValue = defaultValue || ''; + } + return ( {emptyOptionNode} diff --git a/src/components/form/select/select.test.js b/src/components/form/select/select.test.js index 65679aef148..983629a01e8 100644 --- a/src/components/form/select/select.test.js +++ b/src/components/form/select/select.test.js @@ -76,5 +76,21 @@ describe('EuiSelect', () => { expect(component) .toMatchSnapshot(); }); + + test('value option is rendered', () => { + const component = render( + {}} + /> + ); + + expect(component) + .toMatchSnapshot(); + }); }); }); From 90c6ca36e9d28a1c9b0e9be1d42130f0a246af73 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Mon, 12 Mar 2018 16:36:13 -0600 Subject: [PATCH 2/2] add PR link to changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0dfba54b894..1fe1cd696a3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,7 @@ **Bug fixes** -- `EuiSelect` do not set `defaultValue` property when `value` property is provided. +- `EuiSelect` do not set `defaultValue` property when `value` property is provided ([#504](https://github.com/elastic/eui/pull/504)). - `EuiBottomBar` now uses `EuiPortal` to avoid zindex conflicts ([#487](https://github.com/elastic/eui/pull/487)) - Upped dark theme contrast on disabled buttons ([#487](https://github.com/elastic/eui/pull/487))