From aff438eb06f6b39da041d56d6506c0c0c9ef8646 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Tue, 9 Jan 2024 20:06:55 +0100 Subject: [PATCH] Prevent default behaviour when clicking outside of a `Dialog.Panel` (#2919) * use `event.preventDefault()` in the `useOutsideClick` on Dialog's When using a `Dialog`, we should prevent the default behaviour of the event that triggered the "close" in the `useOutsideClick` call. We recently made improvements to improve outside click behaviour on touch devices (https://github.com/tailwindlabs/headlessui/pull/2572) but due to the `touchend` event, the touch is still forwarded and therefore a potential button _behind_ the "backdrop" will also be clicked. This is not what we want. Added the `event.preventDefault()` for the Dialog specifically because there are other places where we use `useOutsideClick` and where we _do_ want the behaviour where the click just continues. A concrete example of this is 2 `Menu`'s next to eachother where you open the first one, and then click on the second one. This should close first one (outside click) and open the second one (by not preventing the event) * update changelog --- packages/@headlessui-react/CHANGELOG.md | 1 + .../@headlessui-react/src/components/dialog/dialog.tsx | 9 ++++++++- packages/@headlessui-vue/CHANGELOG.md | 1 + packages/@headlessui-vue/src/components/dialog/dialog.ts | 3 ++- 4 files changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md index 1b7359e..1d63568 100644 --- a/packages/@headlessui-react/CHANGELOG.md +++ b/packages/@headlessui-react/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed - Expose `disabled` state on `` component ([#2918](https://github.com/tailwindlabs/headlessui/pull/2918)) +- Prevent default behaviour when clicking outside of a `Dialog.Panel` ([#2919](https://github.com/tailwindlabs/headlessui/pull/2919)) ## [2.0.0-alpha.4] - 2024-01-03 diff --git a/packages/@headlessui-react/src/components/dialog/dialog.tsx b/packages/@headlessui-react/src/components/dialog/dialog.tsx index 3d3374c..d8f4472 100644 --- a/packages/@headlessui-react/src/components/dialog/dialog.tsx +++ b/packages/@headlessui-react/src/components/dialog/dialog.tsx @@ -305,7 +305,14 @@ function DialogFn( if (hasNestedDialogs) return false return true })() - useOutsideClick(resolveRootContainers, close, outsideClickEnabled) + useOutsideClick( + resolveRootContainers, + (event) => { + event.preventDefault() + close() + }, + outsideClickEnabled + ) // Handle `Escape` to close let escapeToCloseEnabled = (() => { diff --git a/packages/@headlessui-vue/CHANGELOG.md b/packages/@headlessui-vue/CHANGELOG.md index 5ac8cff..278a69d 100644 --- a/packages/@headlessui-vue/CHANGELOG.md +++ b/packages/@headlessui-vue/CHANGELOG.md @@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed - Expose `disabled` state on `` component ([#2918](https://github.com/tailwindlabs/headlessui/pull/2918)) +- Prevent default behaviour when clicking outside of a `DialogPanel` ([#2919](https://github.com/tailwindlabs/headlessui/pull/2919)) ## [1.7.17] - 2024-01-08 diff --git a/packages/@headlessui-vue/src/components/dialog/dialog.ts b/packages/@headlessui-vue/src/components/dialog/dialog.ts index 564c521..f63e597 100644 --- a/packages/@headlessui-vue/src/components/dialog/dialog.ts +++ b/packages/@headlessui-vue/src/components/dialog/dialog.ts @@ -237,7 +237,8 @@ export let Dialog = defineComponent({ }) useOutsideClick( resolveRootContainers, - (_event, target) => { + (event, target) => { + event.preventDefault() api.close() nextTick(() => target?.focus()) },