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

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>

Author: vaadin-bot

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

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