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<HTMLInputElement>) => {
     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) => {