diff --git a/CHANGELOG.md b/CHANGELOG.md
index 523d950..e8b7c4d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,11 +7,16 @@ 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))
+- Fix TypeScript types for `Listbox` and `Switch` ([#459](https://github.com/tailwindlabs/headlessui/pull/459), [#461](https://github.com/tailwindlabs/headlessui/pull/461))
## [@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 fdb30bc..a2178e7 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 fb476b4..d898d62 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 9f09269..d490cad 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 2466eb6..25b9c96 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()
},
diff --git a/packages/@headlessui-vue/src/components/listbox/listbox.ts b/packages/@headlessui-vue/src/components/listbox/listbox.ts
index 80935e7..ef1db2c 100644
--- a/packages/@headlessui-vue/src/components/listbox/listbox.ts
+++ b/packages/@headlessui-vue/src/components/listbox/listbox.ts
@@ -78,7 +78,7 @@ export let Listbox = defineComponent({
props: {
as: { type: [Object, String], default: 'template' },
disabled: { type: [Boolean], default: false },
- modelValue: { type: [Object, String, Number, Boolean], default: null },
+ modelValue: { type: [Object, String, Number, Boolean] },
},
setup(props, { slots, attrs, emit }) {
let { modelValue, disabled, ...passThroughProps } = props
@@ -445,7 +445,7 @@ export let ListboxOption = defineComponent({
name: 'ListboxOption',
props: {
as: { type: [Object, String], default: 'li' },
- value: { type: [Object, String], default: null },
+ value: { type: [Object, String] },
disabled: { type: Boolean, default: false },
class: { type: [String, Function], required: false },
className: { type: [String, Function], required: false },
diff --git a/packages/@headlessui-vue/src/components/switch/switch.ts b/packages/@headlessui-vue/src/components/switch/switch.ts
index 8304be0..6eb0f17 100644
--- a/packages/@headlessui-vue/src/components/switch/switch.ts
+++ b/packages/@headlessui-vue/src/components/switch/switch.ts
@@ -61,7 +61,7 @@ export let Switch = defineComponent({
emits: ['update:modelValue'],
props: {
as: { type: [Object, String], default: 'button' },
- modelValue: { type: [Object, Boolean], default: null },
+ modelValue: { type: Boolean, default: false },
class: { type: [String, Function], required: false },
className: { type: [String, Function], required: false },
},