Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

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

Browse Source 
-- Sets popover container to the closest canvas
This commit is contained in:
Paul Li 2022-04-20 17:02:57 +08:00
parent cebccc5401
commit 9301bf9637
5 changed files with 17 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/client/src/constants/WidgetConstants.tsx
View File

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

12
app/client/src/widgets/MultiSelectTreeWidget/component/index.tsx
View File

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

12
app/client/src/widgets/MultiSelectWidget/component/index.tsx
View File

@ -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 = () => {

12
app/client/src/widgets/MultiSelectWidgetV2/component/index.tsx
View File

@ -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 = () => {

12
app/client/src/widgets/SingleSelectTreeWidget/component/index.tsx
View File

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