do not set both value and defaultValue on select (#504)

* do not set both value and defaultValue on select * add PR link to changelog
elastic · Mar 12, 2018 · e6b0b22 · e6b0b22
1 parent 749024c
commit e6b0b22
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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();
+    });
   });
 });