fix: check if keydown event is prevented before closing overlay (#10360)

Author: DiegoCardoso

packages/date-picker/src/vaadin-date-picker-mixin.js

@@ -1077,10 +1077,8 @@ export const DatePickerMixin = (subclass) =>
         // The input element cannot be readonly as it would conflict with
         // the required attribute. Both are not allowed on an input element.
         // Therefore we prevent default on most keydown events.
-        const allowedKeys = [
-          9, // Tab
-        ];
-        if (allowedKeys.indexOf(e.keyCode) === -1) {
+        const allowedKeys = ['Tab', 'Escape'];
+        if (allowedKeys.indexOf(e.key) === -1) {
           e.preventDefault();
         }
       }

packages/overlay/src/vaadin-overlay-mixin.js

@@ -552,7 +552,7 @@ export const OverlayMixin = (superClass) =>
      * @private
      */
     _keydownListener(event) {
-      if (!this._last) {
+      if (!this._last || event.defaultPrevented) {
         return;
       }
 

packages/overlay/test/interactions.test.js

@@ -60,6 +60,24 @@ describe('interactions', () => {
 
       expect(overlay.opened).to.be.true;
     });
+
+    it('should not close on Esc if the keydown event was prevented', () => {
+      overlay.addEventListener('keydown', (e) => e.preventDefault());
+
+      escKeyDown(overlay);
+
+      expect(overlay.opened).to.be.true;
+    });
+
+    it('should not fire the vaadin-overlay-escape-press event if keydown was prevented', () => {
+      const spy = sinon.spy();
+      overlay.addEventListener('vaadin-overlay-escape-press', spy);
+      overlay.addEventListener('keydown', (e) => e.preventDefault());
+
+      enterKeyDown(overlay);
+
+      expect(spy.called).to.be.false;
+    });
   });
 
   describe('click', () => {

test/integration/dialog-grid.test.js

@@ -0,0 +1,50 @@
+import { expect } from '@vaadin/chai-plugins';
+import { sendKeys } from '@vaadin/test-runner-commands';
+import { fixtureSync, nextFrame, oneEvent } from '@vaadin/testing-helpers';
+import './not-animated-styles.js';
+import '@vaadin/grid';
+import '@vaadin/dialog';
+
+describe('grid in dialog', () => {
+  let dialog;
+
+  beforeEach(async () => {
+    dialog = fixtureSync('<vaadin-dialog></vaadin-dialog>');
+    dialog.renderer = (root) => {
+      root.innerHTML = '<vaadin-grid><vaadin-grid-column></vaadin-grid-column></vaadin-grid>';
+      const grid = root.firstElementChild;
+      grid.items = ['one', 'two'];
+      const column = grid.firstElementChild;
+      column.renderer = (root, _, model) => {
+        if (root.firstElementChild) {
+          return;
+        }
+        root.innerHTML = `<button>Button ${model.item}</button>`;
+      };
+    };
+    dialog.opened = true;
+    await oneEvent(dialog.$.overlay, 'vaadin-overlay-open');
+  });
+
+  afterEach(async () => {
+    dialog.opened = false;
+    await nextFrame();
+  });
+
+  describe('interaction', () => {
+    it('should not close on Esc if focus is on interactive element', async () => {
+      await sendKeys({ press: 'Tab' });
+      await sendKeys({ press: 'Enter' });
+      await sendKeys({ press: 'Escape' });
+      expect(dialog.opened).to.be.true;
+    });
+
+    it('should close on Esc if focus is back to grid cell', async () => {
+      await sendKeys({ press: 'Tab' });
+      await sendKeys({ press: 'Enter' });
+      await sendKeys({ press: 'Escape' });
+      await sendKeys({ press: 'Escape' });
+      expect(dialog.opened).to.be.false;
+    });
+  });
+});