fix(Dialog): track mousedown event to prevent accidental closing

primer · Sep 18, 2024 · b79a346 · b79a346
1 parent 04e8c9c
commit b79a346
Showing 1 changed file with 11 additions and 3 deletions.
diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx
@@ -419,14 +419,15 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
       footerButton.ref = autoFocusedFooterButtonRef
     }
   }
+  const [lastMouseDownIsBackdrop, setLastMouseDownIsBackdrop] = useState<boolean>(false)
   const defaultedProps = {...props, title, subtitle, role, dialogLabelId, dialogDescriptionId}
   const onBackdropClick = useCallback(
     (e: SyntheticEvent) => {
-      if (e.target === e.currentTarget) {
+      if (e.target === e.currentTarget && lastMouseDownIsBackdrop) {
         onClose('escape')
       }
     },
-    [onClose],
+    [onClose, lastMouseDownIsBackdrop],
   )
 
   const dialogRef = useRef<HTMLDivElement>(null)
@@ -479,7 +480,14 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
   return (
     <>
       <Portal>
-        <Backdrop ref={backdropRef} {...positionDataAttributes} onClick={onBackdropClick}>
+        <Backdrop
+          ref={backdropRef}
+          {...positionDataAttributes}
+          onClick={onBackdropClick}
+          onMouseDown={e => {
+            setLastMouseDownIsBackdrop(e.target === e.currentTarget)
+          }}
+        >
           <StyledDialog
             width={width}
             height={height}