From 4ac85a7fd9dff5cc5e5fbcecfcc18a6bf40ba495 Mon Sep 17 00:00:00 2001
From: Tolulope Adetula <31691737+Tooluloope@users.noreply.github.com>
Date: Mon, 24 May 2021 10:09:43 +0100
Subject: [PATCH] fix: add Layers to the dropdown

---
 .../src/components/designSystems/appsmith/Dropdown.tsx   | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/client/src/components/designSystems/appsmith/Dropdown.tsx b/app/client/src/components/designSystems/appsmith/Dropdown.tsx
index 646fad90e5..abb02d0608 100644
--- a/app/client/src/components/designSystems/appsmith/Dropdown.tsx
+++ b/app/client/src/components/designSystems/appsmith/Dropdown.tsx
@@ -4,6 +4,7 @@ import Select from "react-select";
 import { WrappedFieldInputProps } from "redux-form";
 import { theme } from "constants/DefaultTheme";
 import { SelectComponentsConfig } from "react-select/src/components";
+import { LayersContext } from "../../../constants/Layers";
 
 export type DropdownProps = {
   options: Array<{
@@ -50,15 +51,19 @@ const selectStyles = {
     padding: "5px",
   }),
   indicatorSeparator: () => ({}),
-  menuPortal: (styles: any) => ({ ...styles, zIndex: 1000 }),
 };
 
 export function BaseDropdown(props: DropdownProps) {
+  const layer = React.useContext(LayersContext);
   const { customSelectStyles, input } = props;
+  const menuPortalStyle = {
+    menuPortal: (styles: any) => ({ ...styles, zIndex: layer.max }),
+  };
+
   return (
     <Select
       menuPortalTarget={document.body}
-      styles={{ ...selectStyles, ...customSelectStyles }}
+      styles={{ ...selectStyles, ...customSelectStyles, ...menuPortalStyle }}
       {...input}
       isDisabled={props.isDisabled}
       isSearchable={props.isSearchable}