fix: remove dead code

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 };

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}

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);

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"

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("");

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;