diff --git a/app/client/src/constants/WidgetConstants.tsx b/app/client/src/constants/WidgetConstants.tsx
index e66668bbee..4b4e67c78d 100644
--- a/app/client/src/constants/WidgetConstants.tsx
+++ b/app/client/src/constants/WidgetConstants.tsx
@@ -93,7 +93,6 @@ export const WIDGET_CLASSNAME_PREFIX = "WIDGET_";
 export const MAIN_CONTAINER_WIDGET_ID = "0";
 export const MAIN_CONTAINER_WIDGET_NAME = "MainContainer";
 export const MODAL_PORTAL_CLASSNAME = "bp3-modal-widget";
-export const MAIN_CANVAS_CLASSNAME = ".appsmith_widget_0";
 export const CANVAS_SELECTOR = ".canvas";
 
 export const DEFAULT_CENTER = { lat: -34.397, lng: 150.644 };
diff --git a/app/client/src/pages/AppViewer/index.tsx b/app/client/src/pages/AppViewer/index.tsx
index 02001a5abf..ff3a029152 100644
--- a/app/client/src/pages/AppViewer/index.tsx
+++ b/app/client/src/pages/AppViewer/index.tsx
@@ -41,6 +41,7 @@ import {
 } from "actions/controlActions";
 import { setAppViewHeaderHeight } from "actions/appViewActions";
 import { showPostCompletionMessage } from "selectors/onboardingSelectors";
