Merge d831be3 into d1b48bc

primer · Sep 19, 2024 · 6453f27 · 6453f27
2 parents d1b48bc + d831be3
commit 6453f27
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/.changeset/eighty-houses-beg.md b/.changeset/eighty-houses-beg.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+fix(Dialog): track mousedown event to prevent accidental closing
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}