Keyboard Navigation enhancements

projects/igniteui-angular/src/lib/core/utils.ts

@@ -314,6 +314,8 @@ export interface CancelableBrowserEventArgs extends CancelableEventArgs {
     event?: Event;
 }
 
+export const HORIZONTAL_NAV_KEYS = new Set(['arrowleft', 'left', 'arrowright', 'right', 'home', 'end']);
+
 export const NAVIGATION_KEYS = new Set([
     'down',
     'up',
@@ -331,7 +333,7 @@ export const NAVIGATION_KEYS = new Set([
 ]);
 export const ROW_EXPAND_KEYS = new Set('right down arrowright arrowdown'.split(' '));
 export const ROW_COLLAPSE_KEYS = new Set('left up arrowleft arrowup'.split(' '));
-export const SUPPORTED_KEYS = new Set([...Array.from(NAVIGATION_KEYS), 'tab', 'enter', 'f2', 'escape', 'esc']);
+export const SUPPORTED_KEYS = new Set([...Array.from(NAVIGATION_KEYS), 'enter', 'f2', 'escape', 'esc', 'pagedown', 'pageup']);
 
 /**
  * @hidden

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts

@@ -879,15 +879,24 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
     protected moveApplyScrollNext(prevIndex: number): void {
         const start = prevIndex + this.state.chunkSize;
         for (let i = start; i < start + this.state.startIndex - prevIndex && this.igxForOf[i] !== undefined; i++) {
-            const input = this.igxForOf[i];
-            const embView = this._embeddedViews.shift();
-            const cntx = embView.context;
-            cntx.$implicit = input;
-            cntx.index = this.getContextIndex(input);
-            cntx.count = this.igxForOf.length;
-            const view: ViewRef = this.dc.instance._vcr.detach(0);
-            this.dc.instance._vcr.insert(view);
-            this._embeddedViews.push(embView);
+            this._moveApply(i);
+        }
+    }
+
+    /**
+     *
+     */
+    protected _moveApply(contextIndex: number, topPosition = false) {
+        const context = this.igxForOf[contextIndex];
+        const forOfContext = new IgxForOfContext<T>(context, this.getContextIndex(context), this.igxForOf.length);
+        const view = this.dc.instance._vcr.createEmbeddedView(this._template, forOfContext, topPosition ? 0 : undefined);
+        this.dc.instance._vcr.detach(topPosition ? this.dc.instance._vcr.length - 1 : 0);
+        if (topPosition) {
+            this._embeddedViews.pop();
+            this._embeddedViews.unshift(view);
+        } else {
+            this._embeddedViews.shift();
+            this._embeddedViews.push(view);
         }
     }
 
@@ -897,14 +906,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
      */
     protected moveApplyScrollPrev(prevIndex: number): void {
         for (let i = prevIndex - 1; i >= this.state.startIndex && this.igxForOf[i] !== undefined; i--) {
-            const input = this.igxForOf[i];
-            const embView = this._embeddedViews.pop();
-            const cntx = embView.context;
-            cntx.$implicit = input;
-            cntx.index = this.getContextIndex(input);
-            const view: ViewRef = this.dc.instance._vcr.detach(this.dc.instance._vcr.length - 1);
-            this.dc.instance._vcr.insert(view, 0);
-            this._embeddedViews.unshift(embView);
+            this._moveApply(i, true);
         }
     }
 

projects/igniteui-angular/src/lib/grids/cell.component.html

@@ -8,21 +8,21 @@
 <ng-template #inlineEditor let-cell="cell">
     <ng-container *ngIf="column.dataType === 'string'">
         <igx-input-group displayDensity="compact">
-            <input igxInput [value]="editValue" (input)="editValue = $event.target.value" [igxFocus]="focused" />
+            <input igxInput [value]="editValue" (input)="editValue = $event.target.value" [igxFocus]="true" />
         </igx-input-group>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'number'">
         <igx-input-group displayDensity="compact">
-            <input igxInput [value]="editValue" (input)="editValue = $event.target.value" [igxFocus]="focused" type="number">
+            <input igxInput [value]="editValue" (input)="editValue = $event.target.value" [igxFocus]="true" type="number">
         </igx-input-group>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'boolean'">
         <igx-checkbox (change)="editValue = $event.checked" [value]="editValue" [checked]="editValue"
-            [igxFocus]="focused" [disableRipple]="true"></igx-checkbox>
+            [igxFocus]="true" [disableRipple]="true"></igx-checkbox>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'date'">
         <igx-date-picker [style.width.%]="100" [outlet]="grid.outletDirective" mode="dropdown"
-            [locale]="grid.locale" [(value)]="editValue" [igxFocus]="focused" [labelVisibility]="false">
+            [locale]="grid.locale" [(value)]="editValue" [igxFocus]="true" [labelVisibility]="false">
         </igx-date-picker>
     </ng-container>
 </ng-template>