From fdd0557ec3f4ba00892beddfa880d39e266d40a1 Mon Sep 17 00:00:00 2001 From: Pavel Klibani Date: Mon, 23 Oct 2023 20:47:49 +0200 Subject: [PATCH] Fix(web-react): ClickOutside working with Dialog and Dropdown #DS-945 - Moved logic for modal to modal callback from useClickOutside hook --- packages/web-react/src/components/Dialog/Dialog.tsx | 2 +- packages/web-react/src/hooks/useClickOutside.ts | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/web-react/src/components/Dialog/Dialog.tsx b/packages/web-react/src/components/Dialog/Dialog.tsx index 98c1a92435..689592d052 100644 --- a/packages/web-react/src/components/Dialog/Dialog.tsx +++ b/packages/web-react/src/components/Dialog/Dialog.tsx @@ -14,7 +14,7 @@ const Dialog = (props: DialogProps, ref: ForwardedRef) // handles toggling based on state const { closeDialog } = useDialog(dialogElementRef as MutableRefObject, isOpen); const handleClickOutside = (event: Event) => { - if (closeOnBackdropClick) { + if (closeOnBackdropClick && event.target === dialogElementRef.current) { closeDialog(); onClose(event); } diff --git a/packages/web-react/src/hooks/useClickOutside.ts b/packages/web-react/src/hooks/useClickOutside.ts index 6b900dfbbd..3f501a3a1c 100644 --- a/packages/web-react/src/hooks/useClickOutside.ts +++ b/packages/web-react/src/hooks/useClickOutside.ts @@ -25,8 +25,6 @@ export const useClickOutside = ({ ref, callback }: UseClickOutsideProps): void = // and the use the not clicked into the container, // e. g. the user clicked outside of the Dialog (click on backdrop) !ref.current.contains(event?.target as Node) && - // and when the click was triggered inside of the element's parent - ref.current.parentNode?.contains(event?.target as Node) && // and callback should exits, of course callback ) {