fix clicks and form submissions in Dialog component (#460)

* fix clicks and form submissions in Dialog component Fixes: #451 * update changelog
tailwindlabs · Apr 28, 2021 · df9d439 · df9d439
1 parent d412952
commit df9d439
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -236,7 +236,6 @@ export let Dialog = defineComponent({
       titleId,
       describedby,
       handleClick(event: MouseEvent) {
-        event.preventDefault()
         event.stopPropagation()
       },