Compute EuiComboBox's listbox zIndex (elastic#3551)

* Updated EuiComboBox to match its combobox zIndex when rendering the listbox * changelog * Removed , now programmatically determining combobox options list zindex
phyolim · Jun 11, 2020 · e521e15 · e521e15
1 parent 49e3d65
commit e521e15
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,10 +11,12 @@
 - Added `display` prop to `EuiDataGridColumnSortingDraggable` to pass` displayAsText` prop correctly to the column sorting popover.([#3574](https://github.com/elastic/eui/pull/3574))
 - Fixed `EuiCodeBlockImpl` testenv mock pass-through of `data-test-subj` attribute ([#3560](https://github.com/elastic/eui/pull/3560))
 - Fixed DOM element creation issues in `EuiOverlayMask` by using lifecycle methods ([#3555](https://github.com/elastic/eui/pull/3555))
+- Fixed `EuiComboBox`'s options list `zIndex` positioning when nested in other `zIndex` contexts ([#3551](https://github.com/elastic/eui/pull/3551))
 
 **Breaking changes**
 
 - Changed `breadcrumb` TS type exported name from `Breadcrumb` to `EuiBreadcrumb` ([#3578](https://github.com/elastic/eui/pull/3578))
+- Removed `$euiZComboBox` SCSS variable (value was 8001) ([#3551](https://github.com/elastic/eui/pull/3551))
 
 **Theme: Amsterdam**
 

diff --git a/src-docs/src/views/flyout/flyout_complicated.js b/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 [selectedTabId, setSelectedTabId] = useState('1');
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const [superSelectvalue, setSuperSeelctValue] = useState('option_one');
+  const [isExpressionOpen, setIsExpressionOpen] = useState(false);
 
   const tabs = [
     {
@@ -218,6 +221,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>

diff --git a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap b/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: 100;"
   >
     <div
       class="euiComboBoxOptionsList__rowWrap"

diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx
@@ -58,6 +58,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>,
@@ -173,6 +174,7 @@ interface EuiComboBoxState<T> {
   isListOpen: boolean;
   listElement?: RefInstance<HTMLDivElement>;
   listPosition: EuiComboBoxOptionsListPosition;
+  listZIndex: number | undefined;
   matchingOptions: Array<EuiComboBoxOptionOption<T>>;
   searchValue: string;
   width: number;
@@ -203,6 +205,7 @@ export class EuiComboBox<T> extends Component<
     isListOpen: false,
     listElement: null,
     listPosition: 'bottom',
+    listZIndex: undefined,
     matchingOptions: getMatchingOptions<T>(
       this.props.options,
       this.props.selectedOptions,
@@ -257,6 +260,14 @@ 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;
   };
 
@@ -286,6 +297,7 @@ export class EuiComboBox<T> extends Component<
   closeList = () => {
     this.clearActiveOption();
     this.setState({
+      listZIndex: undefined,
       isListOpen: false,
     });
   };
@@ -964,6 +976,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}

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
@@ -7,8 +7,8 @@
  * 4. Using specificity to override panel shadow
  */
 .euiComboBoxOptionsList {
+  // z-index is programmatically added to the options list by JavaScript
   @include euiFormControlSize(auto, $includeAlternates: true); /* 3 */
-  z-index: $euiZComboBox;
   position: absolute; /* 2 */
   top: 0; /* 2 */
 

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
@@ -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}

diff --git a/src/global_styling/variables/_z_index.scss b/src/global_styling/variables/_z_index.scss
@@ -30,5 +30,4 @@ $euiZContentMenu:     $euiZLevel2;
 $euiZNavigation:      $euiZLevel4;
 $euiZMask:            $euiZLevel6;
 $euiZModal:           $euiZLevel8;
-$euiZComboBox:        $euiZModal + 1;
 $euiZToastList:       $euiZLevel9;