From df9d439346e809362f8b077e58aab797bdcb396e Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Wed, 28 Apr 2021 10:18:39 +0200
Subject: [PATCH] fix clicks and form submissions in Dialog component (#460)

* fix clicks and form submissions in Dialog component

Fixes: #451

* update changelog
---
 CHANGELOG.md                                  |  8 +++-
 .../src/components/dialog/dialog.test.tsx     | 29 +++++++++++++++
 .../src/components/dialog/dialog.tsx          |  1 -
 .../src/components/dialog/dialog.test.ts      | 37 +++++++++++++++++++
 .../src/components/dialog/dialog.ts           |  1 -
 5 files changed, 72 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 523d950f86..afc146b552 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,11 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased - React]
 
-- Nothing yet!
+### Fixes
+
+- Fix form submission within Dialog ([#460](https://github.com/tailwindlabs/headlessui/pull/460))
 
 ## [Unreleased - Vue]
 
-- Nothing yet!
+### Fixes
+
+- Fix form submission within Dialog ([#460](https://github.com/tailwindlabs/headlessui/pull/460))
 
 ## [@headlessui/react@v1.1.0] - 2021-04-26
 
diff --git a/packages/@headlessui-react/src/components/dialog/dialog.test.tsx b/packages/@headlessui-react/src/components/dialog/dialog.test.tsx
index fdb30bc4eb..a2178e7293 100644
--- a/packages/@headlessui-react/src/components/dialog/dialog.test.tsx
+++ b/packages/@headlessui-react/src/components/dialog/dialog.test.tsx
@@ -533,6 +533,35 @@ describe('Mouse interactions', () => {
     })
   )
 
+  it(
+    'should be possible to submit a form inside a Dialog',
+    suppressConsoleLogs(async () => {
+      let submitFn = jest.fn()
+      function Example() {
+        let [isOpen, setIsOpen] = useState(true)
+        return (
+          <Dialog open={isOpen} onClose={setIsOpen}>
+            <form onSubmit={submitFn}>
+              <input type="hidden" value="abc" />
+              <button type="submit">Submit</button>
+            </form>
+            <TabSentinel />
+          </Dialog>
+        )
+      }
+      render(<Example />)
+
+      // Verify it is open
+      assertDialog({ state: DialogState.Visible })
+
+      // Submit the form
+      await click(getByText('Submit'))
+
+      // Verify that the submitFn function has been called
+      expect(submitFn).toHaveBeenCalledTimes(1)
+    })
+  )
+
   it(
     'should stop propagating click events when clicking on an element inside the Dialog',
     suppressConsoleLogs(async () => {
diff --git a/packages/@headlessui-react/src/components/dialog/dialog.tsx b/packages/@headlessui-react/src/components/dialog/dialog.tsx
index fb476b4623..d898d62fe8 100644
--- a/packages/@headlessui-react/src/components/dialog/dialog.tsx
+++ b/packages/@headlessui-react/src/components/dialog/dialog.tsx
@@ -244,7 +244,6 @@ let DialogRoot = forwardRefWithAs(function Dialog<
     'aria-labelledby': state.titleId,
     'aria-describedby': describedby,
     onClick(event: ReactMouseEvent) {
-      event.preventDefault()
       event.stopPropagation()
     },
 
diff --git a/packages/@headlessui-vue/src/components/dialog/dialog.test.ts b/packages/@headlessui-vue/src/components/dialog/dialog.test.ts
index 9f092696c1..d490cad85a 100644
--- a/packages/@headlessui-vue/src/components/dialog/dialog.test.ts
+++ b/packages/@headlessui-vue/src/components/dialog/dialog.test.ts
@@ -652,6 +652,43 @@ describe('Mouse interactions', () => {
     })
   )
 
+  it(
+    'should be possible to submit a form inside a Dialog',
+    suppressConsoleLogs(async () => {
+      let submitFn = jest.fn()
+      renderTemplate({
+        template: `
+          <Dialog v-if="true" :open="isOpen" @close="setIsOpen">
+            <form @submit.prevent="submitFn">
+              <input type="hidden" value="abc" />
+              <button type="submit">Submit</button>
+            </form>
+            <TabSentinel />
+          </Dialog>
+        `,
+        setup() {
+          let isOpen = ref(true)
+          return {
+            isOpen,
+            submitFn,
+            setIsOpen(value: boolean) {
+              isOpen.value = value
+            },
+          }
+        },
+      })
+
+      // Verify it is open
+      assertDialog({ state: DialogState.Visible })
+
+      // Submit the form
+      await click(getByText('Submit'))
+
+      // Verify that the submitFn function has been called
+      expect(submitFn).toHaveBeenCalledTimes(1)
+    })
+  )
+
   it(
     'should stop propagating click events when clicking on an element inside the Dialog',
     suppressConsoleLogs(async () => {
diff --git a/packages/@headlessui-vue/src/components/dialog/dialog.ts b/packages/@headlessui-vue/src/components/dialog/dialog.ts
index 2466eb636c..25b9c9686f 100644
--- a/packages/@headlessui-vue/src/components/dialog/dialog.ts
+++ b/packages/@headlessui-vue/src/components/dialog/dialog.ts
@@ -236,7 +236,6 @@ export let Dialog = defineComponent({
       titleId,
       describedby,
       handleClick(event: MouseEvent) {
-        event.preventDefault()
         event.stopPropagation()
       },