Merge pull request #7557 from IgniteUI/bpenkov/set-focus-to-last-focused-input

Store last focused input and focus it onClosing

Author: Lipata

projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts

@@ -1,4 +1,3 @@
-import { IgxDateRangePickerComponent } from './date-range-picker.component';
 import { ComponentFixture, async, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { Component, OnInit, ViewChild, DebugElement } from '@angular/core';
 import { IgxInputGroupModule } from '../input-group/public_api';
@@ -13,6 +12,8 @@ import { configureTestSuite } from '../test-utils/configure-suite';
 import { HelperTestFunctions } from '../calendar/calendar-helper-utils';
 import { IgxDateTimeEditorModule } from '../directives/date-time-editor/public_api';
 import { DateRangeType } from '../core/dates';
+import { IgxDateRangePickerComponent, IgxDateRangeEndComponent } from './public_api';
+import { IgxIconModule } from '../icon/public_api';
 
 // The number of milliseconds in one day
 const ONE_DAY = 1000 * 60 * 60 * 24;
@@ -494,7 +495,8 @@ describe('IgxDateRangePicker', () => {
                         DateRangeTwoInputsTestComponent,
                         DateRangeTwoInputsNgModelTestComponent
                     ],
-                    imports: [IgxDateRangePickerModule, IgxDateTimeEditorModule, IgxInputGroupModule, FormsModule, NoopAnimationsModule]
+                    imports: [IgxDateRangePickerModule, IgxDateTimeEditorModule,
+                        IgxInputGroupModule, FormsModule, NoopAnimationsModule, IgxIconModule]
                 })
                     .compileComponents();
             }));
@@ -633,6 +635,43 @@ describe('IgxDateRangePicker', () => {
                 }));
             });
 
+            it('should focus the last focused input after the calendar closes - dropdown', fakeAsync(() => {
+                fixture.componentInstance.mode = InteractionMode.DropDown;
+                fixture.detectChanges();
+
+                endInput = fixture.debugElement.queryAll(By.css('.igx-input-group'))[1];
+                UIInteractions.simulateClickAndSelectEvent(endInput.nativeElement);
+
+                UIInteractions.triggerEventHandlerKeyDown('ArrowDown', endInput, true);
+                tick();
+                fixture.detectChanges();
+
+                UIInteractions.triggerEventHandlerKeyDown('Escape', calendar);
+                fixture.detectChanges();
+                tick(100);
+
+                expect(fixture.componentInstance.dateRange.projectedInputs
+                    .find(i => i instanceof IgxDateRangeEndComponent).isFocused)
+                    .toBeTruthy();
+            }));
+
+            it('should focus the last focused input after the calendar closes - dialog', fakeAsync(() => {
+                endInput = fixture.debugElement.queryAll(By.css('.igx-input-group'))[1];
+                UIInteractions.simulateClickAndSelectEvent(endInput.nativeElement);
+
+                UIInteractions.triggerEventHandlerKeyDown('ArrowDown', endInput, true);
+                tick();
+                fixture.detectChanges();
+
+                UIInteractions.triggerEventHandlerKeyDown('Escape', calendar);
+                fixture.detectChanges();
+                tick(100);
+
+                expect(fixture.componentInstance.dateRange.projectedInputs
+                    .find(i => i instanceof IgxDateRangeEndComponent).isFocused)
+                    .toBeTruthy();
+            }));
+
             describe('Data binding', () => {
                 it('should properly update component value with ngModel bound to projected inputs - #7353', fakeAsync(() => {
                     fixture = TestBed.createComponent(DateRangeTwoInputsNgModelTestComponent);
@@ -822,6 +861,9 @@ export class DateRangeTestComponent implements OnInit {
     template: `
     <igx-date-range-picker [mode]="mode" [(ngModel)]="range" required>
             <igx-date-range-start>
+                <igx-picker-toggle igxPrefix>
+                    <igx-icon>calendar_view_day</igx-icon>
+                </igx-picker-toggle>
                 <input igxInput igxDateTimeEditor type="text">
             </igx-date-range-start>
             <igx-date-range-end>

projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts

@@ -415,12 +415,13 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
     private _value: DateRange;
     private _collapsed = true;
     private _ngControl: NgControl;
-    private _statusChanges$: Subscription;
     private $destroy = new Subject();
+    private _statusChanges$: Subscription;
+    private $toggleClickNotifier = new Subject();
     private _minValue: Date | string;
     private _maxValue: Date | string;
-    private $toggleClickNotifier = new Subject();
     private _positionSettings: PositionSettings;
+    private _focusedInput: IgxDateRangeInputsBaseComponent;
     private _dialogOverlaySettings: OverlaySettings = {
         closeOnOutsideClick: true,
         modal: true
@@ -620,6 +621,7 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
         this.subscribeToDateEditorEvents();
         this.configPositionStrategy();
         this.configOverlaySettings();
+        this.cacheFocusedInput();
         this.attachOnTouched();
 
         const subsToClicked = () => {
@@ -688,7 +690,13 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
             this.updateValidityOnBlur();
         } else {
             // input click
-            this.focusInput();
+            if (this.hasProjectedInputs && this._focusedInput) {
+                this._focusedInput.setFocus();
+                this._focusedInput = null;
+            }
+            if (this.inputDirective) {
+                this.inputDirective.focus();
+            }
         }
     }
 
@@ -715,15 +723,6 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
         }
     }
 
-    private focusInput() {
-        // TODO: should we always focus start input?
-        (this.projectedInputs
-            .find(i => i instanceof IgxDateRangeStartComponent) as IgxDateRangeStartComponent)?.setFocus();
-        if (this.inputDirective) {
-            this.inputDirective.focus();
-        }
-    }
-
     /** @hidden @internal */
     public handleClosed(): void {
         this._collapsed = true;
@@ -901,6 +900,16 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
         }
     }
 
+    private cacheFocusedInput(): void {
+        if (this.hasProjectedInputs) {
+            this.projectedInputs.forEach(i => {
+                fromEvent(i.dateTimeEditor.nativeElement, 'focus')
+                    .pipe(takeUntil(this.$destroy))
+                    .subscribe(() => this._focusedInput = i);
+            });
+        }
+    }
+
     private configPositionStrategy(): void {
         this._positionSettings = {
             openAnimation: fadeIn,