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 }, },