[Fix] Focus the today date on date picker open (#2995)

* test(date-picker): add test for focused date #2828 * fix(date-picker): focus the today date on calendar open #2828 * test(date-picker): fix open/close event test #2828
IgniteUI · Nov 22, 2018 · fc0b1de · fc0b1de
1 parent e39d976
commit fc0b1de
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 9 deletions.
diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.ts b/projects/igniteui-angular/src/lib/calendar/calendar.component.ts
@@ -977,6 +977,21 @@ export class IgxCalendarComponent implements OnInit, ControlValueAccessor {
         this.generateYearRange(delta);
     }
 
+    /**
+     *@hidden
+     */
+    public focusActiveDate() {
+        let date = this.dates.find((d) => d.selected);
+
+        if (!date) {
+            date = this.dates.find((d) => d.isToday);
+        }
+
+        if (date) {
+            date.nativeElement.focus();
+        }
+    }
+
     /**
      * @hidden
      */

diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts
@@ -6,7 +6,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxDatePickerComponent, IgxDatePickerModule } from './date-picker.component';
 import { IgxLabelDirective } from '../directives/label/label.directive';
 import { IgxInputDirective } from '../directives/input/input.directive';
-import { UIInteractions } from '../test-utils/ui-interactions.spec';
+import { UIInteractions, wait } from '../test-utils/ui-interactions.spec';
 import { IgxInputGroupModule } from '../input-group';
 
 import { configureTestSuite } from '../test-utils/configure-suite';
@@ -62,7 +62,7 @@ describe('IgxDatePicker', () => {
             expect(domDatePicker.id).toBe('customDatePicker');
         });
 
-        it('Datepicker open/close event', fakeAsync(() => {
+        it('Datepicker open/close event', async() => {
             const dom = fixture.debugElement;
 
             const target = dom.query(By.css('.igx-date-picker__input-date'));
@@ -71,17 +71,18 @@ describe('IgxDatePicker', () => {
             spyOn(datePicker.onClose, 'emit');
 
             target.nativeElement.dispatchEvent(new Event('click', { bubbles: true }));
-            tick();
+            fixture.detectChanges();
+            await wait();
 
             expect(datePicker.onOpen.emit).toHaveBeenCalled();
             expect(datePicker.onOpen.emit).toHaveBeenCalledWith(datePicker);
 
             const overlay = dom.query(By.css('.igx-dialog'));
             overlay.nativeElement.dispatchEvent(new Event('click', { bubbles: true }));
-            tick(350); // destroy timeout...
+            await wait(350); // destroy timeout...
             expect(datePicker.onClose.emit).toHaveBeenCalled();
             expect(datePicker.onClose.emit).toHaveBeenCalledWith(datePicker);
-        }));
+        });
 
         it('Datepicker onSelection event and selectDate method propagation', () => {
             spyOn(datePicker.onSelection, 'emit');
@@ -332,6 +333,22 @@ describe('IgxDatePicker', () => {
         expect(datePicker.value.getMilliseconds()).toBe(date.getMilliseconds());
     });
 
+    it('Should focus the today date', async() => {
+        const fixture = TestBed.createComponent(IgxDatePickerTestComponent);
+        const datePicker = fixture.componentInstance.datePicker;
+        fixture.detectChanges();
+        const dom = fixture.debugElement;
+
+        const target = dom.query(By.css('.igx-date-picker__input-date'));
+
+        target.nativeElement.dispatchEvent(new Event('click', { bubbles: true }));
+        fixture.detectChanges();
+        await wait();
+
+        const todayDate = datePicker.calendar.dates.find(d => d.isToday);
+        expect(document.activeElement).toEqual(todayDate.nativeElement);
+    });
+
     describe('EditorProvider', () => {
         it('Should return correct edit element', () => {
             const fixture = TestBed.createComponent(IgxDatePickerTestComponent);

diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
@@ -484,7 +484,7 @@ export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvi
      *@hidden
      */
     public ngOnInit(): void {
-        this.alert.onOpen.pipe(takeUntil(this.destroy$)).subscribe((ev) => this._focusTheDialog());
+        this.alert.onOpen.pipe(takeUntil(this.destroy$)).subscribe((ev) => this._focusCalendarDate());
         this.alert.toggleRef.onClosed.pipe(takeUntil(this.destroy$)).subscribe((ev) => this.handleDialogCloseAction());
     }
 
@@ -670,9 +670,11 @@ export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvi
         this.calendar.onSelection.pipe(takeUntil(this.destroy$)).subscribe((ev: Date) => this.handleSelection(ev));
     }
 
-    // Focus the dialog element, after its appearence into DOM.
-    private _focusTheDialog() {
-        requestAnimationFrame(() => this.alert.toggleRef.element.focus());
+    // Focus a date, after the celendar appearence into DOM.
+    private _focusCalendarDate() {
+        requestAnimationFrame(() => {
+            this.calendar.focusActiveDate();
+        });
     }
 
     private _setLocaleToDate(value: Date, locale: string = Constants.DEFAULT_LOCALE_DATE): string {