+import { CANVAS_SELECTOR } from "constants/WidgetConstants";
 
 const AppViewerBody = styled.section<{
   hasPages: boolean;
@@ -220,7 +221,7 @@ function AppViewer(props: Props) {
               backgroundColor={selectedTheme.properties.colors.backgroundColor}
             >
               <AppViewerBody
-                className="canvas"
+                className={CANVAS_SELECTOR}
                 hasPages={pages.length > 1}
                 headerHeight={headerHeight}
                 showGuidedTourMessage={showGuidedTourMessage}
diff --git a/app/client/src/widgets/MultiSelectTreeWidget/component/index.tsx b/app/client/src/widgets/MultiSelectTreeWidget/component/index.tsx
index 3f6380e432..98ac75109f 100644
--- a/app/client/src/widgets/MultiSelectTreeWidget/component/index.tsx
+++ b/app/client/src/widgets/MultiSelectTreeWidget/component/index.tsx
@@ -21,7 +21,6 @@ import { CheckedStrategy } from "rc-tree-select/lib/utils/strategyUtil";
 import { RenderMode, RenderModes, TextSize } from "constants/WidgetConstants";
 import { Alignment, Button, Classes, InputGroup } from "@blueprintjs/core";
 import {
-  getClosestCanvas,
   getMainCanvas,
   labelMargin,
   WidgetContainerDiff,
@@ -139,7 +138,6 @@ function MultiTreeSelectComponent({
   const [filter, setFilter] = useState(filterText ?? "");
 
   const _menu = useRef<HTMLElement | null>(null);
-  const parentDropDownContainer = useRef<HTMLElement | null>(null);
   const selectRef = useRef<Select<LabelValueType[]> | null>(null);
 
   const labelRef = useRef<HTMLDivElement>(null);
@@ -177,11 +175,7 @@ function MultiTreeSelectComponent({
     () => popupContainer.current as HTMLElement,
     [],
   );
-  useEffect(() => {
-    const node = _menu.current;
-    const parent = getClosestCanvas(node);
-    parentDropDownContainer.current = parent;
-  }, []);
+
   const onQueryChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
     event.stopPropagation();
     setFilter(event.target.value);
diff --git a/app/client/src/widgets/MultiSelectWidget/component/index.tsx b/app/client/src/widgets/MultiSelectWidget/component/index.tsx
index 64b10ae8da..b514cfe051 100644
--- a/app/client/src/widgets/MultiSelectWidget/component/index.tsx
+++ b/app/client/src/widgets/MultiSelectWidget/component/index.tsx
@@ -7,11 +7,15 @@ import {
   MultiSelectContainer,
   StyledCheckbox,
 } from "./index.styled";
-import { TextSize } from "constants/WidgetConstants";
+import {
+  CANVAS_SELECTOR,
+  MODAL_PORTAL_CLASSNAME,
+  TextSize,
+} from "constants/WidgetConstants";
 import debounce from "lodash/debounce";
 import Icon from "components/ads/Icon";
 import { Alignment, Classes } from "@blueprintjs/core";
-import { getClosestCanvas, WidgetContainerDiff } from "widgets/WidgetUtils";
+import { WidgetContainerDiff } from "widgets/WidgetUtils";
 import _ from "lodash";
 import { Colors } from "constants/Colors";
 import { LabelPosition } from "components/constants";
@@ -98,9 +102,14 @@ function MultiSelectComponent({
     }
   }, [options, value]);
 
-  const getPopupContainer = useCallback(() => {
+  const getDropdownPosition = useCallback(() => {
     const node = _menu.current;
-    return getClosestCanvas(node);
+    if (Boolean(node?.closest(`.${MODAL_PORTAL_CLASSNAME}`))) {
+      return document.querySelector(
+        `.${MODAL_PORTAL_CLASSNAME}`,
+      ) as HTMLElement;
+    }
+    return document.querySelector(`.${CANVAS_SELECTOR}`) as HTMLElement;
   }, []);
 
   const handleSelectAll = () => {
@@ -195,7 +204,7 @@ function MultiSelectComponent({
         dropdownRender={dropdownRender}
         dropdownStyle={dropdownStyle}
         filterOption={serverSideFiltering ? false : filterOption}
-        getPopupContainer={getPopupContainer}
+        getPopupContainer={getDropdownPosition}
         inputIcon={
           <Icon
             className="dropdown-icon"
diff --git a/app/client/src/widgets/SingleSelectTreeWidget/component/index.tsx b/app/client/src/widgets/SingleSelectTreeWidget/component/index.tsx
index ed03d90c21..dab6c7402f 100644
--- a/app/client/src/widgets/SingleSelectTreeWidget/component/index.tsx
+++ b/app/client/src/widgets/SingleSelectTreeWidget/component/index.tsx
@@ -20,7 +20,6 @@ import { TreeNodeProps } from "rc-tree-select/lib/TreeNode";
 import { RenderMode, RenderModes, TextSize } from "constants/WidgetConstants";
 import { Alignment, Button, Classes, InputGroup } from "@blueprintjs/core";
 import {
-  getClosestCanvas,
   getMainCanvas,
   labelMargin,
   WidgetContainerDiff,
@@ -141,7 +140,6 @@ function SingleSelectTreeComponent({
   const _menu = useRef<HTMLElement | null>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const [memoDropDownWidth, setMemoDropDownWidth] = useState(0);
-  const parentDropDownContainer = useRef<HTMLElement | null>(null);
 
   // treeDefaultExpandAll is uncontrolled after first render,
   // using this to force render to respond to changes in expandAll
@@ -164,11 +162,7 @@ function SingleSelectTreeComponent({
     () => popupContainer.current as HTMLElement,
     [],
   );
-  useEffect(() => {
-    const node = _menu.current;
-    const parent = getClosestCanvas(node);
-    parentDropDownContainer.current = parent;
-  }, []);
+
   const onSelectionChange = useCallback(
     (value?: DefaultValueType, labelList?: ReactNode[]) => {
       setFilter("");
diff --git a/app/client/src/widgets/WidgetUtils.ts b/app/client/src/widgets/WidgetUtils.ts
index 225a0e7624..b65d905e75 100644
--- a/app/client/src/widgets/WidgetUtils.ts
+++ b/app/client/src/widgets/WidgetUtils.ts
@@ -541,8 +541,5 @@ export const parseSchemaItem = (
   }
 };
 
-export const getClosestCanvas = (node: HTMLElement | null) => {
-  return node?.closest(CANVAS_SELECTOR) as HTMLElement;
-};
 export const getMainCanvas = () =>
   document.querySelector(CANVAS_SELECTOR) as HTMLElement;