From 78f904f259f2aecedc9fdafc6565d59e37f08912 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 21 Sep 2023 09:51:39 -0700
Subject: [PATCH] =?UTF-8?q?Fix=20Kibana=20FTR=20shenanigans=20=F0=9F=98=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- turns out removing title was a terrible mistake

- also selenium gets big mad about the overlaid full text, might as well mitigate it now
---
 .../combo_box/__snapshots__/combo_box.test.tsx.snap   | 11 +++++++++++
 .../_combo_box_options_list.scss                      |  8 ++++++++
 .../combo_box_options_list/combo_box_options_list.tsx |  1 +
 3 files changed, 20 insertions(+)

diff --git a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
index d26f12d9876..33c33467ee4 100644
--- a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
+++ b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
@@ -547,6 +547,7 @@ exports[`props option.prepend & option.append renders in the options dropdown 1`
           id="generated-id__option-0"
           role="option"
           style="position: absolute; left: 0px; top: 0px; height: 29px; width: 100%;"
+          title="1"
           type="button"
         >
           <span
@@ -597,6 +598,7 @@ exports[`props option.prepend & option.append renders in the options dropdown 1`
           id="generated-id__option-1"
           role="option"
           style="position: absolute; left: 0px; top: 29px; height: 29px; width: 100%;"
+          title="2"
           type="button"
         >
           <span
@@ -729,6 +731,7 @@ exports[`props options list is rendered 1`] = `
             id="generated-id__option-0"
             role="option"
             style="position: absolute; left: 0px; top: 0px; height: 29px; width: 100%;"
+            title="Titan"
             type="button"
           >
             <span
@@ -770,6 +773,7 @@ exports[`props options list is rendered 1`] = `
             id="generated-id__option-1"
             role="option"
             style="position: absolute; left: 0px; top: 29px; height: 29px; width: 100%;"
+            title="Enceladus"
             type="button"
           >
             <span
@@ -811,6 +815,7 @@ exports[`props options list is rendered 1`] = `
             id="generated-id__option-2"
             role="option"
             style="position: absolute; left: 0px; top: 58px; height: 29px; width: 100%;"
+            title="Mimas"
             type="button"
           >
             <span
@@ -852,6 +857,7 @@ exports[`props options list is rendered 1`] = `
             id="generated-id__option-3"
             role="option"
             style="position: absolute; left: 0px; top: 87px; height: 29px; width: 100%;"
+            title="Dione"
             type="button"
           >
             <span
@@ -893,6 +899,7 @@ exports[`props options list is rendered 1`] = `
             id="generated-id__option-4"
             role="option"
             style="position: absolute; left: 0px; top: 116px; height: 29px; width: 100%;"
+            title="Iapetus"
             type="button"
           >
             <span
@@ -934,6 +941,7 @@ exports[`props options list is rendered 1`] = `
             id="generated-id__option-5"
             role="option"
             style="position: absolute; left: 0px; top: 145px; height: 29px; width: 100%;"
+            title="Phoebe"
             type="button"
           >
             <span
@@ -975,6 +983,7 @@ exports[`props options list is rendered 1`] = `
             id="generated-id__option-6"
             role="option"
             style="position: absolute; left: 0px; top: 174px; height: 29px; width: 100%;"
+            title="Rhea"
             type="button"
           >
             <span
@@ -1016,6 +1025,7 @@ exports[`props options list is rendered 1`] = `
             id="generated-id__option-7"
             role="option"
             style="position: absolute; left: 0px; top: 203px; height: 29px; width: 100%;"
+            title="Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
             type="button"
           >
             <span
@@ -1057,6 +1067,7 @@ exports[`props options list is rendered 1`] = `
             id="generated-id__option-8"
             role="option"
             style="position: absolute; left: 0px; top: 232px; height: 29px; width: 100%;"
+            title="Tethys"
             type="button"
           >
             <span
diff --git a/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss b/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss
index cc094368710..46da053fed4 100644
--- a/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss
+++ b/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss
@@ -10,6 +10,14 @@
   .euiFilterSelectItem__content {
     margin-block: 0 !important; // stylelint-disable-line declaration-no-important
   }
+
+  /* Kibana FTR affordance - without this, Selenium complains about the overlaid
+     text intercepting the button click. Since `title` is always present, and
+     users can't highlight or copy combobox options anyway, we might as well
+     disable clicks on text */
+  .euiTextTruncate {
+    pointer-events: none;
+  }
 }
 
 .euiComboBoxOptionsList__empty {
diff --git a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
index c554226e268..470d0e61e2c 100644
--- a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
+++ b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
@@ -275,6 +275,7 @@ export class EuiComboBoxOptionsList<T> extends Component<
         checked={checked}
         showIcons={singleSelection ? true : false}
         id={rootId(`_option-${index}`)}
+        title={label}
         {...rest}
       >
         <span className="euiComboBoxOption__contentWrapper">