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<HTMLDialogElement | null>)
   // handles toggling based on state
   const { closeDialog } = useDialog(dialogElementRef as MutableRefObject<HTMLDialogElement | null>, 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
       ) {