fix: Popover in Multi select widget inside modals breaks away from the widget

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 CANVAS_SELECTOR = `[type="CANVAS_WIDGET"]`;
 
 export const DEFAULT_CENTER = { lat: -34.397, lng: 150.644 };
 

app/client/src/widgets/MultiSelectTreeWidget/component/index.tsx

@@ -18,13 +18,13 @@ import "rc-tree-select/assets/index.less";
 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,
-  TextSize,
-} from "constants/WidgetConstants";
+import { TextSize } from "constants/WidgetConstants";
 import { Alignment, Button, Classes, InputGroup } from "@blueprintjs/core";
-import { labelMargin, WidgetContainerDiff } from "widgets/WidgetUtils";
+import {
+  getClosestCanvas,
+  labelMargin,
+  WidgetContainerDiff,
+} from "widgets/WidgetUtils";
 import Icon from "components/ads/Icon";
 import { Colors } from "constants/Colors";
 import { LabelPosition } from "components/constants";
@@ -146,14 +146,9 @@ function MultiTreeSelectComponent({
     [filter],
   );
 
-  const getDropdownPosition = useCallback(() => {
+  const getPopupContainer = 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 getClosestCanvas(node);
   }, []);
   const onQueryChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
     event.stopPropagation();
@@ -251,7 +246,7 @@ function MultiTreeSelectComponent({
           dropdownRender={dropdownRender}
           dropdownStyle={dropdownStyle}
           filterTreeNode
-          getPopupContainer={getDropdownPosition}
+          getPopupContainer={getPopupContainer}
           inputIcon={
             <Icon
               className="dropdown-icon"

app/client/src/widgets/MultiSelectWidget/component/index.tsx

@@ -7,15 +7,11 @@ import {
   MultiSelectContainer,
   StyledCheckbox,
 } from "./index.styled";
-import {
-  CANVAS_CLASSNAME,
-  MODAL_PORTAL_CLASSNAME,
-  TextSize,
-} from "constants/WidgetConstants";
+import { TextSize } from "constants/WidgetConstants";
 import debounce from "lodash/debounce";
 import Icon from "components/ads/Icon";
 import { Alignment, Classes } from "@blueprintjs/core";
-import { WidgetContainerDiff } from "widgets/WidgetUtils";
+import { getClosestCanvas, WidgetContainerDiff } from "widgets/WidgetUtils";
 import _ from "lodash";
 import { Colors } from "constants/Colors";
 import { LabelPosition } from "components/constants";
@@ -99,14 +95,9 @@ function MultiSelectComponent({
     }
   }, [options, value]);
 
-  const getDropdownPosition = useCallback(() => {
+  const getPopupContainer = 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 getClosestCanvas(node);
   }, []);
 
   const handleSelectAll = () => {
@@ -202,7 +193,7 @@ function MultiSelectComponent({
         dropdownRender={dropdownRender}
         dropdownStyle={dropdownStyle}
         filterOption={serverSideFiltering ? false : filterOption}
-        getPopupContainer={getDropdownPosition}
+        getPopupContainer={getPopupContainer}
         inputIcon={
           <Icon
             className="dropdown-icon"

app/client/src/widgets/MultiSelectWidgetV2/component/index.tsx

@@ -18,14 +18,14 @@ import MenuItemCheckBox, {
   StyledCheckbox,
   InputContainer,
 } from "./index.styled";
-import {
-  CANVAS_CLASSNAME,
-  MODAL_PORTAL_CLASSNAME,
-  TextSize,
-} from "constants/WidgetConstants";
+import { TextSize } from "constants/WidgetConstants";
 import Icon from "components/ads/Icon";
 import { Alignment, Button, Classes, InputGroup } from "@blueprintjs/core";
-import { labelMargin, WidgetContainerDiff } from "widgets/WidgetUtils";
+import {
+  getClosestCanvas,
+  labelMargin,
+  WidgetContainerDiff,
+} from "widgets/WidgetUtils";
 import { Colors } from "constants/Colors";
 import { LabelPosition } from "components/constants";
 import { uniqBy } from "lodash";
@@ -157,14 +157,9 @@ function MultiSelectComponent({
       ) : null,
     [filter],
   );
-  const getDropdownPosition = useCallback(() => {
+  const getPopupContainer = 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 getClosestCanvas(node);
   }, []);
 
   const handleSelectAll = () => {
@@ -347,7 +342,7 @@ function MultiSelectComponent({
           dropdownClassName={`multi-select-dropdown multiselect-popover-width-${widgetId}`}
           dropdownRender={dropdownRender}
           dropdownStyle={dropdownStyle}
-          getPopupContainer={getDropdownPosition}
+          getPopupContainer={getPopupContainer}
           inputIcon={
             <Icon
               className="dropdown-icon"

app/client/src/widgets/SingleSelectTreeWidget/component/index.tsx

@@ -17,13 +17,13 @@ import {
 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,
-  TextSize,
-} from "constants/WidgetConstants";
+import { TextSize } from "constants/WidgetConstants";
 import { Alignment, Button, Classes, InputGroup } from "@blueprintjs/core";
-import { labelMargin, WidgetContainerDiff } from "widgets/WidgetUtils";
+import {
+  getClosestCanvas,
+  labelMargin,
+  WidgetContainerDiff,
+} from "widgets/WidgetUtils";
 import Icon from "components/ads/Icon";
 import { Colors } from "constants/Colors";
 import { LabelPosition } from "components/constants";
@@ -135,14 +135,9 @@ function SingleSelectTreeComponent({
     setKey(Math.random());
   }, [expandAll]);
 
-  const getDropdownPosition = useCallback(() => {
+  const getPopupContainer = 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 getClosestCanvas(node);
   }, []);
   const onClear = useCallback(() => onChange([], []), []);
   const onOpen = useCallback((open: boolean) => {
@@ -245,7 +240,7 @@ function SingleSelectTreeComponent({
           dropdownRender={dropdownRender}
           dropdownStyle={dropdownStyle}
           filterTreeNode
-          getPopupContainer={getDropdownPosition}
+          getPopupContainer={getPopupContainer}
           inputIcon={
             <Icon
               className="dropdown-icon"

app/client/src/widgets/WidgetUtils.ts

@@ -4,6 +4,7 @@
 import { Alignment } from "@blueprintjs/core";
 import { IconName } from "@blueprintjs/icons";
 import {
+  CANVAS_SELECTOR,
   CONTAINER_GRID_PADDING,
   GridDefaults,
   WIDGET_PADDING,
@@ -254,3 +255,7 @@ export const sanitizeKey = (key: string, options?: SanitizeOptions) => {
 
   return sanitizedKey;
 };
+
+export const getClosestCanvas = (node: HTMLElement | null) => {
+  return node?.closest(`${CANVAS_SELECTOR}`) as HTMLElement;
+};