fix!: prevent focusout when closing date-picker on outside click (#7855)

Author: web-padawan

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

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright (c) 2015 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { isElementFocusable } from '@vaadin/a11y-base/src/focus-utils.js';
+import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
+import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
+
+/**
+ * @polymerMixin
+ * @mixes OverlayMixin
+ * @mixes PositionMixin
+ */
+export const DatePickerOverlayMixin = (superClass) =>
+  class DatePickerOverlayMixin extends PositionMixin(OverlayMixin(superClass)) {
+    /**
+     * Override method inherited from `OverlayMixin` to not close on input click.
+     * Needed to ignore date-picker's own input in the mousedown listener below.
+     *
+     * @param {Event} event
+     * @return {boolean}
+     * @protected
+     */
+    _shouldCloseOnOutsideClick(event) {
+      const eventPath = event.composedPath();
+      return !eventPath.includes(this.positionTarget);
+    }
+
+    /**
+     * @protected
+     * @override
+     */
+    _mouseDownListener(event) {
+      super._mouseDownListener(event);
+
+      // Prevent global mousedown event to avoid losing focus on outside click,
+      // unless the clicked element is also focusable (e.g. in date-time-picker).
+      if (this._shouldCloseOnOutsideClick(event) && !isElementFocusable(event.composedPath()[0])) {
+        event.preventDefault();
+      }
+    }
+  };

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

@@ -6,10 +6,9 @@
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
-import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
-import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
 import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
 import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { DatePickerOverlayMixin } from './vaadin-date-picker-overlay-mixin.js';
 import { datePickerOverlayStyles } from './vaadin-date-picker-overlay-styles.js';
 
 registerStyles('vaadin-date-picker-overlay', [overlayStyles, datePickerOverlayStyles], {
@@ -21,13 +20,12 @@ registerStyles('vaadin-date-picker-overlay', [overlayStyles, datePickerOverlaySt
  *
  * @customElement
  * @extends HTMLElement
- * @mixes PositionMixin
- * @mixes OverlayMixin
+ * @mixes DatePickerOverlayMixin
  * @mixes DirMixin
  * @mixes ThemableMixin
  * @private
  */
-class DatePickerOverlay extends PositionMixin(OverlayMixin(DirMixin(ThemableMixin(PolymerElement)))) {
+class DatePickerOverlay extends DatePickerOverlayMixin(DirMixin(ThemableMixin(PolymerElement))) {
   static get is() {
     return 'vaadin-date-picker-overlay';
   }

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

@@ -7,23 +7,21 @@ import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
-import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
 import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { DatePickerOverlayMixin } from './vaadin-date-picker-overlay-mixin.js';
 import { datePickerOverlayStyles } from './vaadin-date-picker-overlay-styles.js';
 
 /**
  * An element used internally by `<vaadin-date-picker>`. Not intended to be used separately.
  *
  * @extends HTMLElement
- * @mixes PositionMixin
- * @mixes OverlayMixin
+ * @mixes DatePickerOverlayMixin
  * @mixes DirMixin
  * @mixes ThemableMixin
  * @private
  */
-class DatePickerOverlay extends PositionMixin(OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement))))) {
+class DatePickerOverlay extends DatePickerOverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
   static get is() {
     return 'vaadin-date-picker-overlay';
   }

packages/date-picker/test/dropdown.common.js

@@ -7,10 +7,9 @@ import {
   nextRender,
   nextUpdate,
   oneEvent,
-  outsideClick,
   touchstart,
 } from '@vaadin/testing-helpers';
-import { sendKeys } from '@web/test-runner-commands';
+import { resetMouse, sendKeys, sendMouse } from '@web/test-runner-commands';
 import sinon from 'sinon';
 import { getFocusedCell, monthsEqual, open, waitForOverlayRender } from './helpers.js';
 
@@ -187,19 +186,22 @@ describe('dropdown', () => {
   });
 
   describe('outside click', () => {
-    it('should restore focus to the input on outside click', async () => {
+    afterEach(async () => {
+      await resetMouse();
+    });
+
+    it('should keep focus in the input on outside mousedown', async () => {
       input.focus();
       await open(datePicker);
-      outsideClick();
-      await nextUpdate(datePicker);
-      await aTimeout(0);
+      await sendMouse({ type: 'move', position: [200, 10] });
+      await sendMouse({ type: 'down' });
       expect(document.activeElement).to.equal(input);
     });
 
     it('should focus the input on outside click', async () => {
       expect(document.activeElement).to.equal(document.body);
       await open(datePicker);
-      outsideClick();
+      await sendMouse({ type: 'click', position: [200, 10] });
       await nextUpdate(datePicker);
       await aTimeout(0);
       expect(document.activeElement).to.equal(input);
@@ -209,7 +211,7 @@ describe('dropdown', () => {
       // Focus the input with Tab
       await sendKeys({ press: 'Tab' });
       await open(datePicker);
-      outsideClick();
+      await sendMouse({ type: 'click', position: [200, 10] });
       await nextUpdate(datePicker);
       await aTimeout(0);
       expect(datePicker.hasAttribute('focus-ring')).to.be.true;
@@ -220,14 +222,14 @@ describe('dropdown', () => {
       input.focus();
       // Move focus to the calendar
       await sendKeys({ press: 'Tab' });
-      outsideClick();
+      await sendMouse({ type: 'click', position: [200, 10] });
       await aTimeout(0);
       expect(datePicker.hasAttribute('focus-ring')).to.be.true;
     });
 
     it('should not set focus-ring attribute if it was not set before opening', async () => {
       await open(datePicker);
-      outsideClick();
+      await sendMouse({ type: 'click', position: [200, 10] });
       await aTimeout(0);
       expect(datePicker.hasAttribute('focus-ring')).to.be.false;
     });

test/integration/grid-pro-custom-editor.test.js

@@ -1,11 +1,12 @@
 import { expect } from '@vaadin/chai-plugins';
-import { fixtureSync, nextRender } from '@vaadin/testing-helpers';
+import { fixtureSync, middleOfNode, nextRender } from '@vaadin/testing-helpers';
 import { resetMouse, sendKeys, sendMouse } from '@web/test-runner-commands';
 import '@vaadin/combo-box';
 import '@vaadin/date-picker';
 import '@vaadin/grid-pro';
 import '@vaadin/grid-pro/vaadin-grid-pro-edit-column.js';
 import '@vaadin/time-picker';
+import { waitForOverlayRender } from '@vaadin/date-picker/test/helpers.js';
 import { flushGrid, getContainerCell } from '@vaadin/grid-pro/test/helpers.js';
 
 describe('grid-pro custom editor', () => {
@@ -62,29 +63,64 @@ describe('grid-pro custom editor', () => {
   });
 
   describe('date-picker', () => {
-    it('should apply the updated date to the cell when exiting on Tab', async () => {
-      const cell = getContainerCell(grid.$.items, 0, 2);
+    let cell;
+
+    beforeEach(async () => {
+      cell = getContainerCell(grid.$.items, 0, 2);
       cell.focus();
 
       await sendKeys({ press: 'Enter' });
+    });
 
+    it('should apply the updated date to the cell when exiting on Tab', async () => {
       await sendKeys({ type: '1/12/1984' });
       await sendKeys({ press: 'Tab' });
 
       expect(cell._content.textContent).to.equal('1984-01-12');
     });
 
     it('should apply the updated date to the cell when exiting on Enter', async () => {
-      const cell = getContainerCell(grid.$.items, 0, 2);
-      cell.focus();
-
-      await sendKeys({ press: 'Enter' });
-
       await sendKeys({ type: '1/12/1984' });
       await sendKeys({ press: 'Enter' });
 
       expect(cell._content.textContent).to.equal('1984-01-12');
     });
+
+    it('should not stop editing on input click when focus is in the overlay', async () => {
+      // Open the overlay
+      await sendKeys({ press: 'ArrowDown' });
+
+      const { x, y } = middleOfNode(cell._content.querySelector('input'));
+      await sendMouse({ type: 'click', position: [Math.floor(x), Math.floor(y)] });
+
+      expect(cell._content.querySelector('vaadin-date-picker')).to.be.ok;
+    });
+
+    it('should stop editing and update value when closing on outside click', async () => {
+      // Open the overlay
+      await sendKeys({ press: 'ArrowDown' });
+      await waitForOverlayRender();
+
+      // Move focus back to the input
+      await sendKeys({ down: 'Shift' });
+      await sendKeys({ press: 'Tab' });
+      await sendKeys({ up: 'Shift' });
+
+      // Change single digit to avoid calendar scroll
+      const input = cell._content.querySelector('input');
+      input.setSelectionRange(3, 4);
+
+      await sendKeys({ type: '2' });
+
+      await sendMouse({ type: 'click', position: [10, 10] });
+      await nextRender();
+
+      // TODO: closing occurs in `vaadin-overlay-outside-click` listener added on global `focusin`
+      // in grid-pro. Consider replacing it with `_shouldRemoveFocus()` check on editor `focusout`
+      // so that we don't stop editing on outside click, to align with the combo-box behavior.
+      expect(cell._content.querySelector('vaadin-date-picker')).to.be.not.ok;
+      expect(cell._content.textContent).to.equal('1984-01-12');
+    });
   });
 
   describe('combo-box', () => {