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 (#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

@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Make sure panels re-register when IDs are calculated in React < 18 ([#2883](https://github.com/tailwindlabs/headlessui/pull/2883))
 - Expose `disabled` state on `<Tab />` 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))
 
 ## [1.7.18] - 2024-01-08
 

packages/@headlessui-react/src/components/dialog/dialog.tsx

@@ -299,7 +299,14 @@ function DialogFn<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG>(
     if (hasNestedDialogs) return false
     return true
   })()
-  useOutsideClick(resolveRootContainers, close, outsideClickEnabled)
+  useOutsideClick(
+    resolveRootContainers,
+    (event) => {
+      event.preventDefault()
+      close()
+    },
+    outsideClickEnabled
+  )
 
   // Handle `Escape` to close
   let escapeToCloseEnabled = (() => {

packages/@headlessui-vue/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 `<Tab />` 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.19] - 2024-02-07
 

packages/@headlessui-vue/src/components/dialog/dialog.ts

@@ -238,7 +238,8 @@ export let Dialog = defineComponent({
     })
     useOutsideClick(
       resolveRootContainers,
-      (_event, target) => {
+      (event, target) => {
+        event.preventDefault()
         api.close()
         nextTick(() => target?.focus())
       },