fix: prevent mousedown on clear button of opened date-picker

Author: web-padawan

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

@@ -616,6 +616,24 @@ export const DatePickerMixin = (subclass) =>
       return !this._shouldKeepFocusRing;
     }
 
+    /**
+     * Override method inherited from `ClearButtonMixin`
+     * to not blur on clear button mousedown when opened
+     * so that focus remains in the input field.
+     *
+     * @param {Event} event
+     * @return {boolean}
+     * @protected
+     * @override
+     */
+    _shouldKeepFocusOnClearMousedown(event) {
+      if (this.opened) {
+        return true;
+      }
+
+      return super._shouldKeepFocusOnClearMousedown(event);
+    }
+
     /**
      * Override method inherited from `FocusMixin`
      * to prevent removing the `focused` attribute:

packages/date-picker/test/basic.test.js

@@ -362,6 +362,30 @@ describe('clear button', () => {
     click(clearButton);
     expect(datePicker.opened).to.be.not.ok;
   });
+
+  it('should not prevent default on clear button mousedown if input is not focused', () => {
+    datePicker.value = '2001-01-01';
+    const event = new CustomEvent('mousedown', { cancelable: true });
+    clearButton.dispatchEvent(event);
+    expect(event.defaultPrevented).to.be.false;
+  });
+
+  it('should prevent default on clear button mousedown if input is focused', () => {
+    datePicker.value = '2001-01-01';
+    datePicker.inputElement.focus();
+    const event = new CustomEvent('mousedown', { cancelable: true });
+    clearButton.dispatchEvent(event);
+    expect(event.defaultPrevented).to.be.true;
+  });
+
+  it('should prevent default on clear button mousedown when opened', async () => {
+    datePicker.value = '2001-01-01';
+    await open(datePicker);
+    datePicker.inputElement.blur();
+    const event = new CustomEvent('mousedown', { cancelable: true });
+    clearButton.dispatchEvent(event);
+    expect(event.defaultPrevented).to.be.true;
+  });
 });
 
 describe('initial value attribute', () => {