From cf2e5ce9d1f2de1c1aa1aeee2b430a31f0617ec5 Mon Sep 17 00:00:00 2001
From: Rishabh Saxena <rishabh.robben@gmail.com>
Date: Tue, 19 Jan 2021 19:42:00 +0530
Subject: [PATCH] fix: use popover for ads dropdown options (#2628)

---
 app/client/src/components/ads/Dropdown.tsx | 50 ++++++++++++----------
 1 file changed, 28 insertions(+), 22 deletions(-)

diff --git a/app/client/src/components/ads/Dropdown.tsx b/app/client/src/components/ads/Dropdown.tsx
index b25638b1b3..dba7b6ea31 100644
--- a/app/client/src/components/ads/Dropdown.tsx
+++ b/app/client/src/components/ads/Dropdown.tsx
@@ -3,6 +3,7 @@ import Icon, { IconName, IconSize } from "./Icon";
 import { CommonComponentProps, Classes } from "./common";
 import styled from "styled-components";
 import Text, { TextType } from "./Text";
+import { Popover, Position } from "@blueprintjs/core";
 
 type DropdownOption = {
   label?: string;
@@ -56,15 +57,12 @@ const Selected = styled.div<{ isOpen: boolean; disabled?: boolean }>`
   }
 `;
 
-const DropdownWrapper = styled.div`
-  position: absolute;
-  top: 38px;
-  left: 0px;
+const DropdownWrapper = styled.div<{ width?: number }>`
+  width: ${(props) => props.width || 260}px;
   z-index: 1;
   margin-top: ${(props) => props.theme.spaces[2] - 1}px;
   background: ${(props) => props.theme.colors.dropdown.menuBg};
   box-shadow: 0px 12px 28px ${(props) => props.theme.colors.dropdown.menuShadow};
-  width: 100%;
 `;
 
 const OptionWrapper = styled.div<{ selected: boolean }>`
@@ -128,6 +126,7 @@ export default function Dropdown(props: DropdownProps) {
   const { onSelect } = { ...props };
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [selected, setSelected] = useState<DropdownOption>(props.selected);
+  const [containerWidth, setContainerWidth] = useState(0);
 
   useEffect(() => {
     setSelected(props.selected);
@@ -143,23 +142,30 @@ export default function Dropdown(props: DropdownProps) {
     [onSelect],
   );
 
-  return (
-    <DropdownContainer
-      tabIndex={0}
-      onBlur={() => setIsOpen(false)}
-      data-cy={props.cypressSelector}
-    >
-      <Selected
-        isOpen={isOpen}
-        disabled={props.disabled}
-        onClick={() => setIsOpen(!isOpen)}
-      >
-        <Text type={TextType.P1}>{selected.value}</Text>
-        <Icon name="downArrow" size={IconSize.XXS} />
-      </Selected>
+  const measuredRef = useCallback((node) => {
+    if (node !== null) {
+      setContainerWidth(node.getBoundingClientRect().width);
+    }
+  }, []);
 
-      {isOpen && !props.disabled ? (
-        <DropdownWrapper>
+  return (
+    <DropdownContainer data-cy={props.cypressSelector} ref={measuredRef}>
+      <Popover
+        minimal
+        position={Position.BOTTOM_RIGHT}
+        isOpen={isOpen && !props.disabled}
+        onInteraction={(state) => setIsOpen(state)}
+        boundary="viewport"
+      >
+        <Selected
+          isOpen={isOpen}
+          disabled={props.disabled}
+          onClick={() => setIsOpen(!isOpen)}
+        >
+          <Text type={TextType.P1}>{selected.value}</Text>
+          <Icon name="downArrow" size={IconSize.XXS} />
+        </Selected>
+        <DropdownWrapper width={containerWidth}>
           {props.options.map((option: DropdownOption, index: number) => {
             return (
               <OptionWrapper
@@ -186,7 +192,7 @@ export default function Dropdown(props: DropdownProps) {
             );
           })}
         </DropdownWrapper>
-      ) : null}
+      </Popover>
     </DropdownContainer>
   );
 }