I am using Angular 5 with Ag-Grid Enterprise Addition. I am using IE11 browser. Unfortunately in the grid, the cursor gets stuck and not moving to next characters in the input box using keyboard left/right options. So, I thought of explicitly moving the cursor to next characters. I am using Javascript range for that. I am getting the error at this line document.getSelection().addRange(range). Please find the below code of the custom NumericComponent ,screenshot of input box and error. I am not sure if this is the right approach. Can anyone guide me how to fix this issue ?
<input #input id="numericinput" style="width: 100%; height: 100%;" (keydown)="onKeyDown($event)" [(ngModel)]="value" (dblclick) = "$event.target.select()">
<button (click)="clear()" style="position:absolute;top:5px;right:2px;cursor:pointer;color:grey;background-color:white;border:none;">
<span>❌</span>
</button>
onKeyDown(event): void {
var key = event.which || event.keyCode;
if(key === 37 || key === 39){
let error ;
event.stopPropagation();
let inputDocument = document.getElementById('numericinput');
let range = document.createRange();
range.collapse(true);
range.setEnd(inputDocument.firstChild, 0);
range.setStart(inputDocument.firstChild, this.input.element.nativeElement.value.length);
document.getSelection().removeAllRanges;
document.getSelection().addRange(range);
}
if (!this.isKeyPressedNumeric(event)) {
if (event.preventDefault) event.preventDefault();
}
}