I have developed an arrow-keys navigation within a table. Navigation is possible with arrow keys up, down, left and right. How can the cursor always be set to the right in the input during navigation?
My Stackblitz: https://stackblitz.com/edit/stackoverflow-72056135-ube6hj?file=app%2Ftable-basic-example.ts
My code:
// HTML
<input class="edit-input || focus-cell" type="text"[formControl]="rowControl.get(column.attribute)" appArrowKeyNav>
// TS
/**
* Use arrowKeys
* @param object any
*/
move(object) {
const inputToArray = this.inputs.toArray();
let index = inputToArray.findIndex((x) => x.element === object.element);
switch (object.action) {
case 'UP':
index -= this.columns.length;
break;
case 'DOWN':
index += this.columns.length;
break;
case 'LEFT':
index--;
break;
case 'RIGTH':
index++;
break;
}
if (index >= 0 && index < this.inputs.length) {
inputToArray[index].element.nativeElement.focus();
}
}
I have now solved the problem considering setSelectionRange(). I have optimized my code as follows:
/**
* Use arrowKeys
* @param object any
*/
move(object) {
const inputToArray = this.inputs.toArray();
let index = inputToArray.findIndex((x) => x.element === object.element);
switch (object.action) {
case 'UP':
index -= this.columns.length;
break;
case 'DOWN':
index += this.columns.length;
break;
case 'LEFT':
index--;
break;
case 'RIGTH':
index++;
break;
}
if (index >= 0 && index < this.inputs.length) {
// Set focus
inputToArray[index].element.nativeElement.focus();
// Set cursor at the end of the text in the input
setTimeout(() => {
if (inputToArray[index].element.nativeElement.value?.length > 0) {
const pos = inputToArray[index].element.nativeElement.value.length;
inputToArray[index].element.nativeElement.setSelectionRange(pos, pos);
}
}, 1);
}
}