From 6a43be4fb486cfeddec9f1388b395f49c383e907 Mon Sep 17 00:00:00 2001 From: Serhii Kulykov Date: Mon, 7 Feb 2022 10:50:40 +0200 Subject: [PATCH] fix: prevent input blur on calendar icon click (#3398) (#3400) Co-authored-by: Diego Cardoso --- packages/date-picker/src/vaadin-date-picker.js | 3 +++ packages/date-picker/test/basic.test.js | 7 +++++++ 2 files changed, 10 insertions(+) diff --git a/packages/date-picker/src/vaadin-date-picker.js b/packages/date-picker/src/vaadin-date-picker.js index d169ea706a7..32ce9db01f1 100644 --- 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 index 9a1100307b6..64c1d3d89d0 100644 --- 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' });