Allow to click on elements inside a Dialog Overlay (#816)

* allow to click on elements inside a Dialog Overlay

* update changelog

Author: RobinMalfait

CHANGELOG.md

@@ -10,12 +10,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixes
 
 - Stop the event from propagating in the `Popover` component ([#798](https://github.com/tailwindlabs/headlessui/pull/798))
+- Allow to click on elements inside a `Dialog.Overlay` ([#816](https://github.com/tailwindlabs/headlessui/pull/816))
 
 ## [Unreleased - Vue]
 
 ### Fixes
 
 - Stop the event from propagating in the `Popover` component ([#798](https://github.com/tailwindlabs/headlessui/pull/798))
+- Allow to click on elements inside a `DialogOverlay` ([#816](https://github.com/tailwindlabs/headlessui/pull/816))
 
 ## [@headlessui/react@v1.4.1] - 2021-08-30
 

packages/@headlessui-react/src/components/dialog/dialog.test.tsx

@@ -552,6 +552,42 @@ describe('Mouse interactions', () => {
     })
   )
 
+  it(
+    'should not close the Dialog when clicking on contents of the Dialog.Overlay',
+    suppressConsoleLogs(async () => {
+      function Example() {
+        let [isOpen, setIsOpen] = useState(false)
+        return (
+          <>
+            <button id="trigger" onClick={() => setIsOpen(v => !v)}>
+              Trigger
+            </button>
+            <Dialog open={isOpen} onClose={setIsOpen}>
+              <Dialog.Overlay>
+                <button>hi</button>
+              </Dialog.Overlay>
+              Contents
+              <TabSentinel />
+            </Dialog>
+          </>
+        )
+      }
+      render(<Example />)
+
+      // Open dialog
+      await click(document.getElementById('trigger'))
+
+      // Verify it is open
+      assertDialog({ state: DialogState.Visible })
+
+      // Click on an element inside the overlay
+      await click(getByText('hi'))
+
+      // Verify it is still open
+      assertDialog({ state: DialogState.Visible })
+    })
+  )
+
   it(
     'should be possible to close the dialog, and re-focus the button when we click outside on the body element',
     suppressConsoleLogs(async () => {

packages/@headlessui-react/src/components/dialog/dialog.tsx

@@ -355,6 +355,7 @@ let Overlay = forwardRefWithAs(function Overlay<
 
   let handleClick = useCallback(
     (event: ReactMouseEvent) => {
+      if (event.target !== event.currentTarget) return
       if (isDisabledReactIssue7711(event.currentTarget)) return event.preventDefault()
       event.preventDefault()
       event.stopPropagation()

packages/@headlessui-vue/src/components/dialog/dialog.test.ts

@@ -679,6 +679,52 @@ describe('Mouse interactions', () => {
     })
   )
 
+  it(
+    'should not close the Dialog when clicking on contents of the Dialog.Overlay',
+    suppressConsoleLogs(async () => {
+      renderTemplate({
+        template: `
+          <div>
+            <button id="trigger" @click="toggleOpen">
+              Trigger
+            </button>
+            <Dialog :open="isOpen" @close="setIsOpen">
+              <DialogOverlay>
+                <button>hi</button>
+              </DialogOverlay>
+              Contents
+              <TabSentinel />
+            </Dialog>
+          </div>
+        `,
+        setup() {
+          let isOpen = ref(false)
+          return {
+            isOpen,
+            setIsOpen(value: boolean) {
+              isOpen.value = value
+            },
+            toggleOpen() {
+              isOpen.value = !isOpen.value
+            },
+          }
+        },
+      })
+
+      // Open dialog
+      await click(document.getElementById('trigger'))
+
+      // Verify it is open
+      assertDialog({ state: DialogState.Visible })
+
+      // Click on an element inside the overlay
+      await click(getByText('hi'))
+
+      // Verify it is still open
+      assertDialog({ state: DialogState.Visible })
+    })
+  )
+
   it(
     'should be possible to close the dialog, and re-focus the button when we click outside on the body element',
     suppressConsoleLogs(async () => {

packages/@headlessui-vue/src/components/dialog/dialog.ts

@@ -305,6 +305,7 @@ export let DialogOverlay = defineComponent({
     return {
       id,
       handleClick(event: MouseEvent) {
+        if (event.target !== event.currentTarget) return
         event.preventDefault()
         event.stopPropagation()
         api.close()