From f96bba2f6ae54bf0af7d0f38761f5e01410001f5 Mon Sep 17 00:00:00 2001
From: Caroline Horn <549577+cchaos@users.noreply.github.com>
Date: Fri, 23 Feb 2018 15:42:50 -0500
Subject: [PATCH] Fix error stemming from `selected` prop on `EuiSelect` (#436)

---
 CHANGELOG.md                         |  1 +
 src-docs/src/views/form/form_rows.js |  2 +-
 src/components/form/select/select.js | 10 ++++++----
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e2ce5f32c5d..4cbaa37b5b8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ and logic ([#390](https://github.com/elastic/eui/pull/390))
 **Bug fixes**
 
 - Fixed `EuiContextMenu` bug when using the keyboard to navigate up, which was caused by unnecessarily re-rendering the items, thus losing references to them ([#431](https://github.com/elastic/eui/pull/431))
+- Fix error stemming from `selected` prop on `EuiSelect` ([#436](https://github.com/elastic/eui/pull/436))
 
 # [`0.0.22`](https://github.com/elastic/eui/tree/v0.0.22)
 
diff --git a/src-docs/src/views/form/form_rows.js b/src-docs/src/views/form/form_rows.js
index 5df637b10f0..073585fd113 100644
--- a/src-docs/src/views/form/form_rows.js
+++ b/src-docs/src/views/form/form_rows.js
@@ -129,7 +129,7 @@ export default class extends Component {
           label="Select (with no initial selection)"
         >
           <EuiSelect
-            hasNoInitialSelection={true}
+            hasNoInitialSelection
             options={[
               { value: 'option_one', text: 'Option one' },
               { value: 'option_two', text: 'Option two' },
diff --git a/src/components/form/select/select.js b/src/components/form/select/select.js
index f5353988229..425f4813482 100644
--- a/src/components/form/select/select.js
+++ b/src/components/form/select/select.js
@@ -20,6 +20,7 @@ export const EuiSelect = ({
   fullWidth,
   isLoading,
   hasNoInitialSelection,
+  defaultValue,
   ...rest
 }) => {
   const classes = classNames(
@@ -31,10 +32,10 @@ export const EuiSelect = ({
     className
   );
 
-  let emtpyOptionNode;
+  let emptyOptionNode;
   if (hasNoInitialSelection) {
-    emtpyOptionNode = (
-      <option selected disabled hidden style={{ display: 'none' }}>&nbsp;</option>
+    emptyOptionNode = (
+      <option value="" disabled hidden style={{ display: 'none' }}>&nbsp;</option>
     );
   }
 
@@ -51,9 +52,10 @@ export const EuiSelect = ({
           name={name}
           className={classes}
           ref={inputRef}
+          defaultValue={defaultValue || ''}
           {...rest}
         >
-          {emtpyOptionNode}
+          {emptyOptionNode}
           {options.map((option, index) => {
             const {
               text,