EuiSuperSelect - check for empty string before setting defaultValue

CHANGELOG.md

@@ -6,6 +6,7 @@
 
 - `EuiBasicTable` now converts the `EuiTableRowCell` `header` into `undefined` if it's been provided as a non-string node, hiding the header and preventing the node from being rendered as `[object Object]` on narrow screens ([#1312](https://github.com/elastic/eui/pull/1312))
 - Fixed `fullWidth` size of `EuiComboBox`, a regression introduced in `4.7.0` ([#1314](https://github.com/elastic/eui/pull/1314))
+- Fixed error when passing empty string as `value` prop for `EuiSuperSelect` ([#1319](https://github.com/elastic/eui/pull/1319))
 
 ## [`5.1.0`](https://github.com/elastic/eui/tree/v5.1.0)
 

src-docs/src/views/super_select/super_select_complex.js

@@ -56,7 +56,7 @@ export default class extends Component {
     ];
 
     this.state = {
-      value: this.options[1].value,
+      value: '',
     };
   }
 

src/components/form/super_select/__snapshots__/super_select_control.test.js.snap

@@ -179,6 +179,65 @@ Array [
 ]
 `;
 
+exports[`EuiSuperSelectControl props empty value option is rendered 1`] = `
+Array [
+  <input
+    type="hidden"
+    value=""
+  />,
+  <div
+    class="euiFormControlLayout"
+  >
+    <div
+      class="euiFormControlLayout__childrenWrapper"
+    >
+      <span
+        class="euiScreenReaderOnly"
+        id="generated-id"
+      >
+        Select an option: , is selected
+      </span>
+      <button
+        aria-haspopup="true"
+        aria-labelledby="undefined generated-id"
+        class="euiSuperSelectControl"
+        role="option"
+        type="button"
+      />
+      <div
+        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+      >
+        <span
+          class="euiFormControlLayoutCustomIcon"
+        >
+          <svg
+            aria-hidden="true"
+            class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+            focusable="false"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+            xlink="http://www.w3.org/1999/xlink"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <defs>
+              <path
+                d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+                id="arrow_down-a"
+              />
+            </defs>
+            <use
+              fill-rule="nonzero"
+              href="#arrow_down-a"
+            />
+          </svg>
+        </span>
+      </div>
+    </div>
+  </div>,
+]
+`;
+
 exports[`EuiSuperSelectControl props fullWidth is rendered 1`] = `
 Array [
   <input

src/components/form/super_select/super_select_control.js

@@ -33,7 +33,7 @@ export const EuiSuperSelectControl = ({
   // React HTML input can not have both value and defaultValue properties.
   // https://reactjs.org/docs/uncontrolled-components.html#default-values
   let selectDefaultValue;
-  if (!value) {
+  if (value == null) {
     selectDefaultValue = defaultValue || '';
   }
 

src/components/form/super_select/super_select_control.test.js

@@ -73,5 +73,21 @@ describe('EuiSuperSelectControl', () => {
       expect(component)
         .toMatchSnapshot();
     });
+
+    test('empty value option is rendered', () => {
+      const component = render(
+        <EuiSuperSelectControl
+          options={[
+            { value: '1', inputDisplay: 'Option #1' },
+            { value: '2', inputDisplay: 'Option #2' }
+          ]}
+          value={''}
+          onChange={() => {}}
+        />
+      );
+
+      expect(component)
+        .toMatchSnapshot();
+    });
   });
 });