Accessibility: How can I set the position of the cursor in the input when navigating arrow keys?

user_10114552 0
Viewed 95

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();
    }
  }
angular typescript keydown accessibility javascript
1 Answers

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);
    }
  }
user_101145520
Related