Compute EuiComboBox's listbox zIndex

CHANGELOG.md

@@ -5,6 +5,7 @@
 
 **Bug fixes**
 - Fixed `EuiKeyPadMenu` and `EuiKeyPadMenuItem` aria roles ([#3502](https://github.com/elastic/eui/pull/3502))
+- Fixed `EuiComboBox`'s options list `zIndex` positioning when nested in other `zIndex` contexts ([#3551](https://github.com/elastic/eui/pull/3551))
 
 ## [`24.1.0`](https://github.com/elastic/eui/tree/v24.1.0)
 

src-docs/src/views/flyout/flyout_complicated.js

@@ -4,6 +4,8 @@ import {
   EuiButton,
   EuiButtonEmpty,
   EuiCodeBlock,
+  EuiComboBox,
+  EuiExpression,
   EuiFlexGroup,
   EuiFlexItem,
   EuiFlyout,
@@ -26,6 +28,7 @@ export default () => {
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
   const [selectedTabId, setSelectedTabId] = useState('1');
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [isExpressionOpen, setIsExpressionOpen] = useState(false);
 
   const tabs = [
     {
@@ -163,6 +166,27 @@ export default () => {
             </EuiFormRow>
           </EuiForm>
           <EuiSpacer />
+          <EuiPopover
+            isOpen={isExpressionOpen}
+            closePopover={() => setIsExpressionOpen(false)}
+            ownFocus={true}
+            button={
+              <EuiExpression
+                description="expression"
+                value="configurations"
+                onClick={() => setIsExpressionOpen(!isExpressionOpen)}
+              />
+            }>
+            <EuiComboBox
+              selectedOptions={[{ label: 'Option one' }]}
+              options={[
+                { label: 'Option one' },
+                { label: 'Option two' },
+                { label: 'Option three' },
+              ]}
+            />
+          </EuiPopover>
+          <EuiSpacer />
           {flyoutContent}
           <EuiCodeBlock language="html">{htmlCode}</EuiCodeBlock>
         </EuiFlyoutBody>

src/components/combo_box/__snapshots__/combo_box.test.tsx.snap

@@ -311,6 +311,7 @@ exports[`props options list is rendered 1`] = `
   <div
     class="euiPanel euiComboBoxOptionsList euiComboBoxOptionsList--bottom"
     data-test-subj="comboBoxOptionsList alsoGetsAppliedToOptionsList-optionsList"
+    style="z-index: 0;"
   >
     <div
       class="euiComboBoxOptionsList__rowWrap"

src/components/combo_box/combo_box.tsx

@@ -63,6 +63,7 @@ import { EuiFilterSelectItem } from '../filter_group';
 import AutosizeInput from 'react-input-autosize';
 import { CommonProps } from '../common';
 import { EuiFormControlLayoutProps } from '../form';
+import { getElementZIndex } from '../../services/popover';
 
 type DrillProps<T> = Pick<
   EuiComboBoxOptionsListProps<T>,
@@ -178,6 +179,7 @@ interface EuiComboBoxState<T> {
   isListOpen: boolean;
   listElement?: RefInstance<HTMLDivElement>;
   listPosition: EuiComboBoxOptionsListPosition;
+  listZIndex: number | undefined;
   matchingOptions: Array<EuiComboBoxOptionOption<T>>;
   searchValue: string;
   width: number;
@@ -208,6 +210,7 @@ export class EuiComboBox<T> extends Component<
     isListOpen: false,
     listElement: null,
     listPosition: 'bottom',
+    listZIndex: undefined,
     matchingOptions: getMatchingOptions<T>(
       this.props.options,
       this.props.selectedOptions,
@@ -262,6 +265,15 @@ 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
+      const listZIndex = getElementZIndex(
+        this.comboBoxRefInstance,
+        document.body
+      );
+      this.setState({ listZIndex });
+    }
     this.listRefInstance = ref;
   };
 
@@ -291,6 +303,7 @@ export class EuiComboBox<T> extends Component<
   closeList = () => {
     this.clearActiveOption();
     this.setState({
+      listZIndex: undefined,
       isListOpen: false,
     });
   };
@@ -969,6 +982,7 @@ export class EuiComboBox<T> extends Component<
       optionsList = (
         <EuiPortal>
           <EuiComboBoxOptionsList
+            zIndex={this.state.listZIndex}
             activeOptionIndex={this.state.activeOptionIndex}
             areAllOptionsSelected={this.areAllOptionsSelected()}
             data-test-subj={optionsListDataTestSubj}

src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx

@@ -96,6 +96,7 @@ export type EuiComboBoxOptionsListProps<T> = CommonProps &
     width: number;
     singleSelection?: boolean | EuiComboBoxSingleSelectionShape;
     delimiter?: string;
+    zIndex?: number;
   };
 
 export class EuiComboBoxOptionsList<T> extends Component<
@@ -200,6 +201,8 @@ export class EuiComboBoxOptionsList<T> extends Component<
       updatePosition,
       width,
       delimiter,
+      zIndex,
+      style,
       ...rest
     } = this.props;
 
@@ -383,6 +386,7 @@ export class EuiComboBoxOptionsList<T> extends Component<
         className={classes}
         panelRef={this.listRefCallback}
         data-test-subj={`comboBoxOptionsList ${dataTestSubj}`}
+        style={{ ...style, zIndex: zIndex }}
         {...rest}>
         <div className="euiComboBoxOptionsList__rowWrap">
           {emptyState || optionsList}