From 829742b2399b2fb9e20054a2532c052d09f7f016 Mon Sep 17 00:00:00 2001
From: Tolulope Adetula <31691737+Tooluloope@users.noreply.github.com>
Date: Thu, 6 May 2021 08:18:39 +0100
Subject: [PATCH 01/11] fix: reduced portal zindex

---
 app/client/src/index.css               | 2 +-
 app/client/src/widgets/ModalWidget.tsx | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/client/src/index.css b/app/client/src/index.css
index 2ce8e9f6b7..9324c48787 100755
--- a/app/client/src/index.css
+++ b/app/client/src/index.css
@@ -60,7 +60,7 @@ div.bp3-popover-arrow {
 }
 
 .bp3-portal {
-  z-index: 10;
+  z-index: 2;
 }
 
 .bp3-popover .bp3-input {
diff --git a/app/client/src/widgets/ModalWidget.tsx b/app/client/src/widgets/ModalWidget.tsx
index 07cada407e..81b89bfffe 100644
--- a/app/client/src/widgets/ModalWidget.tsx
+++ b/app/client/src/widgets/ModalWidget.tsx
@@ -124,6 +124,7 @@ export class ModalWidget extends BaseWidget<ModalWidgetProps, WidgetState> {
         onClose={this.closeModal}
         scrollContents={!!this.props.shouldScrollContents}
         width={this.getModalWidth()}
+        zIndex={3}
       >
         {content}
       </ModalComponent>

From 00669d9b8e2d43319e241a0378a5ba7ca1dbd45f Mon Sep 17 00:00:00 2001
From: Tolulope Adetula <31691737+Tooluloope@users.noreply.github.com>
Date: Fri, 7 May 2021 08:35:00 +0100
Subject: [PATCH 02/11] fix: move dropdown options to portal

---
 app/client/src/components/designSystems/appsmith/Dropdown.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/client/src/components/designSystems/appsmith/Dropdown.tsx b/app/client/src/components/designSystems/appsmith/Dropdown.tsx
index ecade3fff9..4a4dc958c0 100644
--- a/app/client/src/components/designSystems/appsmith/Dropdown.tsx
+++ b/app/client/src/components/designSystems/appsmith/Dropdown.tsx
@@ -50,12 +50,14 @@ const selectStyles = {
     padding: "5px",
   }),
   indicatorSeparator: () => ({}),
+  menuPortal: (styles: any) => ({ ...styles, zIndex: 1000 }),
 };
 
 export function BaseDropdown(props: DropdownProps) {
   const { input, customSelectStyles } = props;
   return (
     <Select
+      menuPortalTarget={document.body}
       styles={{ ...selectStyles, ...customSelectStyles }}
       {...input}
       isDisabled={props.isDisabled}

From 8c484798de7339ffd1fe95e6891a2dc7227d2557 Mon Sep 17 00:00:00 2001
From: Tolulope Adetula <31691737+Tooluloope@users.noreply.github.com>
Date: Mon, 10 May 2021 20:59:16 +0100
Subject: [PATCH 03/11] fix: overlay covering widget explorer

---
 .../src/components/designSystems/blueprint/ModalComponent.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/client/src/components/designSystems/blueprint/ModalComponent.tsx b/app/client/src/components/designSystems/blueprint/ModalComponent.tsx
index e287d0662e..1d65f74e4a 100644
--- a/app/client/src/components/designSystems/blueprint/ModalComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/ModalComponent.tsx
@@ -15,7 +15,7 @@ const Container = styled.div<{
       .${Classes.OVERLAY_BACKDROP} {
         z-index: ${(props) => props.zIndex || 2 - 1};
       }
-      position: fixed;
+      position: absolute;
       top: 0;
       right: 0;
       bottom: 0;

From 523972e191d165181e84ae48c4ce310395decf8a Mon Sep 17 00:00:00 2001
From: Tolulope Adetula <31691737+Tooluloope@users.noreply.github.com>
Date: Wed, 19 May 2021 08:20:00 +0100
Subject: [PATCH 04/11] Fix: modal and Dropdown

---
 .../blueprint/DropdownComponent.tsx           | 18 ++++-
 .../blueprint/ModalComponent.tsx              | 73 +++++++++++--------
 app/client/src/index.css                      | 11 ++-
 app/client/src/widgets/ModalWidget.tsx        |  1 -
 4 files changed, 71 insertions(+), 32 deletions(-)

diff --git a/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx b/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
index 2434d3df7a..532fec11d9 100644
--- a/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
@@ -230,6 +230,18 @@ const StyledMultiDropDown = styled(MultiDropDown)<{
 `;
 
 class DropDownComponent extends React.Component<DropDownComponentProps> {
+  private _menu = React.createRef<HTMLDivElement>();
+
+  isModalWidgetParent = () => {
+    console.log(
+      "----------",
+      Boolean(this._menu.current?.closest(".bp3-modal-widget")),
+    );
+    if (Boolean(this._menu.current?.closest(".bp3-modal-widget"))) {
+      return document.querySelector(".bp3-modal-widget") as HTMLElement;
+    }
+    return document.querySelector(".appsmith_widget_0") as HTMLElement;
+  };
   render() {
     const { options, selectedIndexArr } = this.props;
     const selectedItems = selectedIndexArr
@@ -238,7 +250,10 @@ class DropDownComponent extends React.Component<DropDownComponentProps> {
     const hideCloseButtonIndex = -1;
 
     return (
-      <DropdownContainer>
+      <DropdownContainer
+        className="abcdef"
+        ref={this._menu as React.RefObject<HTMLDivElement>}
+      >
         <DropdownStyles />
         <StyledControlGroup
           fill
@@ -299,6 +314,7 @@ class DropDownComponent extends React.Component<DropDownComponentProps> {
               popoverProps={{
                 minimal: true,
                 usePortal: true,
+                portalContainer: this.isModalWidgetParent(),
                 modifiers: {
                   preventOverflow: {
                     enabled: false,
diff --git a/app/client/src/components/designSystems/blueprint/ModalComponent.tsx b/app/client/src/components/designSystems/blueprint/ModalComponent.tsx
index 63a22af886..4ff66ba227 100644
--- a/app/client/src/components/designSystems/blueprint/ModalComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/ModalComponent.tsx
@@ -16,7 +16,7 @@ const Container = styled.div<{
       .${Classes.OVERLAY_BACKDROP} {
         z-index: ${(props) => props.zIndex || 2 - 1};
       }
-      position: absolute;
+      position: fixed;
       top: 0;
       right: 0;
       bottom: 0;
@@ -75,37 +75,52 @@ export function ModalComponent(props: ModalComponentProps) {
       modalContentRef.current?.scrollTo({ top: 0, behavior: "smooth" });
     }
   }, [props.scrollContents]);
+  console.log(props.height, props.width, props.left, props.top);
   return (
-    <Container
-      height={props.height}
-      left={props.left}
-      top={props.top}
-      width={props.width}
-      zIndex={props.zIndex !== undefined ? props.zIndex : Layers.modalWidget}
+    <Overlay
+      canEscapeKeyClose={false}
+      canOutsideClickClose={false}
+      enforceFocus={false}
+      hasBackdrop
+      isOpen={props.isOpen}
+      onClose={props.onClose}
+      portalClassName="bp3-modal-widget"
+      portalContainer={
+        document.querySelector(".t--canvas-artboard") as HTMLElement
+      }
+      usePortal
     >
-      <Overlay
-        canEscapeKeyClose={props.canEscapeKeyClose}
-        canOutsideClickClose={props.canOutsideClickClose}
-        enforceFocus={false}
-        hasBackdrop={
-          props.hasBackDrop !== undefined ? !!props.hasBackDrop : true
-        }
-        isOpen={props.isOpen}
-        onClose={props.onClose}
-        usePortal={false}
+      <Container
+        height={props.height}
+        left={props.left}
+        top={props.top}
+        width={props.width}
+        zIndex={props.zIndex !== undefined ? props.zIndex : Layers.modalWidget}
       >
-        <div>
-          <Content
-            className={`${getCanvasClassName()} ${props.className}`}
-            height={props.height}
-            ref={modalContentRef}
-            scroll={props.scrollContents}
-          >
-            {props.children}
-          </Content>
-        </div>
-      </Overlay>
-    </Container>
+        <Overlay
+          canEscapeKeyClose={props.canEscapeKeyClose}
+          canOutsideClickClose={props.canOutsideClickClose}
+          enforceFocus={false}
+          hasBackdrop={
+            props.hasBackDrop !== undefined ? !!props.hasBackDrop : true
+          }
+          isOpen={props.isOpen}
+          onClose={props.onClose}
+          usePortal={false}
+        >
+          <div>
+            <Content
+              className={`${getCanvasClassName()} ${props.className}`}
+              height={props.height}
+              ref={modalContentRef}
+              scroll={props.scrollContents}
+            >
+              {props.children}
+            </Content>
+          </div>
+        </Overlay>
+      </Container>
+    </Overlay>
   );
 }
 
diff --git a/app/client/src/index.css b/app/client/src/index.css
index 9324c48787..f5e7ee8d74 100755
--- a/app/client/src/index.css
+++ b/app/client/src/index.css
@@ -60,7 +60,7 @@ div.bp3-popover-arrow {
 }
 
 .bp3-portal {
-  z-index: 2;
+  z-index: 10;
 }
 
 .bp3-popover .bp3-input {
@@ -102,3 +102,12 @@ div.bp3-popover-arrow {
   background: white !important;
   border-bottom: 1px solid #E7E7E7 !important;
 }
+/* making both the Modal layer and the Dropdown layer */
+.bp3-modal-widget, .appsmith_widget_0 > .bp3-portal {
+  z-index: 2 !important;
+}
+
+/* Portals on the Modal widget */
+.bp3-modal-widget .bp3-portal {
+  z-index: 21 !important;
+}
diff --git a/app/client/src/widgets/ModalWidget.tsx b/app/client/src/widgets/ModalWidget.tsx
index 5e793c4445..a740c9eaec 100644
--- a/app/client/src/widgets/ModalWidget.tsx
+++ b/app/client/src/widgets/ModalWidget.tsx
@@ -126,7 +126,6 @@ export class ModalWidget extends BaseWidget<ModalWidgetProps, WidgetState> {
         onClose={this.closeModal}
         scrollContents={!!this.props.shouldScrollContents}
         width={this.getModalWidth()}
-        zIndex={3}
       >
         {content}
       </ModalComponent>

From 4e890dce86165ee8b10cf7b17d961ba939cc992d Mon Sep 17 00:00:00 2001
From: Tolulope Adetula <31691737+Tooluloope@users.noreply.github.com>
Date: Wed, 19 May 2021 08:21:00 +0100
Subject: [PATCH 05/11] fix: remove unnecessary className

---
 .../components/designSystems/blueprint/DropdownComponent.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx b/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
index 532fec11d9..6ee553e82b 100644
--- a/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
@@ -250,10 +250,7 @@ class DropDownComponent extends React.Component<DropDownComponentProps> {
     const hideCloseButtonIndex = -1;
 
     return (
-      <DropdownContainer
-        className="abcdef"
-        ref={this._menu as React.RefObject<HTMLDivElement>}
-      >
+      <DropdownContainer ref={this._menu as React.RefObject<HTMLDivElement>}>
         <DropdownStyles />
         <StyledControlGroup
           fill

From 4c3834828a1822ba3eb7ab8d1a82838b50909da0 Mon Sep 17 00:00:00 2001
From: Tolulope Adetula <31691737+Tooluloope@users.noreply.github.com>
Date: Wed, 19 May 2021 08:21:25 +0100
Subject: [PATCH 06/11] fix: remove console statement

---
 .../components/designSystems/blueprint/DropdownComponent.tsx  | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx b/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
index 6ee553e82b..8317910ded 100644
--- a/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
@@ -233,10 +233,6 @@ class DropDownComponent extends React.Component<DropDownComponentProps> {
   private _menu = React.createRef<HTMLDivElement>();
 
   isModalWidgetParent = () => {
-    console.log(
-      "----------",
-      Boolean(this._menu.current?.closest(".bp3-modal-widget")),
-    );
     if (Boolean(this._menu.current?.closest(".bp3-modal-widget"))) {
       return document.querySelector(".bp3-modal-widget") as HTMLElement;
     }

From afcf7d793a80d25d1d179933e2c8449bc2d281f3 Mon Sep 17 00:00:00 2001
From: Tolulope Adetula <31691737+Tooluloope@users.noreply.github.com>
Date: Thu, 20 May 2021 06:04:52 +0100
Subject: [PATCH 07/11] fix: PR comments

---
 .../designSystems/blueprint/DropdownComponent.tsx     | 11 ++++-------
 .../designSystems/blueprint/ModalComponent.tsx        |  4 ----
 app/client/src/widgets/DropdownWidget.tsx             |  7 +++++++
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx b/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
index 8317910ded..62c236e9cb 100644
--- a/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
@@ -232,12 +232,6 @@ const StyledMultiDropDown = styled(MultiDropDown)<{
 class DropDownComponent extends React.Component<DropDownComponentProps> {
   private _menu = React.createRef<HTMLDivElement>();
 
-  isModalWidgetParent = () => {
-    if (Boolean(this._menu.current?.closest(".bp3-modal-widget"))) {
-      return document.querySelector(".bp3-modal-widget") as HTMLElement;
-    }
-    return document.querySelector(".appsmith_widget_0") as HTMLElement;
-  };
   render() {
     const { options, selectedIndexArr } = this.props;
     const selectedItems = selectedIndexArr
@@ -307,7 +301,9 @@ class DropDownComponent extends React.Component<DropDownComponentProps> {
               popoverProps={{
                 minimal: true,
                 usePortal: true,
-                portalContainer: this.isModalWidgetParent(),
+                portalContainer: this.props.getDropdownPosition(
+                  this._menu.current,
+                ),
                 modifiers: {
                   preventOverflow: {
                     enabled: false,
@@ -434,6 +430,7 @@ export interface DropDownComponentProps extends ComponentProps {
   isFilterable: boolean;
   width: number;
   height: number;
+  getDropdownPosition: (node: HTMLDivElement | null) => HTMLElement;
 }
 
 export default DropDownComponent;
diff --git a/app/client/src/components/designSystems/blueprint/ModalComponent.tsx b/app/client/src/components/designSystems/blueprint/ModalComponent.tsx
index 4ff66ba227..b308a7f00e 100644
--- a/app/client/src/components/designSystems/blueprint/ModalComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/ModalComponent.tsx
@@ -75,7 +75,6 @@ export function ModalComponent(props: ModalComponentProps) {
       modalContentRef.current?.scrollTo({ top: 0, behavior: "smooth" });
     }
   }, [props.scrollContents]);
-  console.log(props.height, props.width, props.left, props.top);
   return (
     <Overlay
       canEscapeKeyClose={false}
@@ -85,9 +84,6 @@ export function ModalComponent(props: ModalComponentProps) {
       isOpen={props.isOpen}
       onClose={props.onClose}
       portalClassName="bp3-modal-widget"
-      portalContainer={
-        document.querySelector(".t--canvas-artboard") as HTMLElement
-      }
       usePortal
     >
       <Container
diff --git a/app/client/src/widgets/DropdownWidget.tsx b/app/client/src/widgets/DropdownWidget.tsx
index e0e4dd8782..5abc5a4a40 100644
--- a/app/client/src/widgets/DropdownWidget.tsx
+++ b/app/client/src/widgets/DropdownWidget.tsx
@@ -147,6 +147,12 @@ class DropdownWidget extends BaseWidget<DropdownWidgetProps, WidgetState> {
       ? this.props.selectedOptionValueArr
       : [];
   }
+  getDropdownPosition = (node: HTMLDivElement | null) => {
+    if (Boolean(node?.closest(".bp3-modal-widget"))) {
+      return document.querySelector(".bp3-modal-widget") as HTMLElement;
+    }
+    return document.querySelector(".appsmith_widget_0") as HTMLElement;
+  };
 
   getPageView() {
     const options = this.props.options || [];
@@ -158,6 +164,7 @@ class DropdownWidget extends BaseWidget<DropdownWidgetProps, WidgetState> {
     return (
       <DropDownComponent
         disabled={this.props.isDisabled}
+        getDropdownPosition={this.getDropdownPosition}
         height={componentHeight}
         isFilterable={this.props.isFilterable}
         isLoading={this.props.isLoading}

From b2a86d7e11700c2b25c74180aaf6d26b89c80faa Mon Sep 17 00:00:00 2001
From: Tolulope Adetula <31691737+Tooluloope@users.noreply.github.com>
Date: Mon, 24 May 2021 06:52:49 +0100
Subject: [PATCH 08/11] fix: failing modal test

---
 .../src/components/designSystems/blueprint/ModalComponent.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/client/src/components/designSystems/blueprint/ModalComponent.tsx b/app/client/src/components/designSystems/blueprint/ModalComponent.tsx
index 857b495891..9b5a1f5928 100644
--- a/app/client/src/components/designSystems/blueprint/ModalComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/ModalComponent.tsx
@@ -86,7 +86,7 @@ export function ModalComponent(props: ModalComponentProps) {
       canEscapeKeyClose={false}
       canOutsideClickClose={false}
       enforceFocus={false}
-      hasBackdrop
+      hasBackdrop={false}
       isOpen={props.isOpen}
       onClose={props.onClose}
       portalClassName="bp3-modal-widget"

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 09/11] 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}

From b78c6204b9f23fe5cce0e053abea4230a99d9733 Mon Sep 17 00:00:00 2001
From: Tolulope Adetula <31691737+Tooluloope@users.noreply.github.com>
Date: Wed, 26 May 2021 14:56:40 +0100
Subject: [PATCH 10/11] fix: Add zIndex Layers of Dropdown and Modal

---
 app/client/src/constants/Layers.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/app/client/src/constants/Layers.tsx b/app/client/src/constants/Layers.tsx
index 3a4d22a132..b2438307f4 100644
--- a/app/client/src/constants/Layers.tsx
+++ b/app/client/src/constants/Layers.tsx
@@ -11,6 +11,7 @@ export enum Indices {
   Layer7,
   Layer8,
   Layer9,
+  Layer21 = 21,
   LayerMax = 99999,
 }
 
@@ -22,6 +23,10 @@ export const Layers = {
   positionedWidget: Indices.Layer1,
   // Modal needs to higher than other widgets.
   modalWidget: Indices.Layer2,
+  // Dropdown portaled to the canvas
+  dropdownWidget: Indices.Layer2,
+  // dropdown portaled to Modal Container with higher index than Overlay
+  dropdownModalWidget: Indices.Layer21,
   // Layers when dragging
   animatedSnappingDropZone: Indices.Layer2,
 

From b0c7c1c5ca3ed376f3128307f9aa7140417a56fa Mon Sep 17 00:00:00 2001
From: Tolulope Adetula <31691737+Tooluloope@users.noreply.github.com>
Date: Tue, 8 Jun 2021 08:40:41 +0100
Subject: [PATCH 11/11] fix: options display in deploy view

---
 .../blueprint/DropdownComponent.tsx           | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx b/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
index 0e6e65bb8a..93c4700c18 100644
--- a/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
@@ -229,12 +229,28 @@ const StyledMultiDropDown = styled(MultiDropDown)<{
     }
   }
 `;
+interface DropDownComponentState {
+  portalContainer: HTMLElement;
+}
 
-class DropDownComponent extends React.Component<DropDownComponentProps> {
+class DropDownComponent extends React.Component<
+  DropDownComponentProps,
+  DropDownComponentState
+> {
   private _menu = React.createRef<HTMLDivElement>();
+  constructor(props: DropDownComponentProps) {
+    super(props);
+    this.state = { portalContainer: this._menu.current as HTMLElement };
+  }
+  componentDidMount() {
+    this.setState({
+      portalContainer: this.props.getDropdownPosition(this._menu.current),
+    });
+  }
 
   render() {
     const { options, selectedIndexArr } = this.props;
+    const { portalContainer } = this.state;
     const selectedItems = selectedIndexArr
       ? _.map(selectedIndexArr, (index) => options[index])
       : [];
@@ -302,9 +318,7 @@ class DropDownComponent extends React.Component<DropDownComponentProps> {
               popoverProps={{
                 minimal: true,
                 usePortal: true,
-                portalContainer: this.props.getDropdownPosition(
-                  this._menu.current,
-                ),
+                portalContainer,
                 modifiers: {
                   preventOverflow: {
                     enabled: false,