From 5bb94be750d91f8dd8d0462ef1cddf0350e0ba20 Mon Sep 17 00:00:00 2001 From: matttdawson <89495499+matttdawson@users.noreply.github.com> Date: Mon, 21 Aug 2023 15:31:54 +1200 Subject: [PATCH] feat: Remove closeMenuExclusionClassName (#385) It breaks grids within modals So an issue has popped in in step-ag-grid that if you have a grid inside a LuiModal it won't close/save on clicking outside the dialog. This was due to some hacked in code to stop the grid popups from closing when a LuiModal OK/Cancel appeared, as the dialog would take focus from the grid. I'm going to remove this code as there's an alternate way of doing this, specifically in your onSave handler you should return a promise if it's going to show a dialog, and resolve the promise when the dialog is approved. --- src/components/GridPopoverHook.tsx | 1 - src/react-menu3/components/ControlledMenu.tsx | 7 ++----- src/react-menu3/types.ts | 5 ----- 3 files changed, 2 insertions(+), 11 deletions(-) diff --git a/src/components/GridPopoverHook.tsx b/src/components/GridPopoverHook.tsx index 2b6ea577..fdc6d982 100644 --- a/src/components/GridPopoverHook.tsx +++ b/src/components/GridPopoverHook.tsx @@ -78,7 +78,6 @@ export const useGridPopoverHook = (props: GridPopov viewScroll={"auto"} dontShrinkIfDirectionIsTop={true} className={props.className} - closeMenuExclusionClassName={"ReactModal__Content"} > {saving && ( // This is the overlay that prevents editing when the editor is saving
diff --git a/src/react-menu3/components/ControlledMenu.tsx b/src/react-menu3/components/ControlledMenu.tsx index ac5ca8aa..727fd081 100644 --- a/src/react-menu3/components/ControlledMenu.tsx +++ b/src/react-menu3/components/ControlledMenu.tsx @@ -31,7 +31,6 @@ export const ControlledMenuFr = ( onItemClick, onClose, saveButtonRef, - closeMenuExclusionClassName, ...restProps }: ControlledMenuProps & { saveButtonRef?: MutableRefObject }, externalRef: ForwardedRef, @@ -68,10 +67,8 @@ export const ControlledMenuFr = ( ); const isWithinMenu = useCallback( - (target: EventTarget | null) => - hasParentClass("szh-menu--state-open", target as Node) || - (closeMenuExclusionClassName && hasParentClass(closeMenuExclusionClassName, target as Node)), - [closeMenuExclusionClassName], + (target: EventTarget | null) => hasParentClass("szh-menu--state-open", target as Node), + [], ); const handleScreenEventForSave = useCallback( diff --git a/src/react-menu3/types.ts b/src/react-menu3/types.ts index 961c4a92..184ea705 100644 --- a/src/react-menu3/types.ts +++ b/src/react-menu3/types.ts @@ -441,9 +441,4 @@ export interface ControlledMenuProps extends RootMenuProps, ExtraMenuProps { * Event fired when menu is about to close. */ onClose?: EventHandler; - - /** - * When clicking outside the menu to close, anything with this class will not cause a close. - */ - closeMenuExclusionClassName?: string; }