From 2a7f5da0c9c0f4a8fedc2cec110a734600dcd387 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Mon, 6 Aug 2018 14:27:11 -0600
Subject: [PATCH 1/3] use switch over if...else

---
 .../form/super_select/super_select.js         | 42 +++++++++++--------
 1 file changed, 25 insertions(+), 17 deletions(-)

diff --git a/src/components/form/super_select/super_select.js b/src/components/form/super_select/super_select.js
index b73efe2747e..a92df04b555 100644
--- a/src/components/form/super_select/super_select.js
+++ b/src/components/form/super_select/super_select.js
@@ -87,23 +87,31 @@ export class EuiSuperSelect extends Component {
   }
 
   onItemKeyDown = e => {
-    if (e.keyCode === keyCodes.ESCAPE) {
-      // close the popover and prevent ancestors from handling
-      e.preventDefault();
-      e.stopPropagation();
-      this.closePopover();
-    } else if (e.keyCode === keyCodes.TAB) {
-      // no-op
-      e.preventDefault();
-      e.stopPropagation();
-    } else if (e.keyCode === keyCodes.UP) {
-      e.preventDefault();
-      e.stopPropagation();
-      this.shiftFocus(SHIFT_BACK);
-    } else if (e.keyCode === keyCodes.DOWN) {
-      e.preventDefault();
-      e.stopPropagation();
-      this.shiftFocus(SHIFT_FORWARD);
+    switch (e.keyCode) {
+      case keyCodes.ESCAPE:
+        // close the popover and prevent ancestors from handling
+        e.preventDefault();
+        e.stopPropagation();
+        this.closePopover();
+        break;
+
+      case keyCodes.TAB:
+        // no-op
+        e.preventDefault();
+        e.stopPropagation();
+        break;
+
+      case keyCodes.UP:
+        e.preventDefault();
+        e.stopPropagation();
+        this.shiftFocus(SHIFT_BACK);
+        break;
+
+      case keyCodes.DOWN:
+        e.preventDefault();
+        e.stopPropagation();
+        this.shiftFocus(SHIFT_FORWARD);
+        break;
     }
   }
 

From 70d08c3c8a9a6406506c419cc1aadc985cfbff76 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Wed, 8 Aug 2018 09:55:37 -0600
Subject: [PATCH 2/3] Convert the hidden <select> into an input[type=hidden]

---
 .../__snapshots__/super_select.test.js.snap   | 54 ++++----------
 .../super_select_control.test.js.snap         | 72 +++++++------------
 .../super_select/_super_select_control.scss   |  6 --
 .../form/super_select/super_select_control.js | 34 +--------
 4 files changed, 42 insertions(+), 124 deletions(-)

diff --git a/src/components/form/super_select/__snapshots__/super_select.test.js.snap b/src/components/form/super_select/__snapshots__/super_select.test.js.snap
index 568a5446a6d..e7f483a26a6 100644
--- a/src/components/form/super_select/__snapshots__/super_select.test.js.snap
+++ b/src/components/form/super_select/__snapshots__/super_select.test.js.snap
@@ -7,11 +7,9 @@ exports[`EuiSuperSelect is rendered 1`] = `
   <div
     class="euiPopover__anchor"
   >
-    <select
-      aria-hidden="true"
-      aria-label="aria-label"
-      class="euiSuperSelectControl__hiddenField"
-      data-test-subj="test subject string"
+    <input
+      type="hidden"
+      value=""
     />
     <div
       class="euiFormControlLayout"
@@ -76,17 +74,10 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
   <div
     class="euiPopover__anchor"
   >
-    <select
-      aria-hidden="true"
-      class="euiSuperSelectControl__hiddenField"
-    >
-      <option
-        value="1"
-      />
-      <option
-        value="2"
-      />
-    </select>
+    <input
+      type="hidden"
+      value=""
+    />
     <div
       class="euiFormControlLayout"
     >
@@ -148,18 +139,10 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
   <div
     class="euiPopover__anchor"
   >
-    <select
-      aria-hidden="true"
-      class="euiSuperSelectControl__hiddenField"
-    >
-      <option
-        selected=""
-        value="1"
-      />
-      <option
-        value="2"
-      />
-    </select>
+    <input
+      type="hidden"
+      value="1"
+    />
     <div
       class="euiFormControlLayout"
     >
@@ -223,17 +206,10 @@ exports[`EuiSuperSelect props options are rendered 1`] = `
   <div
     class="euiPopover__anchor"
   >
-    <select
-      aria-hidden="true"
-      class="euiSuperSelectControl__hiddenField"
-    >
-      <option
-        value="1"
-      />
-      <option
-        value="2"
-      />
-    </select>
+    <input
+      type="hidden"
+      value=""
+    />
     <div
       class="euiFormControlLayout"
     >
diff --git a/src/components/form/super_select/__snapshots__/super_select_control.test.js.snap b/src/components/form/super_select/__snapshots__/super_select_control.test.js.snap
index e0af24d19fe..5d31ed5ca0b 100644
--- a/src/components/form/super_select/__snapshots__/super_select_control.test.js.snap
+++ b/src/components/form/super_select/__snapshots__/super_select_control.test.js.snap
@@ -2,11 +2,9 @@
 
 exports[`EuiSuperSelectControl is rendered 1`] = `
 Array [
-  <select
-    aria-hidden="true"
-    aria-label="aria-label"
-    class="euiSuperSelectControl__hiddenField"
-    data-test-subj="test subject string"
+  <input
+    type="hidden"
+    value=""
   />,
   <div
     class="euiFormControlLayout"
@@ -65,9 +63,9 @@ Array [
 
 exports[`EuiSuperSelectControl props compressed is rendered 1`] = `
 Array [
-  <select
-    aria-hidden="true"
-    class="euiSuperSelectControl__hiddenField"
+  <input
+    type="hidden"
+    value=""
   />,
   <div
     class="euiFormControlLayout euiFormControlLayout--compressed"
@@ -124,17 +122,10 @@ Array [
 
 exports[`EuiSuperSelectControl props disabled options are rendered 1`] = `
 Array [
-  <select
-    aria-hidden="true"
-    class="euiSuperSelectControl__hiddenField"
-  >
-    <option
-      value="1"
-    />
-    <option
-      value="2"
-    />
-  </select>,
+  <input
+    type="hidden"
+    value=""
+  />,
   <div
     class="euiFormControlLayout"
   >
@@ -190,9 +181,9 @@ Array [
 
 exports[`EuiSuperSelectControl props fullWidth is rendered 1`] = `
 Array [
-  <select
-    aria-hidden="true"
-    class="euiSuperSelectControl__hiddenField"
+  <input
+    type="hidden"
+    value=""
   />,
   <div
     class="euiFormControlLayout euiFormControlLayout--fullWidth"
@@ -249,9 +240,9 @@ Array [
 
 exports[`EuiSuperSelectControl props isLoading is rendered 1`] = `
 Array [
-  <select
-    aria-hidden="true"
-    class="euiSuperSelectControl__hiddenField"
+  <input
+    type="hidden"
+    value=""
   />,
   <div
     class="euiFormControlLayout"
@@ -311,17 +302,10 @@ Array [
 
 exports[`EuiSuperSelectControl props options are rendered 1`] = `
 Array [
-  <select
-    aria-hidden="true"
-    class="euiSuperSelectControl__hiddenField"
-  >
-    <option
-      value="1"
-    />
-    <option
-      value="2"
-    />
-  </select>,
+  <input
+    type="hidden"
+    value=""
+  />,
   <div
     class="euiFormControlLayout"
   >
@@ -377,18 +361,10 @@ Array [
 
 exports[`EuiSuperSelectControl props value option is rendered 1`] = `
 Array [
-  <select
-    aria-hidden="true"
-    class="euiSuperSelectControl__hiddenField"
-  >
-    <option
-      selected=""
-      value="1"
-    />
-    <option
-      value="2"
-    />
-  </select>,
+  <input
+    type="hidden"
+    value="1"
+  />,
   <div
     class="euiFormControlLayout"
   >
diff --git a/src/components/form/super_select/_super_select_control.scss b/src/components/form/super_select/_super_select_control.scss
index b565591ee2b..b32d0e71cf6 100644
--- a/src/components/form/super_select/_super_select_control.scss
+++ b/src/components/form/super_select/_super_select_control.scss
@@ -28,9 +28,3 @@
     @include euiFormControlFocusStyle;
   }
 }
-
-.euiSuperSelectControl__hiddenField {
-  // This should be completely hidden even from screen readers,
-  // it's meant only to allow submission of a form.
-  display: none;
-}
diff --git a/src/components/form/super_select/super_select_control.js b/src/components/form/super_select/super_select_control.js
index dd58ad685f8..00bf41066cd 100644
--- a/src/components/form/super_select/super_select_control.js
+++ b/src/components/form/super_select/super_select_control.js
@@ -13,10 +13,8 @@ export const EuiSuperSelectControl = ({
   options,
   id,
   name,
-  inputRef,
   fullWidth,
   isLoading,
-  hasNoInitialSelection,
   defaultValue,
   compressed,
   value,
@@ -32,13 +30,6 @@ export const EuiSuperSelectControl = ({
     className
   );
 
-  let emptyOptionNode;
-  if (hasNoInitialSelection) {
-    emptyOptionNode = (
-      <option value="" disabled hidden style={{ display: 'none' }}>&nbsp;</option>
-    );
-  }
-
   // React HTML input can not have both value and defaultValue properties.
   // https://reactjs.org/docs/uncontrolled-components.html#default-values
   let selectDefaultValue;
@@ -61,25 +52,13 @@ export const EuiSuperSelectControl = ({
 
   return (
     <Fragment>
-      <select
+      <input
+        type="hidden"
         id={id}
         name={name}
-        className="euiSuperSelectControl__hiddenField"
-        ref={inputRef}
         defaultValue={selectDefaultValue}
         value={value}
-        aria-hidden="true"
-        {...rest}
-      >
-        {emptyOptionNode}
-        {options.map((option, index) => {
-          const {
-            text, // eslint-disable-line no-unused-vars
-            value,
-          } = option;
-          return <option value={value} key={index} />;
-        })}
-      </select>
+      />
 
       <EuiFormControlLayout
         icon={icon}
@@ -124,12 +103,6 @@ EuiSuperSelectControl.propTypes = {
   isInvalid: PropTypes.bool,
   fullWidth: PropTypes.bool,
   isLoading: PropTypes.bool,
-
-  /**
-   * Simulates no selection by creating an empty, selected, hidden first option
-   */
-  hasNoInitialSelection: PropTypes.bool,
-  inputRef: PropTypes.func,
   /**
    * when `true` creates a shorter height input
    */
@@ -140,6 +113,5 @@ EuiSuperSelectControl.defaultProps = {
   options: [],
   fullWidth: false,
   isLoading: false,
-  hasNoInitialSelection: false,
   compressed: false,
 };

From 5e8652729265a96c3c8b011e19c6c31b06b612e0 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Tue, 14 Aug 2018 11:11:15 -0600
Subject: [PATCH 3/3] Add example of disabled and data-test-subj attributes to
 a super select example

---
 .../src/views/super_select/super_select_basic.js |  4 ++++
 .../__snapshots__/super_select.test.js.snap      | 16 ++++------------
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/src-docs/src/views/super_select/super_select_basic.js b/src-docs/src/views/super_select/super_select_basic.js
index 725ca6bc432..1942e1a681b 100644
--- a/src-docs/src/views/super_select/super_select_basic.js
+++ b/src-docs/src/views/super_select/super_select_basic.js
@@ -19,6 +19,8 @@ export default class extends Component {
             Warning
           </EuiHealth>
         ),
+        'data-test-subj': 'option-warning',
+        disabled: true,
       },
       {
         value: 'minor',
@@ -27,6 +29,7 @@ export default class extends Component {
             Minor
           </EuiHealth>
         ),
+        'data-test-subj': 'option-minor',
       },
       {
         value: 'critical',
@@ -35,6 +38,7 @@ export default class extends Component {
             Critical
           </EuiHealth>
         ),
+        'data-test-subj': 'option-critical',
       },
     ];
 
diff --git a/src/components/form/super_select/__snapshots__/super_select.test.js.snap b/src/components/form/super_select/__snapshots__/super_select.test.js.snap
index e7f483a26a6..ff3a194686c 100644
--- a/src/components/form/super_select/__snapshots__/super_select.test.js.snap
+++ b/src/components/form/super_select/__snapshots__/super_select.test.js.snap
@@ -271,18 +271,10 @@ exports[`EuiSuperSelect props valueSelected is rendered 1`] = `
   <div
     class="euiPopover__anchor"
   >
-    <select
-      aria-hidden="true"
-      class="euiSuperSelectControl__hiddenField"
-    >
-      <option
-        selected=""
-        value="1"
-      />
-      <option
-        value="2"
-      />
-    </select>
+    <input
+      type="hidden"
+      value="1"
+    />
     <div
       class="euiFormControlLayout"
     >