From 818820deb23a1ace3c08ec36a8075a9b97ad1969 Mon Sep 17 00:00:00 2001
From: Caroline Horn <549577+cchaos@users.noreply.github.com>
Date: Thu, 13 Sep 2018 17:10:33 -0400
Subject: [PATCH] Fix combobox list z-index (#1192)

---
 CHANGELOG.md                                                 | 1 +
 src/components/combo_box/_combo_box.scss                     | 1 -
 .../combo_box_options_list/_combo_box_options_list.scss      | 5 +++--
 src/global_styling/variables/_z_index.scss                   | 2 +-
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4b0c7800083..7b5f29e614f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@
 
 - Added background to `readOnly` inputs ([#1188](https://github.com/elastic/eui/pull/1188))
 - Fixed some modal default and responsive sizing ([#1188](https://github.com/elastic/eui/pull/1188))
+- Fixed z-index issue of `EuiComboBoxOptionsList` especiall inside modals ([#1192](https://github.com/elastic/eui/pull/1192))
 
 ## [`4.0.1`](https://github.com/elastic/eui/tree/v4.0.1)
 
diff --git a/src/components/combo_box/_combo_box.scss b/src/components/combo_box/_combo_box.scss
index ab5fc5cf07b..b2132d4e354 100644
--- a/src/components/combo_box/_combo_box.scss
+++ b/src/components/combo_box/_combo_box.scss
@@ -1,7 +1,6 @@
 .euiComboBox {
   @include euiFormControlSize(auto, $includeAlternates: true);
   position: relative;
-  z-index: $euiZComboBox + 1; // Ensures the dropdown's shadow is hidden behind the input on top
 
   /**
    * 1. Allow pills to truncate their text with an ellipsis.
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 7193b6da88d..ec5a3e57b25 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
@@ -18,10 +18,11 @@
 
   &.euiComboBoxOptionsList--bottom { /* 4 */
     @include euiBottomShadowMedium;
-    z-index: $euiZComboBox + 2;  // Ensures the dropdown's is above the combo box's shadow
   }
   &.euiComboBoxOptionsList--top { /* 4 */
-    @include euiBottomShadowFlat;
+    box-shadow:
+      0 -2px 4px -1px rgba($euiShadowColor, .2),
+      0 0px 2px 0 rgba($euiShadowColor, .2);
   }
 }
 
diff --git a/src/global_styling/variables/_z_index.scss b/src/global_styling/variables/_z_index.scss
index dcbac034763..56add59ca71 100644
--- a/src/global_styling/variables/_z_index.scss
+++ b/src/global_styling/variables/_z_index.scss
@@ -27,8 +27,8 @@ $euiZLevel9:          9000;
 $euiZContent:         $euiZLevel0;
 $euiZHeader:          $euiZLevel1;
 $euiZContentMenu:     $euiZLevel2;
-$euiZComboBox:        $euiZContentMenu - 1;
 $euiZNavigation:      $euiZLevel4;
 $euiZMask:            $euiZLevel6;
 $euiZModal:           $euiZLevel8;
+$euiZComboBox:        $euiZModal + 1;
 $euiZToastList:       $euiZLevel9;