fix(date-range): projected input focus restore on consecutive close (#…

…14951)
IgniteUI · Nov 14, 2024 · 6aff96c · 6aff96c
1 parent d982dda
commit 6aff96c
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 3 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
@@ -1157,7 +1157,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();
@@ -1173,6 +1173,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(() => {
@@ -1215,7 +1233,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();
@@ -1232,6 +1250,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(() => {

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
@@ -762,7 +762,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();
@@ -813,6 +812,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
     }
 
     private updateValidityOnBlur() {
+        this._focusedInput = null;
         this.onTouchCallback();
         if (this._ngControl) {
             if (this.hasProjectedInputs) {