From a9f778f5999bff370683573a9d25aac08c9f5d2b Mon Sep 17 00:00:00 2001
From: Vaadin Bot <vaadin-bot@users.noreply.github.com>
Date: Wed, 24 Jul 2024 12:11:54 +0200
Subject: [PATCH] fix: allow focusing date-picker input using keyboard on
 fullscreen (#7577) (#7580)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
---
 .../src/vaadin-date-picker-mixin.js           |  3 ++-
 .../date-picker/test/fullscreen.common.js     | 26 ++++++++++++++++++-
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/packages/date-picker/src/vaadin-date-picker-mixin.js b/packages/date-picker/src/vaadin-date-picker-mixin.js
index 6cbae64d6e..3205b47c98 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', () => {