fix backdrop click on polyfill

sumup-oss · Nov 29, 2024 · 5b67511 · 5b67511
1 parent 2d49335
commit 5b67511
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 19 deletions.
diff --git a/packages/circuit-ui/components/Dialog/Dialog.module.css b/packages/circuit-ui/components/Dialog/Dialog.module.css
@@ -4,7 +4,6 @@
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: var(--internal-dialog-z-index);
   padding: 0;
   margin: auto;
   overflow: scroll;

diff --git a/packages/circuit-ui/components/Dialog/Dialog.tsx b/packages/circuit-ui/components/Dialog/Dialog.tsx
@@ -26,7 +26,6 @@ import {
 } from 'react';
 
 import { CloseButton } from '../CloseButton/index.js';
-import { useStackContext } from '../StackContext/index.js';
 import dialogPolyfill from '../../vendor/dialog-polyfill/index.js';
 import { applyMultipleRefs } from '../../util/refs.js';
 import { clsx } from '../../styles/clsx.js';
@@ -67,6 +66,8 @@ export const Dialog = forwardRef<HTMLDialogElement, DialogProps>(
     },
     ref,
   ) => {
+    const dialogRef = useRef<HTMLDialogElement>(null);
+    const lastFocusedElementRef = useRef<HTMLElement | null>(null);
     // TODO add translated default close label
     if (process.env.NODE_ENV !== 'production') {
       if (!isSufficientlyLabelled(closeButtonLabel)) {
@@ -76,14 +77,6 @@ export const Dialog = forwardRef<HTMLDialogElement, DialogProps>(
         );
       }
     }
-
-    const dialogRef = useRef<HTMLDialogElement>(null);
-    const lastFocusedElementRef = useRef<HTMLElement | null>(null);
-    // not sure if necessary:
-    // polyfill injects its own z-index values
-    // native dialog does not need z-index (top layer)
-    const zIndex = useStackContext();
-
     const hasNativeDialog = 'HTMLDialogElement' in window;
 
     useEffect(() => {
@@ -181,13 +174,11 @@ export const Dialog = forwardRef<HTMLDialogElement, DialogProps>(
           dialogElement.close();
         }
       };
-    }, [open, isModal]);
+    }, [open, isModal, handleDialogClose, hasNativeDialog]);
 
-    const onDialogClick = (e: ClickEvent<HTMLDialogElement>) => {
-      if (!hasNativeDialog) {
-        // TODO try to make this work with polyfill
-        return;
-      }
+    const onDialogClick = (
+      e: ClickEvent<HTMLDialogElement> | ClickEvent<HTMLDivElement>,
+    ) => {
       if (isModal && e.target === e.currentTarget) {
         handleDialogClose();
       }
@@ -197,9 +188,6 @@ export const Dialog = forwardRef<HTMLDialogElement, DialogProps>(
       <>
         {/* eslint-disable-next-line  jsx-a11y/no-noninteractive-element-interactions */}
         <dialog
-          style={{
-            '--internal-dialog-z-index': zIndex ?? 'var(--cui-z-index-modal)',
-          }}
           onClick={onDialogClick}
           ref={applyMultipleRefs(ref, dialogRef)}
           className={clsx(