diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
index 1b7359e1c0..1d63568701 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 3d3374c8cf..d8f44721f8 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 5ac8cff7d3..278a69d020 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 564c521f6f..f63e59755e 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())
},