fix: allow focusing date-picker input using keyboard on fullscreen (#…

…7577) (#7581)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>

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';
@@ -448,7 +449,7 @@ export const DatePickerMixin = (subclass) =>
  _onFocus(event) {
  super._onFocus(event);
 
- if (this._noInput) {
+ if (this._noInput && !isKeyboardActive()) {
  event.target.blur();
  }
  }

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', () => {