fix(date-range-picker): focus on arrow-up/escape for single input (#1783)

Author: ddaribo

src/components/date-range-picker/date-range-picker-single.spec.ts

@@ -8,7 +8,12 @@ import {
 import { spy } from 'sinon';
 import IgcCalendarComponent from '../calendar/calendar.js';
 import { CalendarDay } from '../calendar/model.js';
-import { escapeKey } from '../common/controllers/key-bindings.js';
+import {
+  altKey,
+  arrowDown,
+  arrowUp,
+  escapeKey,
+} from '../common/controllers/key-bindings.js';
 import { defineComponents } from '../common/definitions/defineComponents.js';
 import {
   isFocused,
@@ -134,7 +139,7 @@ describe('Date range picker - single input', () => {
       await elementUpdated(picker);
 
       input.focus();
-      simulateKeyboard(input, 'ArrowDown');
+      simulateKeyboard(input, arrowDown);
       await elementUpdated(picker);
 
       expect(isFocused(input)).to.be.true;
@@ -588,6 +593,47 @@ describe('Date range picker - single input', () => {
         expect(picker.value).to.deep.equal(null);
         expect(input.value).to.equal('');
       });
+
+      it('should toggle the calendar with keyboard combinations and keep focus', async () => {
+        const eventSpy = spy(picker, 'emitEvent');
+        const input = picker.renderRoot!.querySelector(
+          IgcInputComponent.tagName
+        )!;
+        input.focus();
+
+        expect(isFocused(input)).to.be.true;
+
+        simulateKeyboard(input, [altKey, arrowDown]);
+        await elementUpdated(picker);
+
+        expect(picker.open).to.be.true;
+        expect(isFocused(input)).to.be.false;
+        expect(eventSpy.firstCall).calledWith('igcOpening');
+        expect(eventSpy.lastCall).calledWith('igcOpened');
+        eventSpy.resetHistory();
+
+        simulateKeyboard(input, [altKey, arrowUp]);
+        await elementUpdated(picker);
+
+        expect(picker.open).to.be.false;
+        expect(isFocused(input)).to.be.true;
+        expect(eventSpy.firstCall).calledWith('igcClosing');
+        expect(eventSpy.lastCall).calledWith('igcClosed');
+        eventSpy.resetHistory();
+
+        simulateKeyboard(input, [altKey, arrowDown]);
+        await elementUpdated(picker);
+        eventSpy.resetHistory();
+
+        simulateKeyboard(picker, escapeKey);
+        await elementUpdated(picker);
+        await elementUpdated(input);
+
+        expect(picker.open).to.be.false;
+        expect(isFocused(input)).to.be.true;
+        expect(eventSpy.firstCall).calledWith('igcClosing');
+        expect(eventSpy.lastCall).calledWith('igcClosed');
+      });
     });
 
     describe('Readonly state', () => {

src/components/date-range-picker/date-range-picker-two-inputs.spec.ts

@@ -9,6 +9,7 @@ import { spy } from 'sinon';
 import IgcCalendarComponent from '../calendar/calendar.js';
 import { CalendarDay } from '../calendar/model.js';
 import {
+  altKey,
   arrowDown,
   arrowUp,
   escapeKey,
@@ -799,6 +800,42 @@ describe('Date range picker - two inputs', () => {
 
         checkDatesEqual(calendar.activeDate, june3rd2025);
       });
+      it('should toggle the calendar with keyboard combinations and keep focus', async () => {
+        const eventSpy = spy(picker, 'emitEvent');
+        dateTimeInputs[0].focus();
+
+        expect(isFocused(dateTimeInputs[0])).to.be.true;
+
+        simulateKeyboard(dateTimeInputs[0], [altKey, arrowDown]);
+        await elementUpdated(picker);
+
+        expect(picker.open).to.be.true;
+        expect(isFocused(dateTimeInputs[0])).to.be.false;
+        expect(eventSpy.firstCall).calledWith('igcOpening');
+        expect(eventSpy.lastCall).calledWith('igcOpened');
+        eventSpy.resetHistory();
+
+        simulateKeyboard(dateTimeInputs[0], [altKey, arrowUp]);
+        await elementUpdated(picker);
+
+        expect(picker.open).to.be.false;
+        expect(isFocused(dateTimeInputs[0])).to.be.true;
+        expect(eventSpy.firstCall).calledWith('igcClosing');
+        expect(eventSpy.lastCall).calledWith('igcClosed');
+
+        simulateKeyboard(dateTimeInputs[0], [altKey, arrowDown]);
+        await elementUpdated(picker);
+        eventSpy.resetHistory();
+
+        simulateKeyboard(dateTimeInputs[0], escapeKey);
+        await elementUpdated(picker);
+        await elementUpdated(dateTimeInputs[0]);
+
+        expect(picker.open).to.be.false;
+        expect(isFocused(dateTimeInputs[0])).to.be.true;
+        expect(eventSpy.firstCall).calledWith('igcClosing');
+        expect(eventSpy.lastCall).calledWith('igcClosed');
+      });
     });
     describe('Readonly state', () => {
       beforeEach(async () => {

src/components/date-range-picker/date-range-picker.ts

@@ -761,7 +761,7 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
       if (!this._isDropDown) {
         this._revertValue();
       }
-      this._inputs[0]?.focus();
+      this.useTwoInputs ? this._inputs[0].focus() : this._input.focus();
     }
   }