fix: Fix popover not working in popped out window (#40)

* fix: popover not working in popped out window * feat: renamed mulitEdit to supportsMultiEdit in menu options
linz · Oct 27, 2022 · 4dbd343 · 4dbd343
1 parent dfa648c
commit 4dbd343
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 6 deletions.
diff --git a/src/components/GridPopoverHook.tsx b/src/components/GridPopoverHook.tsx
@@ -5,6 +5,7 @@ import { ControlledMenu } from "@szhsin/react-menu";
 import { GridFormProps } from "./GridCell";
 import { hasParentClass } from "@utils/util";
 import { GridBaseRow } from "./Grid";
+import { isEmpty } from "lodash-es";
 
 export const useGridPopoverHook = <RowType extends GridBaseRow>(
   props: GridFormProps<RowType>,
@@ -84,7 +85,7 @@ export const useGridPopoverHook = <RowType extends GridBaseRow>(
           {anchorRef.current && (
             <ControlledMenu
               state={isOpen ? "open" : "closed"}
-              portal={true}
+              portal={isEmpty(document.querySelectorAll(".PopoutWindowContainer"))}
               unmountOnClose={true}
               anchorRef={anchorRef}
               menuClassName={"lui-menu"}

diff --git a/src/components/gridForm/GridFormPopoutMenu.tsx b/src/components/gridForm/GridFormPopoutMenu.tsx
@@ -21,7 +21,7 @@ export interface MenuOption<RowType> {
   label: JSX.Element | string | MenuSeparatorType;
   action?: (selectedRows: RowType[]) => Promise<boolean>;
   disabled?: string | boolean;
-  multiEdit: boolean;
+  supportsMultiEdit: boolean;
 }
 
 /**
@@ -65,7 +65,7 @@ export const GridFormPopoutMenu = <RowType extends GridBaseRow>(props: GridFormP
   const selectedRowCount = props.selectedRows.length;
 
   const filteredOptions = options?.filter((menuOption) => {
-    return menuOption.label === MenuSeparator || selectedRowCount === 1 || menuOption.multiEdit;
+    return menuOption.label === MenuSeparator || selectedRowCount === 1 || menuOption.supportsMultiEdit;
   });
 
   const { popoverWrapper } = useGridPopoverHook(props);

diff --git a/src/stories/components/GridReadOnly.stories.tsx b/src/stories/components/GridReadOnly.stories.tsx
@@ -98,7 +98,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
                   await wait(1500);
                   return true;
                 },
-                multiEdit: false,
+                supportsMultiEdit: false,
               },
               {
                 label: "Multi-edit",
@@ -107,12 +107,12 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
                   await wait(1500);
                   return true;
                 },
-                multiEdit: true,
+                supportsMultiEdit: true,
               },
               {
                 label: "Disabled item",
                 disabled: "Disabled for test",
-                multiEdit: true,
+                supportsMultiEdit: true,
               },
             ];
           },