From 201ff4efc579773624374bff4bf2ad33c226da8d Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 18 Jul 2023 12:37:52 -0400
Subject: [PATCH] fix escape key in dialog/drawer; closes #1457

---
 docs/pages/resources/changelog.md | 1 +
 src/components/dialog/dialog.ts   | 2 +-
 src/components/drawer/drawer.ts   | 4 ++--
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md
index 00ca8b2e4..e979cf84e 100644
--- a/docs/pages/resources/changelog.md
+++ b/docs/pages/resources/changelog.md
@@ -24,6 +24,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 - Fixed a bug in `<sl-carousel>` that caused navigation to work incorrectly in some case [#1420]
 - Fixed a number of slots that incorrectly had aria- and/or role attributes directly on them [#1422]
 - Fixed a bug in `<sl-tree>` that caused focus to be stolen when removing focused tree items [#1430]
+- Fixed a bug in `<sl-dialog>` and `<sl-drawer>` that caused nested modals to respond too eagerly to the [[Esc]] key [#1457]
 - Updated ESLint and related plugins to the latest versions
 
 ## 2.5.2
diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts
index efa5672d2..c7c26ecc1 100644
--- a/src/components/dialog/dialog.ts
+++ b/src/components/dialog/dialog.ts
@@ -132,7 +132,7 @@ export default class SlDialog extends ShoelaceElement {
   }
 
   private handleDocumentKeyDown = (event: KeyboardEvent) => {
-    if (this.open && event.key === 'Escape') {
+    if (event.key === 'Escape' && this.modal.isActive() && this.open) {
       event.stopPropagation();
       this.requestClose('keyboard');
     }
diff --git a/src/components/drawer/drawer.ts b/src/components/drawer/drawer.ts
index 3971a7880..31a83f9d0 100644
--- a/src/components/drawer/drawer.ts
+++ b/src/components/drawer/drawer.ts
@@ -151,8 +151,8 @@ export default class SlDrawer extends ShoelaceElement {
   }
 
   private handleDocumentKeyDown = (event: KeyboardEvent) => {
-    if (this.open && !this.contained && event.key === 'Escape') {
-      event.stopPropagation();
+    if (event.key === 'Escape' && this.modal.isActive() && this.open && !this.contained) {
+      event.stopImmediatePropagation();
       this.requestClose('keyboard');
     }
   };