From 9301bf963752c7a7d1547a8d75d8c617e892cfb4 Mon Sep 17 00:00:00 2001 From: Paul Li Date: Wed, 20 Apr 2022 17:02:57 +0800 Subject: [PATCH] fix: Popover in Multi select widget inside modals breaks away from the widget -- Sets popover container to the closest canvas --- app/client/src/constants/WidgetConstants.tsx | 1 + .../MultiSelectTreeWidget/component/index.tsx | 12 ++++-------- .../widgets/MultiSelectWidget/component/index.tsx | 12 ++++-------- .../widgets/MultiSelectWidgetV2/component/index.tsx | 12 ++++-------- .../SingleSelectTreeWidget/component/index.tsx | 12 ++++-------- 5 files changed, 17 insertions(+), 32 deletions(-) diff --git a/app/client/src/constants/WidgetConstants.tsx b/app/client/src/constants/WidgetConstants.tsx index 9691641599..d6108ee7d2 100644 --- a/app/client/src/constants/WidgetConstants.tsx +++ b/app/client/src/constants/WidgetConstants.tsx @@ -93,6 +93,7 @@ export const MAIN_CONTAINER_WIDGET_ID = "0"; export const MAIN_CONTAINER_WIDGET_NAME = "MainContainer"; export const MODAL_PORTAL_CLASSNAME = "bp3-modal-widget"; export const CANVAS_CLASSNAME = "appsmith_widget_0"; +export const SELECT_DROPDOWN_CONTAINER_SELECTOR = `[type="CANVAS_WIDGET"]`; export const DEFAULT_CENTER = { lat: -34.397, lng: 150.644 }; diff --git a/app/client/src/widgets/MultiSelectTreeWidget/component/index.tsx b/app/client/src/widgets/MultiSelectTreeWidget/component/index.tsx index 7c501d3310..7260529e55 100644 --- a/app/client/src/widgets/MultiSelectTreeWidget/component/index.tsx +++ b/app/client/src/widgets/MultiSelectTreeWidget/component/index.tsx @@ -19,8 +19,7 @@ import { DefaultValueType } from "rc-tree-select/lib/interface"; import { TreeNodeProps } from "rc-tree-select/lib/TreeNode"; import { CheckedStrategy } from "rc-tree-select/lib/utils/strategyUtil"; import { - CANVAS_CLASSNAME, - MODAL_PORTAL_CLASSNAME, + SELECT_DROPDOWN_CONTAINER_SELECTOR, TextSize, } from "constants/WidgetConstants"; import { Alignment, Button, Classes, InputGroup } from "@blueprintjs/core"; @@ -148,12 +147,9 @@ function MultiTreeSelectComponent({ const getDropdownPosition = useCallback(() => { const node = _menu.current; - if (Boolean(node?.closest(`.${MODAL_PORTAL_CLASSNAME}`))) { - return document.querySelector( - `.${MODAL_PORTAL_CLASSNAME}`, - ) as HTMLElement; - } - return document.querySelector(`.${CANVAS_CLASSNAME}`) as HTMLElement; + return node?.closest( + `${SELECT_DROPDOWN_CONTAINER_SELECTOR}`, + ) as HTMLElement; }, []); const onQueryChange = useCallback((event: ChangeEvent) => { event.stopPropagation(); diff --git a/app/client/src/widgets/MultiSelectWidget/component/index.tsx b/app/client/src/widgets/MultiSelectWidget/component/index.tsx index 4e82e10b0e..53a86a84b6 100644 --- a/app/client/src/widgets/MultiSelectWidget/component/index.tsx +++ b/app/client/src/widgets/MultiSelectWidget/component/index.tsx @@ -8,8 +8,7 @@ import { StyledCheckbox, } from "./index.styled"; import { - CANVAS_CLASSNAME, - MODAL_PORTAL_CLASSNAME, + SELECT_DROPDOWN_CONTAINER_SELECTOR, TextSize, } from "constants/WidgetConstants"; import debounce from "lodash/debounce"; @@ -101,12 +100,9 @@ function MultiSelectComponent({ const getDropdownPosition = useCallback(() => { const node = _menu.current; - if (Boolean(node?.closest(`.${MODAL_PORTAL_CLASSNAME}`))) { - return document.querySelector( - `.${MODAL_PORTAL_CLASSNAME}`, - ) as HTMLElement; - } - return document.querySelector(`.${CANVAS_CLASSNAME}`) as HTMLElement; + return node?.closest( + `${SELECT_DROPDOWN_CONTAINER_SELECTOR}`, + ) as HTMLElement; }, []); const handleSelectAll = () => { diff --git a/app/client/src/widgets/MultiSelectWidgetV2/component/index.tsx b/app/client/src/widgets/MultiSelectWidgetV2/component/index.tsx index 4b15171f3a..20e57782b6 100644 --- a/app/client/src/widgets/MultiSelectWidgetV2/component/index.tsx +++ b/app/client/src/widgets/MultiSelectWidgetV2/component/index.tsx @@ -19,8 +19,7 @@ import MenuItemCheckBox, { InputContainer, } from "./index.styled"; import { - CANVAS_CLASSNAME, - MODAL_PORTAL_CLASSNAME, + SELECT_DROPDOWN_CONTAINER_SELECTOR, TextSize, } from "constants/WidgetConstants"; import Icon from "components/ads/Icon"; @@ -159,12 +158,9 @@ function MultiSelectComponent({ ); const getDropdownPosition = useCallback(() => { const node = _menu.current; - if (Boolean(node?.closest(`.${MODAL_PORTAL_CLASSNAME}`))) { - return document.querySelector( - `.${MODAL_PORTAL_CLASSNAME}`, - ) as HTMLElement; - } - return document.querySelector(`.${CANVAS_CLASSNAME}`) as HTMLElement; + return node?.closest( + `${SELECT_DROPDOWN_CONTAINER_SELECTOR}`, + ) as HTMLElement; }, []); const handleSelectAll = () => { diff --git a/app/client/src/widgets/SingleSelectTreeWidget/component/index.tsx b/app/client/src/widgets/SingleSelectTreeWidget/component/index.tsx index dcb3b02545..803fa3363c 100644 --- a/app/client/src/widgets/SingleSelectTreeWidget/component/index.tsx +++ b/app/client/src/widgets/SingleSelectTreeWidget/component/index.tsx @@ -18,8 +18,7 @@ import "rc-tree-select/assets/index.less"; import { DefaultValueType } from "rc-tree-select/lib/interface"; import { TreeNodeProps } from "rc-tree-select/lib/TreeNode"; import { - CANVAS_CLASSNAME, - MODAL_PORTAL_CLASSNAME, + SELECT_DROPDOWN_CONTAINER_SELECTOR, TextSize, } from "constants/WidgetConstants"; import { Alignment, Button, Classes, InputGroup } from "@blueprintjs/core"; @@ -137,12 +136,9 @@ function SingleSelectTreeComponent({ const getDropdownPosition = useCallback(() => { const node = _menu.current; - if (Boolean(node?.closest(`.${MODAL_PORTAL_CLASSNAME}`))) { - return document.querySelector( - `.${MODAL_PORTAL_CLASSNAME}`, - ) as HTMLElement; - } - return document.querySelector(`.${CANVAS_CLASSNAME}`) as HTMLElement; + return node?.closest( + `${SELECT_DROPDOWN_CONTAINER_SELECTOR}`, + ) as HTMLElement; }, []); const onClear = useCallback(() => onChange([], []), []); const onOpen = useCallback((open: boolean) => {