From cddcd2981da02d33ed267178315354f169916514 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 28 Apr 2021 10:18:39 +0200 Subject: [PATCH 1/2] 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 523d950..afc146b 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 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() }, From f385499cbda24e24d8e0cad975ae4252ff67e20e Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 28 Apr 2021 10:28:19 +0200 Subject: [PATCH 2/2] fix v-model typescript error (#461) * fix v-model typescript error * update changelog Fixes: #368 Fixes: #457 Closes: #459 Co-authored-by: Andrea Nanni --- CHANGELOG.md | 1 + packages/@headlessui-vue/src/components/listbox/listbox.ts | 4 ++-- packages/@headlessui-vue/src/components/switch/switch.ts | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index afc146b..e8b7c4d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### 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-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 }, },