From 0c199e9bd0b1c713a7f382e4dc9538d51ef23519 Mon Sep 17 00:00:00 2001
From: Cee Chen <549407+cee-chen@users.noreply.github.com>
Date: Wed, 15 Nov 2023 17:06:00 -0800
Subject: [PATCH] [EuiSuperSelect] Allow rendering falsy but not nullish values
 (#7362)

---
 changelogs/upcoming/7362.md                   |   4 +
 .../__snapshots__/super_select.test.tsx.snap  | 709 +++---------------
 .../form/super_select/super_select.test.tsx   | 246 +++---
 .../form/super_select/super_select.tsx        |  13 +-
 .../super_select_control.test.tsx             |  60 ++
 .../super_select/super_select_control.tsx     |  39 +-
 6 files changed, 333 insertions(+), 738 deletions(-)
 create mode 100644 changelogs/upcoming/7362.md

diff --git a/changelogs/upcoming/7362.md b/changelogs/upcoming/7362.md
new file mode 100644
index 00000000000..e2cd43d5f44
--- /dev/null
+++ b/changelogs/upcoming/7362.md
@@ -0,0 +1,4 @@
+**Bug fixes**
+
+- Fixed `EuiSuperSelect` to render options with falsy values (false, 0, and ''), but not nullish values (undefined or null)
+- Fixed `EuiSuperSelect`'s typing to allow non-string values (e.g., booleans or numbers)
diff --git a/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap b/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
index df8c091c2b0..8430331f15c 100644
--- a/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
+++ b/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
@@ -1,45 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiSuperSelect is rendered 1`] = `
-<div
-  class="euiPopover euiInputPopover euiSuperSelect emotion-euiPopover-block-EuiInputPopover"
->
-  <input
-    type="hidden"
-    value=""
-  />
-  <div
-    class="euiFormControlLayout"
-  >
-    <div
-      class="euiFormControlLayout__childrenWrapper"
-    >
-      <button
-        aria-haspopup="listbox"
-        aria-label="aria-label"
-        class="euiSuperSelectControl euiFormControlLayout--1icons testClass1 testClass2 emotion-euiTestCss"
-        data-test-subj="test subject string"
-        type="button"
-      />
-      <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
-      >
-        <span
-          class="euiFormControlLayoutCustomIcon"
-        >
-          <span
-            aria-hidden="true"
-            class="euiFormControlLayoutCustomIcon__icon"
-            data-euiicon-type="arrowDown"
-          />
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EuiSuperSelect props compressed is rendered 1`] = `
+exports[`EuiSuperSelect props compressed 1`] = `
 <div
   class="euiPopover euiInputPopover euiSuperSelect emotion-euiPopover-block-EuiInputPopover"
 >
@@ -55,47 +16,7 @@ exports[`EuiSuperSelect props compressed is rendered 1`] = `
     >
       <button
         aria-haspopup="listbox"
-        aria-label="aria-label"
-        class="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelectControl--compressed testClass1 testClass2 emotion-euiTestCss"
-        data-test-subj="test subject string"
-        type="button"
-      />
-      <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
-      >
-        <span
-          class="euiFormControlLayoutCustomIcon"
-        >
-          <span
-            aria-hidden="true"
-            class="euiFormControlLayoutCustomIcon__icon"
-            data-euiicon-type="arrowDown"
-          />
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
-<div
-  class="euiPopover euiInputPopover euiSuperSelect emotion-euiPopover-block-EuiInputPopover"
->
-  <input
-    type="hidden"
-    value=""
-  />
-  <div
-    class="euiFormControlLayout"
-  >
-    <div
-      class="euiFormControlLayout__childrenWrapper"
-    >
-      <button
-        aria-haspopup="listbox"
-        class="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelect--isOpen__button"
-        data-test-subj="superSelect"
+        class="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelectControl--compressed"
         type="button"
       />
       <div
@@ -113,99 +34,10 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
       </div>
     </div>
   </div>
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
-  <div
-    data-focus-lock-disabled="disabled"
-  >
-    <div
-      aria-live="assertive"
-      aria-modal="true"
-      class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-light-isAttached-bottom"
-      data-popover-panel="true"
-      role="dialog"
-      style="top: 0px; left: -22px; will-change: transform, opacity; z-index: 2000; inline-size: 0px;"
-    >
-      <div>
-        <div
-          data-focus-guard="true"
-          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-          tabindex="0"
-        />
-        <div
-          data-focus-lock-disabled="false"
-        >
-          <p
-            class="emotion-euiScreenReaderOnly"
-            id="euiSuperSelect__generated-id__screenreaderDescribeId"
-          >
-            You are in a form selector and must select a single option. Use the Up and Down arrow keys to navigate or Escape to close.
-          </p>
-          <div
-            aria-describedby="euiSuperSelect__generated-id__screenreaderDescribeId"
-            aria-label="Select listbox"
-            class="euiSuperSelect__listbox"
-            role="listbox"
-            tabindex="0"
-          >
-            <button
-              aria-selected="false"
-              class="euiContextMenuItem euiSuperSelect__item emotion-euiContextMenuItem-m-center"
-              id="1"
-              role="option"
-              type="button"
-            >
-              <span
-                class="euiContextMenu__icon emotion-euiContextMenu__icon"
-                color="inherit"
-                data-euiicon-type="empty"
-              />
-              <span
-                class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
-              >
-                Custom Display #1
-              </span>
-            </button>
-            <button
-              aria-selected="false"
-              class="euiContextMenuItem euiSuperSelect__item emotion-euiContextMenuItem-m-center"
-              id="2"
-              role="option"
-              type="button"
-            >
-              <span
-                class="euiContextMenu__icon emotion-euiContextMenu__icon"
-                color="inherit"
-                data-euiicon-type="empty"
-              />
-              <span
-                class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
-              >
-                Custom Display #2
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          data-focus-guard="true"
-          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-          tabindex="0"
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
 </div>
 `;
 
-exports[`EuiSuperSelect props fullWidth is rendered 1`] = `
+exports[`EuiSuperSelect props fullWidth 1`] = `
 <div
   class="euiPopover euiInputPopover euiSuperSelect emotion-euiPopover-block-EuiInputPopover"
 >
@@ -221,9 +53,7 @@ exports[`EuiSuperSelect props fullWidth is rendered 1`] = `
     >
       <button
         aria-haspopup="listbox"
-        aria-label="aria-label"
-        class="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelectControl--fullWidth testClass1 testClass2 emotion-euiTestCss"
-        data-test-subj="test subject string"
+        class="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelectControl--fullWidth"
         type="button"
       />
       <div
@@ -244,7 +74,7 @@ exports[`EuiSuperSelect props fullWidth is rendered 1`] = `
 </div>
 `;
 
-exports[`EuiSuperSelect props is rendered with a prepend and append 1`] = `
+exports[`EuiSuperSelect props prepend and append 1`] = `
 <div
   class="euiPopover euiInputPopover euiSuperSelect emotion-euiPopover-block-EuiInputPopover"
 >
@@ -265,9 +95,7 @@ exports[`EuiSuperSelect props is rendered with a prepend and append 1`] = `
     >
       <button
         aria-haspopup="listbox"
-        aria-label="aria-label"
-        class="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelectControl--inGroup testClass1 testClass2 emotion-euiTestCss"
-        data-test-subj="test subject string"
+        class="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelectControl--inGroup"
         type="button"
       />
       <div
@@ -293,467 +121,138 @@ exports[`EuiSuperSelect props is rendered with a prepend and append 1`] = `
 </div>
 `;
 
-exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
-<div
-  class="euiPopover euiInputPopover euiSuperSelect emotion-euiPopover-block-EuiInputPopover"
->
-  <input
-    type="hidden"
-    value="1"
-  />
-  <div
-    class="euiFormControlLayout"
-  >
+exports[`EuiSuperSelect renders 1`] = `
+<body>
+  <div>
     <div
-      class="euiFormControlLayout__childrenWrapper"
+      class="euiPopover euiInputPopover euiSuperSelect emotion-euiPopover-block-EuiInputPopover"
     >
-      <button
-        aria-haspopup="listbox"
-        class="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelect--isOpen__button"
-        data-test-subj="superSelect"
-        type="button"
-      >
-        Option #1
-      </button>
+      <input
+        type="hidden"
+        value=""
+      />
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayout"
       >
-        <span
-          class="euiFormControlLayoutCustomIcon"
-        >
-          <span
-            aria-hidden="true"
-            class="euiFormControlLayoutCustomIcon__icon"
-            data-euiicon-type="arrowDown"
-          />
-        </span>
-      </div>
-    </div>
-  </div>
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
-  <div
-    data-focus-lock-disabled="disabled"
-  >
-    <div
-      aria-live="assertive"
-      aria-modal="true"
-      class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-light-isAttached-bottom"
-      data-popover-panel="true"
-      role="dialog"
-      style="top: 0px; left: -22px; will-change: transform, opacity; z-index: 2000; inline-size: 0px;"
-    >
-      <div>
         <div
-          data-focus-guard="true"
-          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-          tabindex="0"
-        />
-        <div
-          data-focus-lock-disabled="false"
+          class="euiFormControlLayout__childrenWrapper"
         >
-          <p
-            class="emotion-euiScreenReaderOnly"
-            id="euiSuperSelect__generated-id__screenreaderDescribeId"
-          >
-            You are in a form selector and must select a single option. Use the Up and Down arrow keys to navigate or Escape to close.
-          </p>
+          <button
+            aria-haspopup="listbox"
+            aria-label="aria-label"
+            class="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelect--isOpen__button testClass1 testClass2 emotion-euiTestCss"
+            data-test-subj="test subject string"
+            type="button"
+          />
           <div
-            aria-activedescendant="1"
-            aria-describedby="euiSuperSelect__generated-id__screenreaderDescribeId"
-            aria-label="Select listbox"
-            class="euiSuperSelect__listbox"
-            role="listbox"
-            tabindex="0"
+            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
           >
-            <button
-              aria-selected="true"
-              class="euiContextMenuItem euiSuperSelect__item emotion-euiContextMenuItem-m-center-disabled"
-              disabled=""
-              id="1"
-              role="option"
-              type="button"
-            >
-              <span
-                class="euiContextMenu__icon emotion-euiContextMenu__icon"
-                color="inherit"
-                data-euiicon-type="check"
-              />
-              <span
-                class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
-              >
-                Option #1
-              </span>
-            </button>
-            <button
-              aria-selected="false"
-              class="euiContextMenuItem euiSuperSelect__item emotion-euiContextMenuItem-m-center"
-              data-test-subj="option two"
-              id="2"
-              role="option"
-              type="button"
+            <span
+              class="euiFormControlLayoutCustomIcon"
             >
               <span
-                class="euiContextMenu__icon emotion-euiContextMenu__icon"
-                color="inherit"
-                data-euiicon-type="empty"
+                aria-hidden="true"
+                class="euiFormControlLayoutCustomIcon__icon"
+                data-euiicon-type="arrowDown"
               />
-              <span
-                class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
-              >
-                Option #2
-              </span>
-            </button>
+            </span>
           </div>
         </div>
-        <div
-          data-focus-guard="true"
-          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-          tabindex="0"
-        />
       </div>
     </div>
   </div>
   <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
-</div>
-`;
-
-exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
-<div
-  class="euiPopover euiInputPopover euiSuperSelect emotion-euiPopover-block-EuiInputPopover"
->
-  <input
-    type="hidden"
-    value=""
-  />
-  <div
-    class="euiFormControlLayout"
+    data-euiportal="true"
   >
     <div
-      class="euiFormControlLayout__childrenWrapper"
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="-1"
+    />
+    <div
+      data-focus-lock-disabled="disabled"
     >
-      <button
-        aria-haspopup="listbox"
-        class="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelect--isOpen__button"
-        data-test-subj="superSelect"
-        type="button"
-      />
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+        aria-live="assertive"
+        aria-modal="true"
+        class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-light-isAttached-bottom"
+        data-popover-panel="true"
+        role="dialog"
+        style="top: 0px; left: -22px; will-change: transform, opacity; z-index: 2000; inline-size: 0px;"
       >
-        <span
-          class="euiFormControlLayoutCustomIcon"
-        >
-          <span
-            aria-hidden="true"
-            class="euiFormControlLayoutCustomIcon__icon"
-            data-euiicon-type="arrowDown"
-          />
-        </span>
-      </div>
-    </div>
-  </div>
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
-  <div
-    data-focus-lock-disabled="disabled"
-  >
-    <div
-      aria-live="assertive"
-      aria-modal="true"
-      class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-light-isAttached-bottom"
-      data-popover-panel="true"
-      role="dialog"
-      style="top: 0px; left: -22px; will-change: transform, opacity; z-index: 2000; inline-size: 0px;"
-    >
-      <div>
-        <div
-          data-focus-guard="true"
-          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-          tabindex="0"
-        />
-        <div
-          data-focus-lock-disabled="false"
-        >
-          <p
-            class="emotion-euiScreenReaderOnly"
-            id="euiSuperSelect__generated-id__screenreaderDescribeId"
-          >
-            You are in a form selector and must select a single option. Use the Up and Down arrow keys to navigate or Escape to close.
-          </p>
+        <div>
           <div
-            aria-describedby="euiSuperSelect__generated-id__screenreaderDescribeId"
-            aria-label="Select listbox"
-            class="euiSuperSelect__listbox"
-            role="listbox"
+            data-focus-guard="true"
+            style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
             tabindex="0"
-          >
-            <button
-              aria-selected="false"
-              class="euiContextMenuItem euiSuperSelect__item emotion-euiContextMenuItem-m-center"
-              id="1"
-              role="option"
-              type="button"
-            >
-              <span
-                class="euiContextMenu__icon emotion-euiContextMenu__icon"
-                color="inherit"
-                data-euiicon-type="empty"
-              />
-              <span
-                class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
-              >
-                Option #1
-              </span>
-            </button>
-            <button
-              aria-selected="false"
-              class="euiContextMenuItem euiSuperSelect__item emotion-euiContextMenuItem-m-center"
-              id="2"
-              role="option"
-              type="button"
-            >
-              <span
-                class="euiContextMenu__icon emotion-euiContextMenu__icon"
-                color="inherit"
-                data-euiicon-type="empty"
-              />
-              <span
-                class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
-              >
-                Option #2
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          data-focus-guard="true"
-          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-          tabindex="0"
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
-</div>
-`;
-
-exports[`EuiSuperSelect props renders popoverProps on the underlying EuiPopover 1`] = `
-<div
-  class="euiPopover euiInputPopover euiSuperSelect goes-on-outermost-wrapper emotion-euiPopover-block-EuiInputPopover"
->
-  <input
-    type="hidden"
-    value="2"
-  />
-  <div
-    class="euiFormControlLayout"
-  >
-    <div
-      class="euiFormControlLayout__childrenWrapper"
-    >
-      <button
-        aria-haspopup="listbox"
-        class="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelect--isOpen__button"
-        data-test-subj="superSelect"
-        type="button"
-      >
-        Option #2
-      </button>
-      <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
-      >
-        <span
-          class="euiFormControlLayoutCustomIcon"
-        >
-          <span
-            aria-hidden="true"
-            class="euiFormControlLayoutCustomIcon__icon"
-            data-euiicon-type="arrowDown"
           />
-        </span>
-      </div>
-    </div>
-  </div>
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
-  <div
-    data-focus-lock-disabled="disabled"
-  >
-    <div
-      aria-live="assertive"
-      aria-modal="true"
-      class="euiPanel euiPanel--plain euiPopover__panel goes-on-popover-panel emotion-euiPanel-grow-m-plain-euiPopover__panel-light-isAttached-bottom"
-      data-popover-panel="true"
-      role="dialog"
-      style="top: 0px; left: -22px; will-change: transform, opacity; z-index: 2000; inline-size: 0px;"
-    >
-      <div>
-        <div
-          data-focus-guard="true"
-          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-          tabindex="0"
-        />
-        <div
-          data-focus-lock-disabled="false"
-        >
-          <p
-            class="emotion-euiScreenReaderOnly"
-            id="euiSuperSelect__generated-id__screenreaderDescribeId"
-          >
-            You are in a form selector and must select a single option. Use the Up and Down arrow keys to navigate or Escape to close.
-          </p>
           <div
-            aria-activedescendant="2"
-            aria-describedby="euiSuperSelect__generated-id__screenreaderDescribeId"
-            aria-label="Select listbox"
-            class="euiSuperSelect__listbox"
-            role="listbox"
-            tabindex="0"
+            data-focus-lock-disabled="false"
           >
-            <button
-              aria-selected="false"
-              class="euiContextMenuItem euiSuperSelect__item emotion-euiContextMenuItem-m-center"
-              id="1"
-              role="option"
-              type="button"
+            <p
+              class="emotion-euiScreenReaderOnly"
+              id="euiSuperSelect__generated-id__screenreaderDescribeId"
             >
-              <span
-                class="euiContextMenu__icon emotion-euiContextMenu__icon"
-                color="inherit"
-                data-euiicon-type="empty"
-              />
-              <span
-                class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
-              >
-                Option #1
-              </span>
-            </button>
-            <button
-              aria-selected="true"
-              class="euiContextMenuItem euiSuperSelect__item emotion-euiContextMenuItem-m-center"
-              id="2"
-              role="option"
-              type="button"
+              You are in a form selector and must select a single option. Use the Up and Down arrow keys to navigate or Escape to close.
+            </p>
+            <div
+              aria-describedby="euiSuperSelect__generated-id__screenreaderDescribeId"
+              aria-label="Select listbox"
+              class="euiSuperSelect__listbox"
+              role="listbox"
+              tabindex="0"
             >
-              <span
-                class="euiContextMenu__icon emotion-euiContextMenu__icon"
-                color="inherit"
-                data-euiicon-type="check"
-              />
-              <span
-                class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
+              <button
+                aria-selected="false"
+                class="euiContextMenuItem euiSuperSelect__item emotion-euiContextMenuItem-m-center"
+                id="1"
+                role="option"
+                type="button"
+              >
+                <span
+                  class="euiContextMenu__icon emotion-euiContextMenu__icon"
+                  color="inherit"
+                  data-euiicon-type="empty"
+                />
+                <span
+                  class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
+                >
+                  Option #1
+                </span>
+              </button>
+              <button
+                aria-selected="false"
+                class="euiContextMenuItem euiSuperSelect__item emotion-euiContextMenuItem-m-center"
+                id="2"
+                role="option"
+                type="button"
               >
-                Option #2
-              </span>
-            </button>
+                <span
+                  class="euiContextMenu__icon emotion-euiContextMenu__icon"
+                  color="inherit"
+                  data-euiicon-type="empty"
+                />
+                <span
+                  class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
+                >
+                  Option #2
+                </span>
+              </button>
+            </div>
           </div>
-        </div>
-        <div
-          data-focus-guard="true"
-          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-          tabindex="0"
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
-</div>
-`;
-
-exports[`EuiSuperSelect props select component is rendered 1`] = `
-<div
-  class="euiPopover euiInputPopover euiSuperSelect emotion-euiPopover-block-EuiInputPopover"
->
-  <input
-    type="hidden"
-    value=""
-  />
-  <div
-    class="euiFormControlLayout"
-  >
-    <div
-      class="euiFormControlLayout__childrenWrapper"
-    >
-      <button
-        aria-haspopup="listbox"
-        class="euiSuperSelectControl euiFormControlLayout--1icons"
-        type="button"
-      />
-      <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
-      >
-        <span
-          class="euiFormControlLayoutCustomIcon"
-        >
-          <span
-            aria-hidden="true"
-            class="euiFormControlLayoutCustomIcon__icon"
-            data-euiicon-type="arrowDown"
+          <div
+            data-focus-guard="true"
+            style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+            tabindex="0"
           />
-        </span>
+        </div>
       </div>
     </div>
-  </div>
-</div>
-`;
-
-exports[`EuiSuperSelect props valueSelected is rendered 1`] = `
-<div
-  class="euiPopover euiInputPopover euiSuperSelect emotion-euiPopover-block-EuiInputPopover"
->
-  <input
-    type="hidden"
-    value="2"
-  />
-  <div
-    class="euiFormControlLayout"
-  >
     <div
-      class="euiFormControlLayout__childrenWrapper"
-    >
-      <button
-        aria-haspopup="listbox"
-        class="euiSuperSelectControl euiFormControlLayout--1icons"
-        type="button"
-      >
-        Option #2
-      </button>
-      <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
-      >
-        <span
-          class="euiFormControlLayoutCustomIcon"
-        >
-          <span
-            aria-hidden="true"
-            class="euiFormControlLayoutCustomIcon__icon"
-            data-euiicon-type="arrowDown"
-          />
-        </span>
-      </div>
-    </div>
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="-1"
+    />
   </div>
-</div>
+</body>
 `;
diff --git a/src/components/form/super_select/super_select.test.tsx b/src/components/form/super_select/super_select.test.tsx
index abab6dc8199..fe5954b6a80 100644
--- a/src/components/form/super_select/super_select.test.tsx
+++ b/src/components/form/super_select/super_select.test.tsx
@@ -7,186 +7,220 @@
  */
 
 import React from 'react';
-import { mount } from 'enzyme';
-import { requiredProps, takeMountedSnapshot } from '../../../test';
+import { fireEvent } from '@testing-library/react';
+import { render, screen, waitForEuiPopoverOpen } from '../../../test/rtl';
 import { shouldRenderCustomStyles } from '../../../test/internal';
-import { render } from '../../../test/rtl';
+import { requiredProps } from '../../../test';
 
 import { EuiSuperSelect } from './super_select';
 
-jest.mock('../../portal', () => ({
-  EuiPortal: ({ children }: any) => children,
-}));
-
 const options = [
   { value: '1', inputDisplay: 'Option #1' },
   { value: '2', inputDisplay: 'Option #2' },
 ];
 
 describe('EuiSuperSelect', () => {
-  shouldRenderCustomStyles(
-    <EuiSuperSelect options={options} onChange={() => {}} />,
-    { childProps: ['popoverProps'] }
-  );
+  shouldRenderCustomStyles(<EuiSuperSelect options={options} />, {
+    childProps: ['popoverProps'],
+  });
+
+  const openDropdown = () => {
+    fireEvent.click(screen.getByRole('button'));
+    waitForEuiPopoverOpen();
+  };
+
+  it('renders', () => {
+    const { baseElement } = render(
+      <EuiSuperSelect {...requiredProps} options={options} />
+    );
+    openDropdown();
+
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  it('does not render options with nullish values', () => {
+    // PropTypes complains about the null, but devs may ignore console errors
+    silenceErrors();
 
-  test('is rendered', () => {
-    const { container } = render(
+    const { queryByTestSubject } = render(
       <EuiSuperSelect
-        {...requiredProps}
-        options={options}
-        onChange={() => {}}
+        options={[
+          // @ts-expect-error - it's possible consumers won't be using TS
+          { value: null, 'data-test-subj': 'not-rendered' },
+          { value: '', 'data-test-subj': 'rendered' },
+        ]}
       />
     );
+    openDropdown();
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(queryByTestSubject('not-rendered')).not.toBeInTheDocument();
+    expect(queryByTestSubject('rendered')).toBeInTheDocument();
+
+    restoreErrors();
   });
 
   describe('props', () => {
-    test('fullWidth is rendered', () => {
-      const { container } = render(
-        <EuiSuperSelect
-          {...requiredProps}
-          options={options}
-          onChange={() => {}}
-          fullWidth
-        />
-      );
-
-      expect(container.firstChild).toMatchSnapshot();
-    });
-
-    test('compressed is rendered', () => {
+    test('fullWidth', () => {
       const { container } = render(
-        <EuiSuperSelect
-          {...requiredProps}
-          options={options}
-          onChange={() => {}}
-          compressed
-        />
+        <EuiSuperSelect options={options} fullWidth />
       );
 
       expect(container.firstChild).toMatchSnapshot();
     });
 
-    test('is rendered with a prepend and append', () => {
+    test('compressed', () => {
       const { container } = render(
-        <EuiSuperSelect
-          {...requiredProps}
-          options={options}
-          onChange={() => {}}
-          prepend="prepend"
-          append="append"
-        />
+        <EuiSuperSelect options={options} compressed />
       );
 
       expect(container.firstChild).toMatchSnapshot();
     });
 
-    test('select component is rendered', () => {
+    test('prepend and append', () => {
       const { container } = render(
-        <EuiSuperSelect
-          options={[
-            { value: '1', inputDisplay: 'Option #1' },
-            { value: '2', inputDisplay: 'Option #2' },
-          ]}
-          onChange={() => {}}
-        />
+        <EuiSuperSelect options={options} prepend="prepend" append="append" />
       );
 
       expect(container.firstChild).toMatchSnapshot();
     });
 
-    test('options are rendered when select is open', () => {
-      const component = mount(
-        <EuiSuperSelect
-          options={options}
-          onChange={() => {}}
-          data-test-subj="superSelect"
-        />
-      );
-
-      component.find('button[data-test-subj="superSelect"]').simulate('click');
-
-      expect(takeMountedSnapshot(component)).toMatchSnapshot();
-    });
-
-    test('valueSelected is rendered', () => {
-      const { container } = render(
-        <EuiSuperSelect
-          options={options}
-          valueOfSelected="2"
-          onChange={() => {}}
-        />
+    test('valueOfSelected', () => {
+      const { getByRole } = render(
+        <EuiSuperSelect options={options} valueOfSelected="2" />
       );
 
-      expect(container.firstChild).toMatchSnapshot();
+      expect(getByRole('button')).toHaveTextContent('Option #2');
     });
 
-    test('custom display is propagated to dropdown', () => {
-      const component = mount(
+    test('options.dropdownDisplay', () => {
+      const { queryByText } = render(
         <EuiSuperSelect
           options={[
             {
               value: '1',
-              inputDisplay: 'Option #1',
-              dropdownDisplay: 'Custom Display #1',
-            },
-            {
-              value: '2',
-              inputDisplay: 'Option #2',
-              dropdownDisplay: 'Custom Display #2',
+              inputDisplay: 'Input display test',
+              dropdownDisplay: 'Dropdown display test',
             },
           ]}
-          onChange={() => {}}
-          data-test-subj="superSelect"
+          valueOfSelected="1"
         />
       );
+      expect(queryByText('Input display test')).toBeInTheDocument();
+      expect(queryByText('Dropdown display test')).not.toBeInTheDocument();
 
-      component.find('button[data-test-subj="superSelect"]').simulate('click');
-
-      expect(takeMountedSnapshot(component)).toMatchSnapshot();
+      openDropdown();
+      expect(queryByText('Dropdown display test')).toBeInTheDocument();
     });
 
-    test('more props are propogated to each option', () => {
-      const component = mount(
+    test('options.rest', () => {
+      const { getByTestSubject } = render(
         <EuiSuperSelect
           options={[
-            { value: '1', inputDisplay: 'Option #1', disabled: true },
             {
               value: '2',
               inputDisplay: 'Option #2',
-              'data-test-subj': 'option two',
+              'data-test-subj': 'option2',
+              disabled: true,
             },
           ]}
-          valueOfSelected="1"
-          onChange={() => {}}
-          data-test-subj="superSelect"
         />
       );
+      openDropdown();
 
-      component.find('button[data-test-subj="superSelect"]').simulate('click');
-
-      expect(takeMountedSnapshot(component)).toMatchSnapshot();
+      expect(getByTestSubject('option2')).toBeDisabled();
     });
 
-    test('renders popoverProps on the underlying EuiPopover', () => {
-      const component = mount(
+    test('popoverProps', () => {
+      render(
         <EuiSuperSelect
           options={options}
-          valueOfSelected="2"
-          onChange={() => {}}
           popoverProps={{
             className: 'goes-on-outermost-wrapper',
             panelClassName: 'goes-on-popover-panel',
             repositionOnScroll: true,
           }}
-          data-test-subj="superSelect"
         />
       );
+      openDropdown();
+
+      expect(
+        document.querySelector('.goes-on-outermost-wrapper')
+      ).toBeInTheDocument();
+      expect(
+        document.querySelector('.goes-on-popover-panel')
+      ).toBeInTheDocument();
+    });
+
+    test('onChange', () => {
+      const onChange = jest.fn();
+
+      const { getByTestSubject } = render(
+        <EuiSuperSelect
+          options={[{ value: 'value1', 'data-test-subj': 'option1' }]}
+          onChange={onChange}
+        />
+      );
+      openDropdown();
+
+      fireEvent.click(getByTestSubject('option1'));
+      expect(onChange).toHaveBeenCalledWith('value1');
+    });
+  });
+
+  // No assertions or rendering on these tests - they're here to check that ts/lint passes or fails
+  describe('typing', () => {
+    // Silence expected propTypes errors
+    beforeAll(() => silenceErrors());
+    afterAll(() => restoreErrors());
+
+    it('defaults to string values', () => {
+      <EuiSuperSelect
+        options={[{ value: 'string' }]}
+        valueOfSelected="string"
+      />;
+    });
 
-      component.find('button[data-test-subj="superSelect"]').simulate('click');
+    it('allows customizing the value type via TS generic', () => {
+      <EuiSuperSelect<number> options={[{ value: 2 }]} valueOfSelected={2} />;
+      // @ts-expect-error should error since it expects a number
+      <EuiSuperSelect<number>
+        options={[{ value: 'should error' }]}
+        valueOfSelected="2"
+      />;
+
+      <EuiSuperSelect<boolean>
+        options={[{ value: true }]}
+        valueOfSelected={true}
+      />;
+      // @ts-expect-error should error since it expects a boolean
+      <EuiSuperSelect<number>
+        options={[{ value: 'should error' }]}
+        valueOfSelected="true"
+      />;
+
+      <EuiSuperSelect<string | boolean | number>
+        options={[{ value: '' }, { value: false }, { value: 0 }]}
+        valueOfSelected={false}
+      />;
+    });
 
-      expect(takeMountedSnapshot(component)).toMatchSnapshot();
+    it('errors on nullish values', () => {
+      // @ts-expect-error - 'null is not assignable to never'
+      <EuiSuperSelect options={[{ value: null }]} />;
+      // @ts-expect-error - 'value is missing'
+      <EuiSuperSelect<boolean> options={[{}]} />;
+      // @ts-expect-error - should not allow the generic to be nullable
+      <EuiSuperSelect<string | undefined> options={[{ value: undefined }]} />;
+      // @ts-expect-error - 'null is not assignable to undefined'
+      <EuiSuperSelect options={[]} valueOfSelected={null} />;
     });
   });
 });
+
+const originalConsoleError = console.error;
+const silenceErrors = () => {
+  console.error = () => {};
+};
+const restoreErrors = () => {
+  console.error = originalConsoleError;
+};
diff --git a/src/components/form/super_select/super_select.tsx b/src/components/form/super_select/super_select.tsx
index f6b7a9a1b2f..e96f9c9ace5 100644
--- a/src/components/form/super_select/super_select.tsx
+++ b/src/components/form/super_select/super_select.tsx
@@ -31,7 +31,7 @@ enum ShiftDirection {
   FORWARD = 'forward',
 }
 
-export type EuiSuperSelectProps<T extends string> = CommonProps &
+export type EuiSuperSelectProps<T = string> = CommonProps &
   Omit<
     EuiSuperSelectControlProps<T>,
     'onChange' | 'onClick' | 'onFocus' | 'onBlur' | 'options' | 'value'
@@ -44,7 +44,7 @@ export type EuiSuperSelectProps<T extends string> = CommonProps &
      */
     options: Array<EuiSuperSelectOption<T>>;
 
-    valueOfSelected?: T;
+    valueOfSelected?: NonNullable<T>;
 
     /**
      * Placeholder to display when the current selected value is empty.
@@ -91,7 +91,7 @@ export type EuiSuperSelectProps<T extends string> = CommonProps &
     popoverProps?: Partial<CommonProps & Omit<EuiInputPopoverProps, 'isOpen'>>;
   };
 
-export class EuiSuperSelect<T extends string> extends Component<
+export class EuiSuperSelect<T = string> extends Component<
   EuiSuperSelectProps<T>
 > {
   static defaultProps = {
@@ -309,6 +309,7 @@ export class EuiSuperSelect<T extends string> extends Component<
 
     const items = options.map((option, index) => {
       const { value, dropdownDisplay, inputDisplay, ...optionRest } = option;
+      if (value == null) return;
 
       return (
         <EuiContextMenuItem
@@ -320,7 +321,7 @@ export class EuiSuperSelect<T extends string> extends Component<
           layoutAlign={itemLayoutAlign}
           buttonRef={(node) => this.setItemNode(node, index)}
           role="option"
-          id={value}
+          id={String(value)}
           aria-selected={valueOfSelected === value}
           {...optionRest}
         >
@@ -355,7 +356,9 @@ export class EuiSuperSelect<T extends string> extends Component<
               aria-describedby={this.describedById}
               className="euiSuperSelect__listbox"
               role="listbox"
-              aria-activedescendant={valueOfSelected}
+              aria-activedescendant={
+                valueOfSelected != null ? String(valueOfSelected) : undefined
+              }
               tabIndex={0}
             >
               {items}
diff --git a/src/components/form/super_select/super_select_control.test.tsx b/src/components/form/super_select/super_select_control.test.tsx
index 304cad02399..0e17bfa48b7 100644
--- a/src/components/form/super_select/super_select_control.test.tsx
+++ b/src/components/form/super_select/super_select_control.test.tsx
@@ -122,4 +122,64 @@ describe('EuiSuperSelectControl', () => {
       expect(control).toHaveClass('euiSuperSelectControl--fullWidth');
     });
   });
+
+  describe('falsy values', () => {
+    describe('when value is falsy but not null/undefined', () => {
+      test('empty string', () => {
+        const { getByTestSubject, container } = render(
+          <EuiSuperSelectControl
+            data-test-subj="value"
+            options={[
+              { value: '', inputDisplay: 'Empty string' },
+              { value: 'test', inputDisplay: 'Test string' },
+            ]}
+            value={''}
+          />
+        );
+
+        expect(getByTestSubject('value')).toHaveTextContent('Empty string');
+        expect(container.querySelector('input')).toHaveValue('');
+      });
+
+      test('boolean', () => {
+        const { getByTestSubject, container } = render(
+          <EuiSuperSelectControl<boolean>
+            data-test-subj="value"
+            options={[
+              { value: true, inputDisplay: 'True' },
+              { value: false, inputDisplay: 'False' },
+            ]}
+            value={false}
+          />
+        );
+
+        expect(getByTestSubject('value')).toHaveTextContent('False');
+        expect(container.querySelector('input')).toHaveValue('false');
+      });
+    });
+
+    describe('when value is undefined', () => {
+      it('uses defaultValue', () => {
+        const { getByTestSubject, container } = render(
+          <EuiSuperSelectControl
+            data-test-subj="value"
+            options={[{ value: 'test', inputDisplay: 'Test string' }]}
+            defaultValue="test"
+          />
+        );
+
+        expect(getByTestSubject('value')).toHaveTextContent('Test string');
+        expect(container.querySelector('input')).toHaveValue('test');
+      });
+
+      it('renders empty if both value and defaultValue are undefined', () => {
+        const { getByTestSubject, container } = render(
+          <EuiSuperSelectControl data-test-subj="value" />
+        );
+
+        expect(getByTestSubject('value')).toHaveTextContent('');
+        expect(container.querySelector('input')).toHaveValue('');
+      });
+    });
+  });
 });
diff --git a/src/components/form/super_select/super_select_control.tsx b/src/components/form/super_select/super_select_control.tsx
index 7a39082ea5b..b2e111386a2 100644
--- a/src/components/form/super_select/super_select_control.tsx
+++ b/src/components/form/super_select/super_select_control.tsx
@@ -7,10 +7,10 @@
  */
 
 import React, {
-  Fragment,
   FunctionComponent,
   ButtonHTMLAttributes,
   ReactNode,
+  useMemo,
 } from 'react';
 import classNames from 'classnames';
 
@@ -24,7 +24,7 @@ import { getFormControlClassNameForIconCount } from '../form_control_layout/_num
 import { useFormContext } from '../eui_form_context';
 
 export interface EuiSuperSelectOption<T> {
-  value: T;
+  value: NonNullable<T>;
   inputDisplay?: ReactNode;
   dropdownDisplay?: ReactNode;
   disabled?: boolean;
@@ -73,13 +73,13 @@ export interface EuiSuperSelectControlProps<T>
   append?: EuiFormControlLayoutProps['append'];
 }
 
-export const EuiSuperSelectControl: <T extends string>(
+export const EuiSuperSelectControl: <T = string>(
   props: EuiSuperSelectControlProps<T>
 ) => ReturnType<FunctionComponent<EuiSuperSelectControlProps<T>>> = (props) => {
   const { defaultFullWidth } = useFormContext();
   const {
     className,
-    options = [],
+    options,
     id,
     name,
     fullWidth = defaultFullWidth,
@@ -114,31 +114,26 @@ export const EuiSuperSelectControl: <T extends string>(
     className
   );
 
-  // React HTML input can not have both value and defaultValue properties.
-  // https://reactjs.org/docs/uncontrolled-components.html#default-values
-  let selectDefaultValue;
-  if (value == null) {
-    selectDefaultValue = defaultValue || '';
-  }
-
-  let selectedValue;
-  if (value) {
-    const selectedOption = options.find((option) => option.value === value);
-    selectedValue = selectedOption
-      ? selectedOption.inputDisplay
-      : selectedValue;
-  }
+  const inputValue = value != null ? value : defaultValue;
+
+  const selectedValue = useMemo(() => {
+    if (inputValue != null) {
+      const selectedOption = options?.find(
+        (option) => option.value === inputValue
+      );
+      return selectedOption ? selectedOption.inputDisplay : undefined;
+    }
+  }, [inputValue, options]);
 
   const showPlaceholder = !!placeholder && !selectedValue;
 
   return (
-    <Fragment>
+    <>
       <input
         type="hidden"
         id={id}
         name={name}
-        defaultValue={selectDefaultValue}
-        value={value}
+        value={String(inputValue ?? '')}
         readOnly={readOnly}
       />
 
@@ -171,6 +166,6 @@ export const EuiSuperSelectControl: <T extends string>(
           )}
         </button>
       </EuiFormControlLayout>
-    </Fragment>
+    </>
   );
 };