From 21a8bdb98f2776028ccf8f80e54b074c5c8ea69e Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 9 May 2022 15:02:33 +0200 Subject: [PATCH 1/2] ignore `Escape` when event got prevented Some external libraries only use `event.preventDefault()` and not `event.stopPropagation()`. This means that the Dialog can still receive an `Escape` keydown event which closes the Dialog. We can also think about the `Escape` behaviour inside the modal as the "default behaviour" once the Dialog is open. Therefore, we can also check the `event.defaultPrevented` and ignore this event when this is the case. --- packages/@headlessui-react/src/components/dialog/dialog.tsx | 1 + packages/@headlessui-vue/src/components/dialog/dialog.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/@headlessui-react/src/components/dialog/dialog.tsx b/packages/@headlessui-react/src/components/dialog/dialog.tsx index f5d7424a2d..d7968be08b 100644 --- a/packages/@headlessui-react/src/components/dialog/dialog.tsx +++ b/packages/@headlessui-react/src/components/dialog/dialog.tsx @@ -237,6 +237,7 @@ let DialogRoot = forwardRefWithAs(function Dialog< // Handle `Escape` to close useEventListener(ownerDocument?.defaultView, 'keydown', (event) => { + if (event.defaultPrevented) return if (event.key !== Keys.Escape) return if (dialogState !== DialogStates.Open) return if (hasNestedDialogs) return diff --git a/packages/@headlessui-vue/src/components/dialog/dialog.ts b/packages/@headlessui-vue/src/components/dialog/dialog.ts index 56dce24e76..b02897b5da 100644 --- a/packages/@headlessui-vue/src/components/dialog/dialog.ts +++ b/packages/@headlessui-vue/src/components/dialog/dialog.ts @@ -212,6 +212,7 @@ export let Dialog = defineComponent({ // Handle `Escape` to close useEventListener(ownerDocument.value?.defaultView, 'keydown', (event) => { + if (event.defaultPrevented) return if (event.key !== Keys.Escape) return if (dialogState.value !== DialogStates.Open) return if (hasNestedDialogs.value) return From 64d5a64e3cb3c93ca256d1d745c14f5e30b93062 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 9 May 2022 15:04:45 +0200 Subject: [PATCH 2/2] update changelog --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index cc180a63a0..1ba4252c43 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,12 +10,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed - Ensure `DialogPanel` exposes its ref ([#1404](https://github.com/tailwindlabs/headlessui/pull/1404)) +- Ignore `Escape` when event got prevented in `Dialog` component ([#1424](https://github.com/tailwindlabs/headlessui/pull/1424)) ## [Unreleased - @headlessui/react] ### Fixed - Fix closing of `Popover.Panel` in React 18 ([#1409](https://github.com/tailwindlabs/headlessui/pull/1409)) +- Ignore `Escape` when event got prevented in `Dialog` component ([#1424](https://github.com/tailwindlabs/headlessui/pull/1424)) ## [@headlessui/react@1.6.1] - 2022-05-03