fix: prevent input blur on calendar icon click (#3398) (#3400)

Co-authored-by: Diego Cardoso <diego@vaadin.com>
vaadin · Feb 7, 2022 · 6a43be4 · 6a43be4
1 parent c3d67dc
commit 6a43be4
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/packages/date-picker/src/vaadin-date-picker.js b/packages/date-picker/src/vaadin-date-picker.js
@@ -214,6 +214,9 @@ class DatePicker extends DatePickerMixin(
       })
     );
     this.addController(new LabelledInputController(this.inputElement, this._labelController));
+
+    const toggleButton = this.shadowRoot.querySelector('[part="toggle-button"]');
+    toggleButton.addEventListener('mousedown', (e) => e.preventDefault());
   }
 
   /** @private */

diff --git a/packages/date-picker/test/basic.test.js b/packages/date-picker/test/basic.test.js
@@ -71,6 +71,13 @@ describe('basic features', () => {
     expect(datepicker.hasAttribute('focused')).to.be.true;
   });
 
+  it('should not blur when toggle button is clicked', async () => {
+    const e = new CustomEvent('mousedown', { bubbles: true });
+    const spy = sinon.spy(e, 'preventDefault');
+    toggleButton.dispatchEvent(e);
+    expect(spy.calledOnce).to.be.true;
+  });
+
   it('should have focused attribute when closed and focused', async () => {
     datepicker.focus();
     await sendKeys({ press: 'ArrowDown' });