feat(*): reset tab Index when navigationg out of the calendar #6275

ddincheva · ddincheva · commit 5a5ddfe4f212 · 2020-10-04T22:13:32.000+03:00
diff --git a/projects/igniteui-angular/src/lib/calendar/calendar-base.ts b/projects/igniteui-angular/src/lib/calendar/calendar-base.ts
@@ -177,6 +177,7 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
     public set viewDate(value: Date) {
         const date = this.getDateOnly(value).setDate(1);
         this._viewDate = new Date(date);
+        this.resetActiveDate();
     }
 
     /**
@@ -650,6 +651,7 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
                 this.selectRange(value, true);
                 break;
         }
+        this.resetActiveDate();
     }
 
     /**
@@ -694,4 +696,10 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
                 break;
         }
     }
+
+    /**
+     * @hidden
+     * @internal
+     */
+    public resetActiveDate() {}
 }
diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.html b/projects/igniteui-angular/src/lib/calendar/calendar.component.html
@@ -45,11 +45,12 @@ <h2 class="igx-calendar__header-date">
 
     <div style="display: flex"
         [@animateChange]="animationAction"
-        (@animateChange.done)="animationDone($event)">
+        (@animateChange.done)="animationDone($event)" (focusout)="resetActiveDate()">
         <igx-days-view *ngFor="let view of monthsViewNumber | IgxMonthViewSlots; index as i;" [changeDaysView]="true" #days
                 [selection]="selection"
                 [locale]="locale"
                 [value]="value"
+                [activeDate]="activeDate"
                 [viewDate]="i | IgxGetViewDate:viewDate"
                 [weekStart]="weekStart"
                 [formatOptions]="formatOptions"
@@ -59,7 +60,8 @@ <h2 class="igx-calendar__header-date">
                 [hideOutsideDays]="hideOutsideDays"
                 [showWeekNumbers]="showWeekNumbers"
                 (onViewChanging)="viewChanging($event)"
-                (onDateSelection)="childClicked($event)">
+                (onDateSelection)="childClicked($event)"
+                (activeDateChange)="activeDate = $event">
         </igx-days-view>
     </div>
 </div>
diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.ts b/projects/igniteui-angular/src/lib/calendar/calendar.component.ts
@@ -402,6 +402,12 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
         return this.selectedDates ? this.selectedDates : new Date();
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    public activeDate = new Date().toLocaleDateString();
+
     /**
      * @hidden
      * @internal
@@ -768,6 +774,20 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
         }
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    public resetActiveDate(param?) {
+        if (!this.monthViews) { return; }
+        let dates = [];
+        this.monthViews.map(mv => mv.dates).forEach(days => { dates = dates.concat(days.toArray());  });
+        const date = dates.find(day => day.selected) || dates.find(day => day.isToday) || dates.find(d => d.isFocusable);
+        if (date) {
+            this.activeDate = date.date.date.toLocaleDateString();
+        }
+    }
+
     /**
      * Keyboard navigation of the calendar
      * @hidden
diff --git a/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.html b/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.html
@@ -27,6 +27,7 @@
         [specialDates]="specialDates"
         [outOfRangeDates]="outOfRangeDates"
         [hideOutsideDays]="hideOutsideDays"
+        [attr.tabindex]="tabIndex(day)"
         (onDateSelection)="selectDay($event)">
         {{ formattedDate(day.date) }}
     </igx-day-item>
diff --git a/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts b/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts
@@ -65,6 +65,20 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Do
     @Input()
     public showWeekNumbers: boolean;
 
+    /**
+     * @hidden
+     * @internal
+     */
+    @Input()
+    public set activeDate(value: string) {
+        this._activeDate = value;
+        this.activeDateChange.emit(this._activeDate);
+    }
+
+    public get activeDate() {
+        return this._activeDate;
+    }
+
     /**
      * @hidden
      */
@@ -77,6 +91,12 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Do
     @Output()
     public onViewChanging = new EventEmitter<IViewChangingEventArgs>();
 
+    /**
+     * @hidden
+     */
+    @Output()
+    public activeDateChange = new EventEmitter<string>();
+
     /**
      * @hidden
      */
