huanld/headlessui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ignore Escape when event got prevented in Dialog component (#1424)

Browse Source 
* 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.

* update changelog
This commit is contained in:
Robin Malfait
2022-05-09 15:07:57 +02:00
committed by GitHub
parent c4e35f3879
commit c494fa36e9
3 changed files with 4 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+2
View File
@@ -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
packages/@headlessui-react/src/components/dialog/dialog.tsx
+1
View File
@@ -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
packages/@headlessui-vue/src/components/dialog/dialog.ts
+1
View File
@@ -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