From de4abb4b3e2e582c9c90fafde32d1af6374161dc Mon Sep 17 00:00:00 2001 From: ddaribo Date: Mon, 14 Jul 2025 15:14:48 +0300 Subject: [PATCH 1/2] test(drp): alt + arrow down/up/escape focus for both input modes --- .../date-range-picker-single.spec.ts | 50 ++++++++++++++++++- .../date-range-picker-two-inputs.spec.ts | 37 ++++++++++++++ 2 files changed, 85 insertions(+), 2 deletions(-) diff --git a/src/components/date-range-picker/date-range-picker-single.spec.ts b/src/components/date-range-picker/date-range-picker-single.spec.ts index ab8da4527..0f16f9e26 100644 --- a/src/components/date-range-picker/date-range-picker-single.spec.ts +++ b/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', () => { diff --git a/src/components/date-range-picker/date-range-picker-two-inputs.spec.ts b/src/components/date-range-picker/date-range-picker-two-inputs.spec.ts index e74ce937d..198a64306 100644 --- a/src/components/date-range-picker/date-range-picker-two-inputs.spec.ts +++ b/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 () => { From 0ac281716f1a27a4d1b168538c227cfd652a64e8 Mon Sep 17 00:00:00 2001 From: ddaribo Date: Mon, 14 Jul 2025 15:19:51 +0300 Subject: [PATCH 2/2] fix(drp): focus the single input in the onEscapeKey method --- src/components/date-range-picker/date-range-picker.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/date-range-picker/date-range-picker.ts b/src/components/date-range-picker/date-range-picker.ts index 096105da2..d618f9929 100644 --- a/src/components/date-range-picker/date-range-picker.ts +++ b/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(); } }