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 (
+
+ )
+ }
+ render()
+
+ // 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: `
+
+ `,
+ 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()
},