fix: use preventDefault for handling MDL escape press (#10169) (#10180)

vaadin-bot · web-padawan · web-flow · commit 630d7db9fddc · 2025-09-16T10:04:54.000+03:00
Co-authored-by: Serhii Kulykov &lt;iamkulykov@gmail.com&gt;
diff --git a/packages/master-detail-layout/src/vaadin-master-detail-layout.js b/packages/master-detail-layout/src/vaadin-master-detail-layout.js
@@ -441,9 +441,9 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
 
   /** @private */
   __onDetailKeydown(event) {
-    if (event.key === 'Escape') {
+    if (event.key === 'Escape' && !event.defaultPrevented) {
       // Prevent firing on parent layout when using nested layouts
-      event.stopPropagation();
+      event.preventDefault();
       this.dispatchEvent(new CustomEvent('detail-escape-press'));
     }
   }
diff --git a/packages/master-detail-layout/test/events.test.js b/packages/master-detail-layout/test/events.test.js
@@ -95,6 +95,26 @@ describe('events', () => {
 
         expect(spy).to.be.calledOnce;
       });
+
+      it('should call preventDefault on keydown event on pressing Escape', async () => {
+        const spy = sinon.spy();
+        layout.addEventListener('keydown', spy);
+
+        focusable.focus();
+        await sendKeys({ press: 'Escape' });
+
+        expect(spy.firstCall.args[0].defaultPrevented).to.be.true;
+      });
+
+      it('should not call stopPropagation on keydown event on pressing Escape', async () => {
+        const spy = sinon.spy();
+        document.addEventListener('keydown', spy, { once: true });
+
+        focusable.focus();
+        await sendKeys({ press: 'Escape' });
+
+        expect(spy.calledOnce).to.be.true;
+      });
     });
   });
 
