diff --git a/CHANGELOG.md b/CHANGELOG.md
index 657aa42ff65..1fe1cd696a3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
**Bug fixes**
+- `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))
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();
+ });
});
});