refactor: update date-picker Escape logic to stop propagation (#10477)

Author: web-padawan

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

@@ -889,11 +889,11 @@ export const DatePickerMixin = (subclass) =>
     }
 
     /** @protected */
-    _onOverlayEscapePress() {
+    _onOverlayEscapePress(event) {
+      event.stopPropagation();
       this._focusedDate = this._selectedDate;
-      this._closedByEscape = true;
+      this._applyInputValue(this._selectedDate);
       this._close();
-      this._closedByEscape = false;
     }
 
     /** @protected */
@@ -984,9 +984,6 @@ export const DatePickerMixin = (subclass) =>
       }
       window.removeEventListener('scroll', this._boundOnScroll, true);
 
-      if (this._closedByEscape) {
-        this._applyInputValue(this._selectedDate);
-      }
       this.__commitParsedOrFocusedDate();
 
       if (this.inputElement && this.inputElement.selectionStart) {
@@ -1163,8 +1160,8 @@ export const DatePickerMixin = (subclass) =>
      * @override
      */
     _onEscape(event) {
-      // Closing overlay is handled in vaadin-overlay-escape-press event listener.
       if (this.opened) {
+        this._onOverlayEscapePress(event);
         return;
       }
 

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

@@ -227,7 +227,6 @@ class DatePicker extends DatePickerMixin(
         theme="${ifDefined(this._theme)}"
         .opened="${this.opened}"
         @opened-changed="${this._onOpenedChanged}"
-        @vaadin-overlay-escape-press="${this._onOverlayEscapePress}"
         @vaadin-overlay-open="${this._onOverlayOpened}"
         @vaadin-overlay-close="${this._onVaadinOverlayClose}"
         @vaadin-overlay-closing="${this._onOverlayClosed}"

packages/date-picker/test/keyboard-input.test.js

@@ -1,6 +1,6 @@
 import { expect } from '@vaadin/chai-plugins';
 import { sendKeys } from '@vaadin/test-runner-commands';
-import { aTimeout, enter, fixtureSync, nextRender, tap } from '@vaadin/testing-helpers';
+import { aTimeout, enter, fixtureSync, keyboardEventFor, nextRender, tap } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import '../src/vaadin-date-picker.js';
 import { formatISODate, getAdjustedYear, parseDate } from '../src/vaadin-date-picker-helper.js';
@@ -334,6 +334,13 @@ describe('keyboard', () => {
         await sendKeys({ press: 'Escape' });
         expect(document.activeElement).to.equal(input);
       });
+
+      it('should stop propagation on Esc when closing overlay', () => {
+        const event = keyboardEventFor('keydown', 27, [], 'Escape');
+        const spy = sinon.spy(event, 'stopPropagation');
+        datePicker.inputElement.dispatchEvent(event);
+        expect(spy.calledOnce).to.be.true;
+      });
     });
   });