Merge pull request #426 from youda97/data-grid

prevent default and fix sticky header bug in data grid

Author: cal-smith

src/table/data-grid-focus.directive.ts

@@ -42,8 +42,8 @@ export class DataGridFocus {
 		}
 	}
 
-	@HostListener("keyup", ["$event"])
-	keyUp(event: KeyboardEvent) {
+	@HostListener("keydown", ["$event"])
+	keyDown(event: KeyboardEvent) {
 		if (!this.ibmDataGridFocus) {
 			return;
 		}
@@ -57,7 +57,9 @@ export class DataGridFocus {
 		switch (event.key) {
 			case "Right": // IE specific value
 			case "ArrowRight":
-				if (element.nextElementSibling && Array.from(headerRow).indexOf(element.nextElementSibling) < headerRow.length - 1) {
+				const firstBodyRow = rows[1].querySelectorAll("td");
+				event.preventDefault();
+				if (element.nextElementSibling && Array.from(headerRow).indexOf(element.nextElementSibling) < firstBodyRow.length) {
 					this.columnIndex++;
 					const nextSibling = element.nextElementSibling;
 					Table.setTabIndex(element, -1);
@@ -67,6 +69,7 @@ export class DataGridFocus {
 				break;
 			case "Left": // IE specific value
 			case "ArrowLeft":
+				event.preventDefault();
 				if (element.previousElementSibling) {
 					this.columnIndex--;
 					const previousSibling = element.previousElementSibling;
@@ -77,6 +80,7 @@ export class DataGridFocus {
 				break;
 			case "Down": // IE specific value
 			case "ArrowDown":
+				event.preventDefault();
 				if (rowIndex < rows.length - 1) {
 					rowIndex++;
 					const row = rows[rowIndex].querySelectorAll("td");
@@ -95,6 +99,7 @@ export class DataGridFocus {
 				break;
 			case "Up": // IE specific value
 			case "ArrowUp":
+				event.preventDefault();
 				if ((rowIndex === 1 && Array.from(headerRow).every(th => getFocusElementList(th, tabbableSelectorIgnoreTabIndex).length === 0)) ||
 					rowIndex === 0) {
 						return;
@@ -114,6 +119,7 @@ export class DataGridFocus {
 				}
 				break;
 			case "Home":
+				event.preventDefault();
 				this.columnIndex = 0;
 				Table.setTabIndex(element, -1);
 				if (event.ctrlKey) {
@@ -132,6 +138,7 @@ export class DataGridFocus {
 				}
 				break;
 			case "End":
+				event.preventDefault();
 				const lastRow = rows[rows.length - 1].querySelectorAll("td");
 				Table.setTabIndex(element, -1);
 				if (event.ctrlKey) {

src/table/table.component.ts

@@ -207,7 +207,7 @@ import { I18n } from "./../i18n/i18n.module";
 					[draggable]="columnsDraggable"
 					(dragstart)="columnDragStart($event, i)"
 					(dragend)="columnDragEnd($event, i)"
-					(click)="setIndex($event, i)">
+					(click)="setIndex(i)">
 						<span *ngIf="skeleton"></span>
 						<div
 						*ngIf="columnsResizable"
@@ -359,7 +359,7 @@ import { I18n } from "./../i18n/i18n.module";
 							[ngStyle]="model.header[j].style"
 							[ibmDataGridFocus]="isDataGrid"
 							[(columnIndex)]="columnIndex"
-							(click)="setIndex($event, j)">
+							(click)="setIndex(j)">
 							<ng-container *ngIf="!item.template">{{item.data}}</ng-container>
 							<ng-template
 								[ngTemplateOutlet]="item.template" [ngTemplateOutletContext]="{data: item.data}">
@@ -932,7 +932,7 @@ export class Table implements AfterViewInit {
 		});
 	}
 
-	setIndex(event, columnIndex) {
+	setIndex(columnIndex) {
 		if (this.model.hasExpandableRows() && this.showSelectionColumn) {
 			this.columnIndex = columnIndex + 2;
 		} else if (this.model.hasExpandableRows() || this.showSelectionColumn) {