[EuiSelectable][EuiComboBox] Fix group label append not being clickable (#9678)

Author: mgadewoll

packages/eui/changelogs/upcoming/9678.md

@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed an issue in `EuiSelectable` and `EuiComboBox` where interactive content in group labels wasn't clickable due to overlapping content.

packages/eui/src/components/combo_box/combo_box.stories.tsx

@@ -17,6 +17,7 @@ import {
 import { LOKI_SELECTORS, lokiPlayDecorator } from '../../../.storybook/loki';
 import { EuiCode } from '../code';
 import { EuiFlexItem } from '../flex';
+import { EuiLink } from '../link';
 
 import { EuiComboBoxOptionMatcher } from './types';
 import { EuiComboBox, EuiComboBoxProps } from './combo_box';
@@ -244,7 +245,9 @@ export const Groups: Story = {
         isGroupLabelOption: true,
         prepend: '#prepend ',
         append: (
-          <EuiFlexItem css={{ alignItems: 'flex-end' }}>(append)</EuiFlexItem>
+          <EuiFlexItem css={{ alignItems: 'flex-end' }}>
+            <EuiLink>(append)</EuiLink>
+          </EuiFlexItem>
         ),
       },
       ...[...options].splice(3, options.length),
@@ -275,7 +278,9 @@ export const NestedOptionsGroups: Story = {
         isGroupLabelOption: true,
         prepend: '#prepend ',
         append: (
-          <EuiFlexItem css={{ alignItems: 'flex-end' }}>(append)</EuiFlexItem>
+          <EuiFlexItem css={{ alignItems: 'flex-end' }}>
+            <EuiLink>(append)</EuiLink>
+          </EuiFlexItem>
         ),
         options: [...options].splice(3, options.length),
       },

packages/eui/src/components/selectable/selectable.stories.tsx

@@ -22,6 +22,7 @@ import {
   EuiSelectableOnChangeEvent,
   EuiSelectableProps,
 } from './selectable';
+import { EuiLink } from '../link';
 
 const toolTipProps = {
   toolTipContent: 'This is a tooltip!',
@@ -157,7 +158,9 @@ export const WithSearchAndGroups: Story = {
         isGroupLabel: true,
         prepend: <EuiIcon type="warning" />,
         append: (
-          <EuiFlexItem css={{ alignItems: 'flex-end' }}>(append)</EuiFlexItem>
+          <EuiFlexItem css={{ alignItems: 'flex-end' }}>
+            <EuiLink>append</EuiLink>
+          </EuiFlexItem>
         ),
       },
       ...[...options].splice(4, options.length),

packages/eui/src/components/selectable/selectable_list/__snapshots__/selectable_list.test.tsx.snap

@@ -17,7 +17,7 @@ exports[`EuiSelectableListItem group labels handles updating aria attrs correctl
       tabindex="0"
     >
       <li
-        class="euiSelectableList__groupLabel css-1ku7zw3-groupLabel-EuiSelectableList"
+        class="euiSelectableList__groupLabel css-rtav68-groupLabel-EuiSelectableList"
         role="presentation"
       >
         Moons
@@ -73,7 +73,7 @@ exports[`EuiSelectableListItem group labels handles updating aria attrs correctl
         </span>
       </li>
       <li
-        class="euiSelectableList__groupLabel css-1ku7zw3-groupLabel-EuiSelectableList"
+        class="euiSelectableList__groupLabel css-rtav68-groupLabel-EuiSelectableList"
         role="presentation"
       >
         Planets
@@ -129,7 +129,7 @@ exports[`EuiSelectableListItem group labels handles updating aria attrs correctl
         </span>
       </li>
       <li
-        class="euiSelectableList__groupLabel css-1ku7zw3-groupLabel-EuiSelectableList"
+        class="euiSelectableList__groupLabel css-rtav68-groupLabel-EuiSelectableList"
         role="presentation"
       >
         Suns
@@ -212,7 +212,7 @@ exports[`EuiSelectableListItem group labels renders with correct aria-setsize an
           </span>
         </li>
         <li
-          class="euiSelectableList__groupLabel css-1ku7zw3-groupLabel-EuiSelectableList"
+          class="euiSelectableList__groupLabel css-rtav68-groupLabel-EuiSelectableList"
           role="presentation"
           style="position: absolute; left: 0px; top: 32px; height: 48px; width: 100%;"
         >
@@ -271,7 +271,7 @@ exports[`EuiSelectableListItem group labels renders with correct aria-setsize an
           </span>
         </li>
         <li
-          class="euiSelectableList__groupLabel css-1ku7zw3-groupLabel-EuiSelectableList"
+          class="euiSelectableList__groupLabel css-rtav68-groupLabel-EuiSelectableList"
           role="presentation"
           style="position: absolute; left: 0px; top: 144px; height: 48px; width: 100%;"
         >
@@ -330,7 +330,7 @@ exports[`EuiSelectableListItem group labels renders with correct aria-setsize an
           </span>
         </li>
         <li
-          class="euiSelectableList__groupLabel css-1ku7zw3-groupLabel-EuiSelectableList"
+          class="euiSelectableList__groupLabel css-rtav68-groupLabel-EuiSelectableList"
           role="presentation"
           style="position: absolute; left: 0px; top: 256px; height: 48px; width: 100%;"
         >

packages/eui/src/components/selectable/selectable_list/selectable_list.stories.tsx

@@ -21,6 +21,7 @@ import { EuiIcon } from '../../icon';
 import { EuiText } from '../../text';
 import { EuiBadge } from '../../badge';
 import { EuiSelectableOption } from '../selectable_option';
+import { EuiLink } from '../../link';
 
 import { EuiSelectableList, EuiSelectableListProps } from './selectable_list';
 
@@ -168,7 +169,9 @@ export const Groups: Story = {
         isGroupLabel: true,
         prepend: <EuiIcon type="warning" />,
         append: (
-          <EuiFlexItem css={{ alignItems: 'flex-end' }}>(append)</EuiFlexItem>
+          <EuiFlexItem css={{ alignItems: 'flex-end' }}>
+            <EuiLink>(append)</EuiLink>
+          </EuiFlexItem>
         ),
       },
       ...[...options].splice(4, options.length),

packages/eui/src/components/selectable/selectable_list/selectable_list.styles.ts

@@ -86,6 +86,7 @@ export const euiSelectableListGroupLabelStyles = (
         &::before {
           content: '';
           position: absolute;
+          z-index: -1;
           inset: 0;
           inset-block-start: ${spacingVertical};
           ${logicalCSS(