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

…7577)
vaadin · Jul 24, 2024 · f9d69fa · f9d69fa
1 parent ecbfb87
commit f9d69fa
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 2 deletions.
diff --git 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';
@@ -448,7 +449,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
@@ -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', () => {