From e6b0b22e524cb689ddd96016e3ba5e204ac88957 Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Mon, 12 Mar 2018 16:42:04 -0600
Subject: [PATCH] do not set both value and defaultValue on select (#504)

* do not set both value and defaultValue on select

* add PR link to changelog
---
 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..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`] = `
   </eui-validatable-control>
 </eui-form-control-layout>
 `;
+
+exports[`EuiSelect props value option is rendered 1`] = `
+<eui-form-control-layout
+  fullwidth="false"
+  icon="arrowDown"
+  iconside="right"
+  isloading="false"
+>
+  <eui-validatable-control>
+    <select
+      class="euiSelect"
+    >
+      <option
+        selected=""
+        value="1"
+      >
+        Option #1
+      </option>
+      <option
+        value="2"
+      >
+        Option #2
+      </option>
+    </select>
+  </eui-validatable-control>
+</eui-form-control-layout>
+`;
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 (
     <EuiFormControlLayout
       icon="arrowDown"
@@ -52,7 +60,8 @@ export const EuiSelect = ({
           name={name}
           className={classes}
           ref={inputRef}
-          defaultValue={defaultValue || ''}
+          defaultValue={selectDefaultValue}
+          value={value}
           {...rest}
         >
           {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(
+        <EuiSelect
+          options={[
+            { value: '1', text: 'Option #1' },
+            { value: '2', text: 'Option #2' }
+          ]}
+          value={'1'}
+          onChange={() => {}}
+        />
+      );
+
+      expect(component)
+        .toMatchSnapshot();
+    });
   });
 });