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

@@ -14,7 +14,8 @@ 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) {
+    // check if it should be closed on backdrop click and if the click was on backdrop (dialog element, not on dialog content)
+    if (closeOnBackdropClick && event.target === dialogElementRef.current) {
       closeDialog();
       onClose(event);
     }

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
       ) {