From 37e02c83d2174184a62a1496229817cd54010da9 Mon Sep 17 00:00:00 2001 From: Damyan Petev Date: Fri, 25 Oct 2024 11:04:34 +0300 Subject: [PATCH 1/2] test(date-range): test projected input focus restore consecutive close --- .../date-range-picker.component.spec.ts | 40 ++++++++++++++++++- 1 file changed, 38 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts index 867da94fde1..befe7d02550 100644 --- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts +++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts @@ -1095,7 +1095,7 @@ describe('IgxDateRangePicker', () => { expect(dateRange.opening.emit).toHaveBeenCalledTimes(1); expect(dateRange.opened.emit).toHaveBeenCalledTimes(1); - const calendarWrapper = document.getElementsByClassName('igx-calendar__wrapper')[0]; + let calendarWrapper = document.getElementsByClassName('igx-calendar__wrapper')[0]; expect(calendarWrapper.contains(document.activeElement)) .withContext('focus should move to calendar for KB nav') .toBeTrue(); @@ -1111,6 +1111,24 @@ describe('IgxDateRangePicker', () => { .withContext('focus should return to the picker input') .toBeTrue(); expect(dateRange.isFocused).toBeTrue(); + + // reopen and close again + UIInteractions.triggerEventHandlerKeyDown('ArrowDown', range, true); + tick(DEBOUNCE_TIME * 2); + fixture.detectChanges(); + + calendarWrapper = document.getElementsByClassName('igx-calendar__wrapper')[0]; + expect(calendarWrapper.contains(document.activeElement)) + .withContext('focus should move to calendar for KB nav') + .toBeTrue(); + UIInteractions.triggerKeyDownEvtUponElem('ArrowUp', calendarWrapper, true, true); + tick(); + fixture.detectChanges(); + + expect(startInput.nativeElement.contains(document.activeElement)) + .withContext('focus should return to the picker input') + .toBeTrue(); + expect(dateRange.isFocused).toBeTrue(); })); it('should toggle the calendar with ALT + DOWN/UP ARROW key - dialog mode', fakeAsync(() => { @@ -1153,7 +1171,7 @@ describe('IgxDateRangePicker', () => { fixture.detectChanges(); expect(dateRange.collapsed).toBeFalsy(); - const calendarWrapper = document.getElementsByClassName('igx-calendar__wrapper')[0]; + let calendarWrapper = document.getElementsByClassName('igx-calendar__wrapper')[0]; expect(calendarWrapper.contains(document.activeElement)) .withContext('focus should move to calendar for KB nav') .toBeTrue(); @@ -1170,6 +1188,24 @@ describe('IgxDateRangePicker', () => { .withContext('focus should return to the picker input') .toBeTrue(); expect(dateRange.isFocused).toBeTrue(); + + // reopen and close again + dateRange.open(); + tick(); + fixture.detectChanges(); + + calendarWrapper = document.getElementsByClassName('igx-calendar__wrapper')[0]; + expect(calendarWrapper.contains(document.activeElement)) + .withContext('focus should move to calendar for KB nav') + .toBeTrue(); + + UIInteractions.triggerKeyDownEvtUponElem('ArrowUp', calendarWrapper, true, true); + tick(); + fixture.detectChanges(); + expect(startInput.nativeElement.contains(document.activeElement)) + .withContext('focus should return to the picker input') + .toBeTrue(); + expect(dateRange.isFocused).toBeTrue(); })); it('should not open calendar with ALT + DOWN ARROW key if disabled is set to true', fakeAsync(() => { From fc8d5c4112bc68ec2e8d78d8b777255fde1085a9 Mon Sep 17 00:00:00 2001 From: Damyan Petev Date: Fri, 25 Oct 2024 11:28:39 +0300 Subject: [PATCH 2/2] fix(date-range): projected input focus restore on consecutive close --- .../src/lib/date-range-picker/date-range-picker.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts index 6027f8c5c82..523d6d9ddea 100644 --- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts +++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts @@ -735,7 +735,6 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective // input click if (this.hasProjectedInputs && this._focusedInput) { this._focusedInput.setFocus(); - this._focusedInput = null; } if (this.inputDirective) { this.inputDirective.focus(); @@ -786,6 +785,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective } private updateValidityOnBlur() { + this._focusedInput = null; this.onTouchCallback(); if (this._ngControl) { if (this.hasProjectedInputs) {