feat(drp): handle the alt + arrow down/up focus properly for single input; add test for both input modes

Author: ddaribo

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

@@ -9,6 +9,8 @@ import { spy } from 'sinon';
 import IgcCalendarComponent from '../calendar/calendar.js';
 import { CalendarDay } from '../calendar/model.js';
 import {
+  altKey,
+  arrowDown,
   arrowLeft,
   arrowRight,
   arrowUp,
@@ -820,6 +822,31 @@ describe('Date range picker - single input', () => {
         await elementUpdated(picker);
         expect(input.value).to.equal('01/01/2000 - 04/23/2025');
       });
+
+      it('should toggle the calendar dropdown with alt + arrow down/up and keep it focused', async () => {
+        const eventSpy = spy(picker, 'emitEvent');
+        input = getInput(picker);
+        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');
+      });
     });
 
     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,
@@ -802,6 +803,29 @@ describe('Date range picker - two inputs', () => {
 
         checkDatesEqual(calendar.activeDate, june3rd2025);
       });
+      it('should toggle the calendar dropdown with alt + arrow down/up and keep it focused', 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');
+      });
     });
     describe('Readonly state', () => {
       beforeEach(async () => {

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

@@ -782,7 +782,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();
     }
   }