Page refresh - Enter, arrow keys not working in table cells - html

Question

This problem is happening both in IE and Chrome.
This is an HTML 5 with Angular JS 4 application. I am using TypeScript. My main aim in a table row I need to make enter, right, and left arrows of keyboard work and set focus on corresponding table cells
I have a page which has a dropdown. It has names of students. I also have a table with single row like below with multiple columns
When I launch by default a student is selected in dropdown which populates students details in table. I made each cell in row as editable. So when user clicks on any cell in the row and presses enter key I move to next cell and so the functions for right arrow and left arrow are working fine on first load/launch of my application.
But when I change another student from my dropdown, I refresh the page to show new selected student details. From this point if I select a cell in the row my enter key, left,
and right arrows are not working. Please see below for my code
Thank you very much in advance.
<table>
<tr>
<td *ngFor="let item of student.classes " >
<!-- I need to use div to make cell editable in IE. -->
<div name='TotalDistributableQtyCell' [id]="item.cellId"
[contentEditable]='!isDisabled' [textContent]="item.value"
(keydown)="onKeydown($event, item)"
style="line-height:1.8em;">{{item.value}}</div>
</td>
</tr>
<table>
MyComponent.ts
totalDistributableQtyCells: HTMLElement[];
ngAfterViewChecked() {
const distCells = document.getElementsByName('TotalDistributableQtyCell');
if(distCells !== null && distCells !== undefined && distCells.length > 0) {
if(this.totalDistributableQtyCells === null || this.totalDistributableQtyCells === undefined) {
this.totalDistributableQtyCells = [];
}
for ( let i = 0 ; i < distCells.length; i++) {
const index = this.totalDistributableQtyCells.findIndex( x => x.id !== undefined && x.id === distCells[i].id);
if(index === -1) {
this.totalDistributableQtyCells.push(distCells[i]);
}
}
}
}
private onKeydown(event: any, item: ITotalDistributableQuantity) {
const key_code = (window.event) ? event.keyCode : event.which;
if (this.deviceInfo.browser === 'ie') {
console.log('ie: event.keyCode ' + event.keyCode);
switch(event.keyCode.toString()) {
case '13': //enter
event.preventDefault ? event.preventDefault() : (event.returnValue = false);
if(item.sequenceNumber === 2) {
this.totalDistributableQtyCells[1].focus();
} else if ( item.sequenceNumber === this.totalDistributableQtyCells.length + 1) {
this.totalDistributableQtyCells[0].focus();
} else if (item.sequenceNumber > 2 && item.sequenceNumber < this.totalDistributableQtyCells.length + 1) {
this.totalDistributableQtyCells[item.sequenceNumber - 1].focus();
}
break;
case '39': //right
event.preventDefault ? event.preventDefault() : (event.returnValue = false);
if(item.sequenceNumber === 2) {
this.totalDistributableQtyCells[1].focus();
} else if ( item.sequenceNumber === this.totalDistributableQtyCells.length + 1) {
this.totalDistributableQtyCells[0].focus();
} else if (item.sequenceNumber > 2 && item.sequenceNumber < this.totalDistributableQtyCells.length + 1) {
this.totalDistributableQtyCells[item.sequenceNumber - 1].focus();
}
break;
case '37': //left
event.preventDefault ? event.preventDefault() : (event.returnValue = false);
if(item.sequenceNumber === 2) {
this.totalDistributableQtyCells[this.totalDistributableQtyCells.length - 1 ].focus();
} else if ( item.sequenceNumber === this.totalDistributableQtyCells.length + 1) {
this.totalDistributableQtyCells[this.totalDistributableQtyCells.length - 2 ].focus();
} else if (item.sequenceNumber > 2 && item.sequenceNumber < 11) {
this.totalDistributableQtyCells[item.sequenceNumber - 3].focus();
}
break;
}
}else if ( this.deviceInfo.browser === 'chrome') {
console.log('chrome: event.key ' + event.key);
switch(event.key) {
case 'Enter':
event.preventDefault();
if(item.sequenceNumber === 2) {
this.totalDistributableQtyCells[1].focus();
} else if ( item.sequenceNumber === this.totalDistributableQtyCells.length + 1) {
this.totalDistributableQtyCells[0].focus();
} else if (item.sequenceNumber > 2 && item.sequenceNumber < this.totalDistributableQtyCells.length + 1) {
this.totalDistributableQtyCells[item.sequenceNumber - 1].focus();
}
break;
case 'ArrowRight':
event.preventDefault();
if(item.sequenceNumber === 2) {
this.totalDistributableQtyCells[1].focus();
} else if ( item.sequenceNumber === this.totalDistributableQtyCells.length + 1) {
this.totalDistributableQtyCells[0].focus();
} else if (item.sequenceNumber > 2 && item.sequenceNumber < this.totalDistributableQtyCells.length + 1) {
this.totalDistributableQtyCells[item.sequenceNumber - 1].focus();
}
break;
case 'ArrowLeft':
event.preventDefault();
if(item.sequenceNumber === 2) {
this.totalDistributableQtyCells[this.totalDistributableQtyCells.length - 1 ].focus();
} else if ( item.sequenceNumber === this.totalDistributableQtyCells.length + 1) {
this.totalDistributableQtyCells[this.totalDistributableQtyCells.length - 2 ].focus();
} else if (item.sequenceNumber > 2 && item.sequenceNumber < 11) {
this.totalDistributableQtyCells[item.sequenceNumber - 3].focus();
}
break;
}
}
}