@@ -97,6 +117,7 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Do
      * @hidden
      */
     public prevMonthView: IgxDaysViewComponent;
+    public _activeDate;
 
     /**
      * The default css class applied to the component.
@@ -136,6 +157,10 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Do
         }
     }
 
+    public tabIndex(day: ICalendarDate): number {
+        return this.activeDate && this.activeDate === day.date.toLocaleDateString() && day.isCurrentMonth ? 0 : -1;
+    }
+
     /**
      * Returns the week number by date
      *
@@ -361,7 +386,8 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Do
     public onKeydownArrow(event: KeyboardEvent) {
         event.preventDefault();
         event.stopPropagation();
-        this.daysNavService.focusNextDate(event.target as HTMLElement, event.key);
+        const day = this.daysNavService.focusNextDate(event.target as HTMLElement, event.key);
+        this.activeDate = day?.date.date.toLocaleDateString();
     }
 
     /**
diff --git a/projects/igniteui-angular/src/lib/calendar/days-view/daysview-navigation.service.ts b/projects/igniteui-angular/src/lib/calendar/days-view/daysview-navigation.service.ts
@@ -44,7 +44,7 @@ export class IgxDaysViewNavigationService {
                     }
                     if (day && day.isFocusable) {
                         day.nativeElement.focus();
-                        return;
+                        return day;
                     }
                 }
                 break;
@@ -60,7 +60,7 @@ export class IgxDaysViewNavigationService {
                     }
                     if (day && day.isFocusable) {
                         day.nativeElement.focus();
-                        return;
+                        return day;
                     }
                 }
                 break;
@@ -76,7 +76,7 @@ export class IgxDaysViewNavigationService {
                     }
                     if (day && day.isFocusable) {
                         day.nativeElement.focus();
-                        return;
+                        return day;
                     }
                 }
                 break;
@@ -92,7 +92,7 @@ export class IgxDaysViewNavigationService {
                     }
                     if (day && day.isFocusable) {
                         day.nativeElement.focus();
-                        return;
+                        return day;
                     }
                 }
                 break;
diff --git a/src/app/calendar/calendar.sample.html b/src/app/calendar/calendar.sample.html
@@ -23,14 +23,14 @@ <h4 class="sample-title">Default Calendar</h4>
                     <button igxButton="raised" igxRipple (click)="setSelection('range')">Range</button>
                 </div>
                 <igx-card>
-                    <igx-calendar #calendar [showWeekNumbers]="true" weekStart="1" selection="single" (viewDateChanged)="viewDateChanged($event)" (activeViewChanged)="activeViewChanged($event)" (onSelection)="onSelection($event)" [hideOutsideDays]="false" [monthsViewNumber]="3"></igx-calendar>
+                    <igx-calendar #calendar [showWeekNumbers]="true" weekStart="1" selection="multi" (viewDateChanged)="viewDateChanged($event)" (activeViewChanged)="activeViewChanged($event)" (onSelection)="onSelection($event)" [hideOutsideDays]="false" [monthsViewNumber]="3"></igx-calendar>
                 </igx-card>
             </div>
 
             <div class="calendar-sample">
                 <h4 class="sample-title">Vertical Calendar</h4>
                 <igx-card>
-                    <igx-calendar [showWeekNumbers]="true" weekStart="1" [vertical]="true"></igx-calendar>
+                    <igx-calendar  [viewDate]="ppNovember" [showWeekNumbers]="true" weekStart="1" [vertical]="true"></igx-calendar>
                 </igx-card>
             </div>
 
diff --git a/src/app/calendar/calendar.sample.ts b/src/app/calendar/calendar.sample.ts
@@ -1,25 +1,38 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
 import { IgxCalendarComponent, IgxDialogComponent, DateRangeType, CalendarView } from 'igniteui-angular';
+import { type } from 'os';
 import { IViewDateChangeEventArgs } from '../../../projects/igniteui-angular/src/lib/calendar/calendar-base';
 
 @Component({
     selector: 'app-calendar-sample',
     templateUrl: 'calendar.sample.html',
     styleUrls: ['calendar.sample.scss']
 })
-export class CalendarSampleComponent implements OnInit {
+export class CalendarSampleComponent implements OnInit, AfterViewInit {
     @ViewChild('calendar', { static: true }) calendar: IgxCalendarComponent;
     @ViewChild('calendar1', { static: true }) public calendar1: IgxCalendarComponent;
     @ViewChild('alert', { static: true }) public dialog: IgxDialogComponent;
     public range = [];
     public today = new Date();
+    public ppNovember = new Date(this.today.getFullYear(), this.today.getMonth() + 1, 10);
     public rangeDisabled = [
         new Date(this.today.getFullYear(), this.today.getMonth(), 10),
         new Date(this.today.getFullYear(), this.today.getMonth(), 13)
     ];
 
     public ngOnInit() {
         this.calendar1.disabledDates = [{ type: DateRangeType.Between, dateRange: this.rangeDisabled }];
+        this.calendar.selectDate([ new Date(this.today.getFullYear(), this.today.getMonth(), 10),
+                        new Date(this.today.getFullYear(), this.today.getMonth(), 17),
+                        new Date(this.today.getFullYear(), this.today.getMonth(), 27)]);
+    }
+
+    public ngAfterViewInit() {
+        //this.calendar.selectDate(new Date(this.today.getFullYear(), this.today.getMonth(), 10));
+/*             [ new Date(this.today.getFullYear(), this.today.getMonth(), 10),
+                new Date(this.today.getFullYear(), this.today.getMonth(), 17),
+                new Date(this.today.getFullYear(), this.today.getMonth(), 27)]) */
+        console.log(this.calendar.selectedDates);
     }
 
     public selectPTOdays(dates: Date[]) {

Original file line number	Diff line number	Diff line change
`@@ -177,6 +177,7 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {`
`177`	`177`	`public set viewDate(value: Date) {`
`178`	`178`	`const date = this.getDateOnly(value).setDate(1);`
`179`	`179`	`this._viewDate = new Date(date);`
	`180`	`+ this.resetActiveDate();`
`180`	`181`	`}`
`181`	`182`
`182`	`183`	`/**`
`@@ -650,6 +651,7 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {`
`650`	`651`	`this.selectRange(value, true);`
`651`	`652`	`break;`
`652`	`653`	`}`
	`654`	`+ this.resetActiveDate();`
`653`	`655`	`}`
`654`	`656`
`655`	`657`	`/**`
`@@ -694,4 +696,10 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {`
`694`	`696`	`break;`
`695`	`697`	`}`
`696`	`698`	`}`
	`699`	`+`
	`700`	`+ /**`
	`701`	`+ * @hidden`
	`702`	`+ * @internal`
	`703`	`+ */`
	`704`	`+ public resetActiveDate() {}`
`697`	`705`	`}`
Original file line number	Diff line number	Diff line change
`@@ -44,7 +44,7 @@ export class IgxDaysViewNavigationService {`
`44`	`44`	`}`
`45`	`45`	`if (day && day.isFocusable) {`
`46`	`46`	`day.nativeElement.focus();`
`47`		`- return;`
	`47`	`+ return day;`
`48`	`48`	`}`
`49`	`49`	`}`
`50`	`50`	`break;`
`@@ -60,7 +60,7 @@ export class IgxDaysViewNavigationService {`
`60`	`60`	`}`
`61`	`61`	`if (day && day.isFocusable) {`
`62`	`62`	`day.nativeElement.focus();`
`63`		`- return;`
	`63`	`+ return day;`
`64`	`64`	`}`
`65`	`65`	`}`
`66`	`66`	`break;`
`@@ -76,7 +76,7 @@ export class IgxDaysViewNavigationService {`
`76`	`76`	`}`
`77`	`77`	`if (day && day.isFocusable) {`
`78`	`78`	`day.nativeElement.focus();`
`79`		`- return;`
	`79`	`+ return day;`
`80`	`80`	`}`
`81`	`81`	`}`
`82`	`82`	`break;`
`@@ -92,7 +92,7 @@ export class IgxDaysViewNavigationService {`
`92`	`92`	`}`
`93`	`93`	`if (day && day.isFocusable) {`
`94`	`94`	`day.nativeElement.focus();`
`95`		`- return;`
	`95`	`+ return day;`
`96`	`96`	`}`
`97`	`97`	`}`
`98`	`98`	`break;`