Merge pull request #6014 from IgniteUI/calendar-IE-kb

fix(calendar): fix kb navigation IE #5895

Author: zdrawku

projects/igniteui-angular/src/lib/calendar/days-view/daysview-navigation.service.ts

@@ -1,5 +1,4 @@
 import { Injectable } from '@angular/core';
-import { isIE } from '../../core/utils';
 import { IgxDayItemComponent } from './day-item.component';
 import { IgxDaysViewComponent } from './days-view.component';
 import { ScrollMonth } from '../calendar-base';
@@ -11,6 +10,8 @@ enum Direction {
     Right = 'ArrowRight',
 }
 
+const ARROW = 'Arrow';
+
 /** @hidden */
 @Injectable()
 export class IgxDaysViewNavigationService {
@@ -20,9 +21,8 @@ export class IgxDaysViewNavigationService {
      * @hidden
      */
     public focusNextDate(target: HTMLElement, key: string, nextView = false) {
-        if (isIE()) {
-            target = target.parentElement;
-        }
+        if (target.childElementCount === 0) { target = target.parentElement; }
+        if (key.indexOf('Arrow') === -1) { key = ARROW.concat(key); }
         const monthView = this.monthView;
         const node = monthView.dates.find((date) => date.nativeElement === target);
         let dates = monthView.dates.toArray(),

projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.ts

@@ -273,7 +273,8 @@ export class IgxMonthsViewComponent implements ControlValueAccessor {
 
         for (let index = months.indexOf(node) - 1; index >= 0; index--) {
             const nextNodeRect = months[index].nativeElement.getBoundingClientRect();
-            if (nodeRect.top !== nextNodeRect.top && nodeRect.left === nextNodeRect.left) {
+            const tolerance = 6;
+            if (nodeRect.top !== nextNodeRect.top && (nextNodeRect.left - nodeRect.left) < tolerance) {
                 months[index].nativeElement.focus();
                 break;
             }
@@ -298,7 +299,8 @@ export class IgxMonthsViewComponent implements ControlValueAccessor {
 
         for (let index = months.indexOf(node) + 1; index < months.length; index++) {
             const nextNodeRect = months[index].nativeElement.getBoundingClientRect();
-            if (nodeRect.top !== nextNodeRect.top && nodeRect.left === nextNodeRect.left) {
+            const tolerance = 6;
+            if (nextNodeRect.top !== nodeRect.top && (nodeRect.left - nextNodeRect.left) < tolerance ) {
                 months[index].nativeElement.focus();
                 break;
             }

projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss

@@ -37,7 +37,7 @@
     }
 
     @include e(body-column) {
-        @extend %cal-column-display !optional;
+        @extend %cal-column-year !optional;
     }
 
     @include e(label) {

projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss

@@ -453,6 +453,12 @@
         align-items: center;
     }
 
+    %cal-column-year {
+        %cal-value--year {
+            flex: 1 0 0;
+        }
+    }
+
     %cal-value {
         position: relative;
         display: flex;