refactor: update select Escape logic to stop propagation (#10482)

Author: web-padawan

packages/select/src/vaadin-select-base-mixin.js

@@ -324,6 +324,21 @@ export const SelectBaseMixin = (superClass) =>
       this.opened = !this.readonly;
     }
 
+    /**
+     * Override an event listener from `KeyboardMixin`
+     * stop propagation when closing overlay on Escape.
+     *
+     * @param {!KeyboardEvent} event
+     * @protected
+     * @override
+     */
+    _onEscape(event) {
+      if (this.opened) {
+        event.stopPropagation();
+        this.opened = false;
+      }
+    }
+
     /** @private */
     _onToggleMouseDown(event) {
       // Prevent mousedown event to avoid blur and preserve focused state
@@ -343,6 +358,8 @@ export const SelectBaseMixin = (superClass) =>
      * @override
      */
     _onKeyDown(e) {
+      super._onKeyDown(e);
+
       if (e.target === this.focusElement && !this.readonly && !this.disabled && !this.opened) {
         if (/^(Enter|SpaceBar|\s|ArrowDown|Down|ArrowUp|Up)$/u.test(e.key)) {
           e.preventDefault();

packages/select/test/keyboard.test.js

@@ -1,6 +1,6 @@
 import { expect } from '@vaadin/chai-plugins';
 import { resetMouse, sendKeys, sendMouseToElement } from '@vaadin/test-runner-commands';
-import { aTimeout, fixtureSync, nextRender, nextUpdate } from '@vaadin/testing-helpers';
+import { aTimeout, fixtureSync, keyboardEventFor, nextRender, nextUpdate } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import './not-animated-styles.js';
 import '../src/vaadin-select.js';
@@ -111,6 +111,18 @@ describe('keyboard', () => {
       expect(select.hasAttribute('focus-ring')).to.be.true;
       expect(valueButton.hasAttribute('focus-ring')).to.be.true;
     });
+
+    it('should stop propagation on Esc when closing overlay', async () => {
+      await sendKeys({ press: 'Tab' });
+
+      await sendKeys({ press: 'Enter' });
+      await nextRender();
+
+      const event = keyboardEventFor('keydown', 27, [], 'Escape');
+      const spy = sinon.spy(event, 'stopPropagation');
+      menu.dispatchEvent(event);
+      expect(spy.calledOnce).to.be.true;
+    });
   });
 
   describe('selection', () => {