Fix error stemming from selected prop on EuiSelect

Apparently React doesn’t use this property and uses `value`/`defaultValue` similar to other inputs.
elastic · Feb 23, 2018 · 790fc54 · 790fc54
1 parent 06bd42c
commit 790fc54
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
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,