diff --git a/packages/date-picker/src/vaadin-date-picker-mixin.js b/packages/date-picker/src/vaadin-date-picker-mixin.js index 44edf133c1..e0a5248852 100644 --- a/packages/date-picker/src/vaadin-date-picker-mixin.js +++ b/packages/date-picker/src/vaadin-date-picker-mixin.js @@ -5,6 +5,7 @@ */ import { hideOthers } from '@vaadin/a11y-base/src/aria-hidden.js'; import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.js'; +import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js'; import { KeyboardMixin } from '@vaadin/a11y-base/src/keyboard-mixin.js'; import { isIOS } from '@vaadin/component-base/src/browser-utils.js'; import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js'; @@ -459,7 +460,7 @@ export const DatePickerMixin = (subclass) => _onFocus(event) { super._onFocus(event); - if (this._noInput) { + if (this._noInput && !isKeyboardActive()) { event.target.blur(); } } diff --git a/packages/date-picker/test/fullscreen.common.js b/packages/date-picker/test/fullscreen.common.js index 21a3160cf3..8e8105531f 100644 --- a/packages/date-picker/test/fullscreen.common.js +++ b/packages/date-picker/test/fullscreen.common.js @@ -1,5 +1,5 @@ import { expect } from '@esm-bundle/chai'; -import { fixtureSync, nextRender, nextUpdate, tap } from '@vaadin/testing-helpers'; +import { aTimeout, fixtureSync, nextRender, nextUpdate, outsideClick, tabKeyDown, tap } from '@vaadin/testing-helpers'; import { sendKeys, setViewport } from '@web/test-runner-commands'; import sinon from 'sinon'; import { getFocusedCell, open, touchTap, waitForOverlayRender } from './helpers.js'; @@ -58,6 +58,14 @@ describe('fullscreen mode', () => { expect(document.activeElement).to.not.equal(input); }); + it('should not blur input element when focusing it with keyboard', () => { + const spy = sinon.spy(input, 'blur'); + tabKeyDown(input); + input.focus(); + expect(spy.called).to.be.false; + expect(document.activeElement).to.equal(input); + }); + it('should blur input element when opening overlay', async () => { const spy = sinon.spy(input, 'blur'); await open(datePicker); @@ -70,6 +78,22 @@ describe('fullscreen mode', () => { expect(cell).to.be.instanceOf(HTMLTableCellElement); expect(cell.getAttribute('part')).to.include('today'); }); + + it('should blur input element when closing overlay on outside click', async () => { + await open(datePicker); + const spy = sinon.spy(input, 'blur'); + outsideClick(); + await aTimeout(0); + expect(spy.called).to.be.true; + }); + + it('should not blur input element when closing overlay on Esc', async () => { + await open(datePicker); + const spy = sinon.spy(input, 'blur'); + await sendKeys({ press: 'Escape' }); + await aTimeout(0); + expect(spy.called).to.be.false; + }); }); describe('auto open disabled', () => {