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

app/client/src/constants/WidgetConstants.tsx

@@ -93,7 +93,7 @@ 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 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";
 import { getShowBrandingBadge } from "@appsmith/selectors/organizationSelectors";
 
 const AppViewerBody = styled.section<{
@@ -222,6 +223,7 @@ function AppViewer(props: Props) {
               backgroundColor={selectedTheme.properties.colors.backgroundColor}
             >
               <AppViewerBody
+                className={CANVAS_SELECTOR}
                 hasPages={pages.length > 1}
                 headerHeight={headerHeight}
                 showGuidedTourMessage={showGuidedTourMessage}

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

@@ -18,17 +18,14 @@ 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 { RenderMode, TextSize } from "constants/WidgetConstants";
 import { Alignment, Button, Classes, InputGroup } from "@blueprintjs/core";
 import { labelMargin, WidgetContainerDiff } from "widgets/WidgetUtils";
 import Icon from "components/ads/Icon";
 import { Colors } from "constants/Colors";
 import { LabelPosition } from "components/constants";
 import LabelWithTooltip from "components/ads/LabelWithTooltip";
+import useDropdown from "widgets/useDropdown";
 
 export interface TreeSelectProps
   extends Required<
@@ -63,6 +60,7 @@ export interface TreeSelectProps
   widgetId: string;
   filterText?: string;
   isFilterable: boolean;
+  renderMode?: RenderMode;
 }
 
 const getSvg = (expanded: boolean) => (
@@ -99,7 +97,6 @@ const switcherIcon = (treeNode: TreeNodeProps) => {
   }
   return getSvg(treeNode.expanded);
 };
-const FOCUS_TIMEOUT = 500;
 
 function MultiTreeSelectComponent({
   accentColor,
@@ -126,6 +123,7 @@ function MultiTreeSelectComponent({
   onChange,
   options,
   placeholder,
+  renderMode,
   value,
   widgetId,
   width,
@@ -134,10 +132,17 @@ function MultiTreeSelectComponent({
   const [filter, setFilter] = useState(filterText ?? "");
 
   const _menu = useRef<HTMLElement | null>(null);
+
   const labelRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
+
   const [memoDropDownWidth, setMemoDropDownWidth] = useState(0);
 
+  const { BackDrop, getPopupContainer, onOpen, selectRef } = useDropdown({
+    inputRef,
+    renderMode,
+  });
+
   // treeDefaultExpandAll is uncontrolled after first render,
   // using this to force render to respond to changes in expandAll
   useEffect(() => {
@@ -152,15 +157,6 @@ function MultiTreeSelectComponent({
     [filter],
   );
 
-  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;
-  }, []);
   const onQueryChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
     event.stopPropagation();
     setFilter(event.target.value);
@@ -185,9 +181,9 @@ function MultiTreeSelectComponent({
       menu: React.ReactElement<any, string | React.JSXElementConstructor<any>>,
     ) => (
       <>
+        <BackDrop />
         {isFilterable ? (
           <InputGroup
-            autoFocus
             inputRef={inputRef}
             leftIcon="search"
             onChange={onQueryChange}
@@ -205,12 +201,6 @@ function MultiTreeSelectComponent({
     [loading, isFilterable, filter, onQueryChange],
   );
 
-  const onOpen = useCallback((open: boolean) => {
-    if (open) {
-      setTimeout(() => inputRef.current?.focus(), FOCUS_TIMEOUT);
-    }
-  }, []);
-
   const onClear = useCallback(() => onChange([], []), []);
 
   return (
@@ -265,7 +255,7 @@ function MultiTreeSelectComponent({
           dropdownRender={dropdownRender}
           dropdownStyle={dropdownStyle}
           filterTreeNode
-          getPopupContainer={getDropdownPosition}
+          getPopupContainer={getPopupContainer}
           inputIcon={
             <Icon
               className="dropdown-icon"
@@ -283,6 +273,7 @@ function MultiTreeSelectComponent({
           onClear={onClear}
           onDropdownVisibleChange={onOpen}
           placeholder={placeholder}
+          ref={selectRef}
           removeIcon={
             <Icon
               className="remove-icon"

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

@@ -532,6 +532,7 @@ class MultiSelectTreeWidget extends BaseWidget<
         onChange={this.onOptionChange}
         options={options}
         placeholder={this.props.placeholderText as string}
+        renderMode={this.props.renderMode}
         value={filteredValue}
         widgetId={this.props.widgetId}
         width={componentWidth}

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

@@ -8,7 +8,7 @@ import {
   StyledCheckbox,
 } from "./index.styled";
 import {
-  CANVAS_CLASSNAME,
+  CANVAS_SELECTOR,
   MODAL_PORTAL_CLASSNAME,
   TextSize,
 } from "constants/WidgetConstants";
@@ -109,7 +109,7 @@ function MultiSelectComponent({
         `.${MODAL_PORTAL_CLASSNAME}`,
       ) as HTMLElement;
     }
-    return document.querySelector(`.${CANVAS_CLASSNAME}`) as HTMLElement;
+    return document.querySelector(`.${CANVAS_SELECTOR}`) as HTMLElement;
   }, []);
 
   const handleSelectAll = () => {

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

@@ -18,22 +18,20 @@ import MenuItemCheckBox, {
   StyledCheckbox,
   InputContainer,
 } from "./index.styled";
-import {
-  CANVAS_CLASSNAME,
-  MODAL_PORTAL_CLASSNAME,
-  TextSize,
-} from "constants/WidgetConstants";
+import { RenderMode, 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 { Colors } from "constants/Colors";
 import { LabelPosition } from "components/constants";
 import { uniqBy } from "lodash";
 import LabelWithTooltip from "components/ads/LabelWithTooltip";
+import useDropdown from "widgets/useDropdown";
 
 const menuItemSelectedIcon = (props: { isSelected: boolean }) => {
   return <MenuItemCheckBox checked={props.isSelected} />;
 };
+
 export interface MultiSelectProps
   extends Required<
     Pick<
@@ -66,10 +64,10 @@ export interface MultiSelectProps
   accentColor?: string;
   onFocus?: (e: React.FocusEvent) => void;
   onBlur?: (e: React.FocusEvent) => void;
+  renderMode?: RenderMode;
 }
 
 const DEBOUNCE_TIMEOUT = 1000;
-const FOCUS_TIMEOUT = 500;
 
 function MultiSelectComponent({
   accentColor,
@@ -97,6 +95,7 @@ function MultiSelectComponent({
   onFocus,
   options,
   placeholder,
+  renderMode,
   serverSideFiltering,
   value,
   widgetId,
@@ -111,6 +110,11 @@ function MultiSelectComponent({
   const labelRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
 
+  const { BackDrop, getPopupContainer, onOpen, selectRef } = useDropdown({
+    inputRef,
+    renderMode,
+  });
+
   // SelectAll if all options are in Value
   useEffect(() => {
     if (
@@ -163,15 +167,6 @@ function MultiSelectComponent({
       ) : null,
     [filter],
   );
-  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;
-  }, []);
 
   const handleSelectAll = () => {
     if (!isSelectAll) {
@@ -195,63 +190,13 @@ function MultiSelectComponent({
     return onChange([]);
   };
 
-  const onOpen = useCallback((open: boolean) => {
-    if (open) {
-      setTimeout(() => inputRef.current?.focus(), FOCUS_TIMEOUT);
-    }
-  }, []);
-
   const checkOptionsAndValue = () => {
     const emptyFalseArr = [false];
     if (value.length === 0 || filteredOptions.length === 0)
       return emptyFalseArr;
     return filteredOptions.map((x) => value.some((y) => y.value === x.value));
   };
 
-  // SelectAll if all options are in Value
-  useEffect(() => {
-    if (
-      !isSelectAll &&
-      filteredOptions.length &&
-      value.length &&
-      !checkOptionsAndValue().includes(false)
-    ) {
-      setIsSelectAll(true);
-    }
-    if (isSelectAll && filteredOptions.length !== value.length) {
-      setIsSelectAll(false);
-    }
-  }, [filteredOptions, value]);
-
-  // Trigger onFilterChange once filter is Updated
-  useEffect(() => {
-    const timeOutId = setTimeout(
-      () => onFilterChange(filter),
-      DEBOUNCE_TIMEOUT,
-    );
-    return () => clearTimeout(timeOutId);
-  }, [filter]);
-
-  // Filter options based on serverSideFiltering
-  useEffect(
-    () => {
-      if (serverSideFiltering) {
-        return setFilteredOptions(options);
-      }
-      const filtered = options.filter((option) => {
-        return (
-          String(option.label)
-            .toLowerCase()
-            .indexOf(filter.toLowerCase()) >= 0 ||
-          String(option.value)
-            .toLowerCase()
-            .indexOf(filter.toLowerCase()) >= 0
-        );
-      });
-      setFilteredOptions(filtered);
-    },
-    serverSideFiltering ? [options] : [filter, options],
-  );
   useEffect(() => {
     const parentWidth = width - WidgetContainerDiff;
     if (compactMode && labelRef.current) {
@@ -277,6 +222,7 @@ function MultiSelectComponent({
       menu: React.ReactElement<any, string | React.JSXElementConstructor<any>>,
     ) => (
       <>
+        <BackDrop />
         {isFilterable ? (
           <InputGroup
             inputRef={inputRef}
@@ -354,15 +300,15 @@ function MultiSelectComponent({
         <Select
           animation="slide-up"
           choiceTransitionName="rc-select-selection__choice-zoom"
+          className="rc-select"
           // TODO: Make Autofocus a variable in the property pane
           // autoFocus
-          className="rc-select"
           defaultActiveFirstOption={false}
           disabled={disabled}
           dropdownClassName={`multi-select-dropdown multiselect-popover-width-${widgetId}`}
           dropdownRender={dropdownRender}
           dropdownStyle={dropdownStyle}
-          getPopupContainer={getDropdownPosition}
+          getPopupContainer={getPopupContainer}
           inputIcon={
             <Icon
               className="dropdown-icon"
@@ -384,6 +330,7 @@ function MultiSelectComponent({
           onFocus={onFocus}
           options={filteredOptions}
           placeholder={placeholder || "select option(s)"}
+          ref={selectRef}
           removeIcon={
             <Icon
               className="remove-icon"

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

@@ -615,6 +615,7 @@ class MultiSelectWidget extends BaseWidget<
         onFilterChange={this.onFilterChange}
         options={options}
         placeholder={this.props.placeholderText as string}
+        renderMode={this.props.renderMode}
         serverSideFiltering={this.props.serverSideFiltering}
         value={values}
         widgetId={this.props.widgetId}