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

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

* Create eighty-houses-beg.md

* test(Dialog): add test for accidental closure behavior

* test(Dialog): remove unused var

Author: francinelucca

.changeset/eighty-houses-beg.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+fix(Dialog): track mousedown event to prevent accidental closing

packages/react/src/Dialog/Dialog.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {render, waitFor} from '@testing-library/react'
+import {fireEvent, render, waitFor} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import {Dialog} from './Dialog'
 import MatchMediaMock from 'jest-matchmedia-mock'
@@ -85,6 +85,24 @@ describe('Dialog', () => {
     expect(onClose).toHaveBeenCalledWith('escape')
   })
 
+  it('does not call `onClose` when click was not originated from backdrop', async () => {
+    const onClose = jest.fn()
+
+    const {getByRole} = render(<Dialog onClose={onClose}>Pay attention to me</Dialog>)
+
+    expect(onClose).not.toHaveBeenCalled()
+
+    const dialog = getByRole('dialog')
+    const backdrop = dialog.parentElement!
+
+    fireEvent.mouseDown(dialog)
+    fireEvent.mouseUp(backdrop)
+    // trigger the click on the backdrop, mouseUp doesn't do it for us
+    fireEvent.click(backdrop)
+
+    expect(onClose).not.toHaveBeenCalled()
+  })
+
   it('calls `onClose` when keying "Escape"', async () => {
     const user = userEvent.setup()
     const onClose = jest.fn()

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}