fix escape key in dialog/drawer; closes #1457

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

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');
     }

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');
     }
   };