Fix error stemming from selected prop on EuiSelect (#436)

elastic · Feb 23, 2018 · f96bba2 · f96bba2
1 parent 06bd42c
commit f96bba2
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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,