From 4dbd343b0e71f7f09b36e22bf7ca4759b15cd75e Mon Sep 17 00:00:00 2001
From: matttdawson <89495499+matttdawson@users.noreply.github.com>
Date: Fri, 28 Oct 2022 10:51:03 +1300
Subject: [PATCH] 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
---
 src/components/GridPopoverHook.tsx              | 3 ++-
 src/components/gridForm/GridFormPopoutMenu.tsx  | 4 ++--
 src/stories/components/GridReadOnly.stories.tsx | 6 +++---
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/GridPopoverHook.tsx b/src/components/GridPopoverHook.tsx
index 332669d4..33c0726e 100644
--- 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
index 2d379931..a55b24c3 100644
--- 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
index 384d2418..74d37cb0 100644
--- 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,
               },
             ];
           },