Remove now-unnecessary z-index logic

- EuiPopover already handles this automatically under the hood + add regression test for this, since this had a issue filed in Kibana at some point (3551)
elastic · Oct 2, 2023 · 2d85f3c · 2d85f3c
1 parent e396a68
commit 2d85f3c
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 19 deletions.
diff --git a/src/components/combo_box/combo_box.spec.tsx b/src/components/combo_box/combo_box.spec.tsx
@@ -11,6 +11,9 @@
 /// <reference types="../../../cypress/support" />
 
 import React, { useState } from 'react';
+
+import { EuiFlyout, EuiPopover, EuiButton } from '../index';
+
 import { EuiComboBox } from './index';
 
 // CI doesn't have access to the Inter font, so we need to manually include it
@@ -276,4 +279,31 @@ describe('EuiComboBox', () => {
       cy.get('[data-test-subj=comboBoxOptionsList]').should('have.length', 1);
     });
   });
+
+  describe('z-index regression testing', () => {
+    it('displays the dropdown list above any inherited z-indices from parents', () => {
+      cy.mount(
+        <EuiFlyout onClose={() => {}} size="s">
+          <EuiPopover
+            isOpen={true}
+            anchorPosition="rightDown"
+            closePopover={() => {}}
+            button={<EuiButton>Toggle popover</EuiButton>}
+          >
+            <EuiComboBox options={[{ label: 'Test' }]} />
+          </EuiPopover>
+        </EuiFlyout>
+      );
+      cy.wait(500); // Let the flyout finish animating in
+      cy.get('[data-test-subj=comboBoxSearchInput]').click();
+
+      cy.get('[data-test-subj="comboBoxOptionsList"]')
+        .parents('[data-popover-panel]')
+        .should('have.css', 'z-index', '5000');
+
+      // Should be able to click the first option without an error
+      // about the popover or flyout blocking the click
+      cy.get('[role=option]').click('top');
+    });
+  });
 });
diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx
@@ -20,7 +20,6 @@ import React, {
 import classNames from 'classnames';
 
 import { htmlIdGenerator, keys } from '../../services';
-import { getElementZIndex } from '../../services/popover';
 import { CommonProps } from '../common';
 import { EuiInputPopover } from '../popover';
 import { EuiI18n } from '../i18n';
@@ -192,7 +191,6 @@ interface EuiComboBoxState<T> {
   hasFocus: boolean;
   isListOpen: boolean;
   listElement?: RefInstance<HTMLDivElement>;
-  listZIndex: number | undefined;
   matchingOptions: Array<EuiComboBoxOptionOption<T>>;
   searchValue: string;
   width: number;
@@ -222,7 +220,6 @@ export class EuiComboBox<T> extends Component<
     hasFocus: false,
     isListOpen: false,
     listElement: null,
-    listZIndex: undefined,
     matchingOptions: getMatchingOptions<T>({
       options: this.props.options,
       selectedOptions: this.props.selectedOptions,
@@ -260,14 +257,6 @@ export class EuiComboBox<T> extends Component<
 
   listRefInstance: RefInstance<HTMLDivElement> = null;
   listRefCallback: RefCallback<HTMLDivElement> = (ref) => {
-    if (this.comboBoxRefInstance) {
-      // find the zIndex of the combobox relative to the page body
-      // and use that to depth-position the list box
-      // adds an extra `100` to provide some defense around neighboring elements' positioning
-      const listZIndex =
-        getElementZIndex(this.comboBoxRefInstance, document.body) + 100;
-      this.setState({ listZIndex });
-    }
     this.listRefInstance = ref;
   };
 
@@ -301,10 +290,7 @@ export class EuiComboBox<T> extends Component<
     }
 
     this.clearActiveOption();
-    this.setState({
-      listZIndex: undefined,
-      isListOpen: false,
-    });
+    this.setState({ isListOpen: false });
   };
 
   incrementActiveOptionIndex = (amount: number) => {
@@ -914,7 +900,6 @@ export class EuiComboBox<T> extends Component<
         >
           {(listboxAriaLabel: string) => (
             <EuiComboBoxOptionsList
-              zIndex={this.state.listZIndex}
               activeOptionIndex={this.state.activeOptionIndex}
               areAllOptionsSelected={this.areAllOptionsSelected()}
               customOptionText={customOptionText}

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
@@ -87,7 +87,6 @@ export type EuiComboBoxOptionsListProps<T> = CommonProps & {
   width: number;
   singleSelection?: boolean | EuiComboBoxSingleSelectionShape;
   delimiter?: string;
-  zIndex?: number;
   truncationProps?: _EuiComboBoxProps<T>['truncationProps'];
 };
 
@@ -355,8 +354,6 @@ export class EuiComboBoxOptionsList<T> extends Component<
       singleSelection,
       width,
       delimiter,
-      zIndex,
-      style,
       truncationProps,
       listboxAriaLabel,
       ...rest