Navigation with arrow keys to the left does not work with input readOnly-CodePudding

I have built a table with 4 columns. 1 column is text and the other 3 are inputs that are set to readOnly. For this table I have written an arrowKeyCodeNavigation. The operation works so far. But if I navigate for example in the first row to the right I can't get back with left. Do you know how I can navigate neither back to the left when I am on a readOnly field?

// HTML

  <td
          [formGroupName]="rowIndex"
          *ngFor="let column of displayedColumns; let columnIndex = index;"
        >
          <div
            *ngIf="attributesWithFormControls.includes(column.attribute); else otherColumns"
          >
            <span>
              <label>
                <input
                  style="background-color: yellow"
                  
                  [id]="'row-'   rowIndex   '-col-'   columnIndex"
                  type="text"
                  arrow-div
                  [formControl]="rowControl.get(column.attribute)"
                  (focus)="onFocus($event)"
                  readonly
                />
              </label>
            </span>
          </div>
          <ng-template #otherColumns>
            <div
              
              tabindex="0"
              [id]="'row-'   rowIndex   '-col-'   columnIndex"
              arrow-div
            >
              Here is a Number
            </div>
          </ng-template>
        </td>

// TS

 /**
   * Use arrowKey
   * @param object any
   */
  move(object) {
    console.log('move', object);

    const id = object.element.nativeElement.id;

    console.log(id);

    const arr = id.split('-');
    let row: number = Number(arr[1]);
    let col: number = Number(arr[3]);

    switch (object.action) {
      case 'UP':
        --row;
        break;
      case 'DOWN':
          row;
        break;
      case 'LEFT':
        --col;
        break;
      case 'RIGTH':
          col;

        if (col >= this.columns.length) {
          // move past last column
          col = 0; // go to column at zero index  (1st column)
            row; // go to next row
        }

        break;
    }
    this.setFocus(row, col);
  }

  onFocus(event: FocusEvent): void {
    console.log('onFocus', event.target);

    const target = event.target as HTMLElement;

    if (target.tagName === 'INPUT') {
      this.currentInputInFocus = target;
    }
  }

  private setFocus(row: number, col: number) {
    console.log(`setFocus [row:${row}] [col:${col}]`);
    const newElementToFocusOn = document.getElementById(
      `row-${row}-col-${col}`
    );
    if (newElementToFocusOn) {
      console.log('focusing');
      this.currentInputInFocus = newElementToFocusOn;
      this.currentInputInFocus.focus();
    }
  }

Here is my work in stackblitz: https://stackblitz.com/edit/angular-wmfjhh-sj39il?file=app/table-basic-example.html

CodePudding user response：

Based on the provided stackblitz sandbox, this has nothing to do with readonly. I aligned the left arrow handler's element selection check with the one you had for the right arrow and it worked.

Check a forked sandbox: https://stackblitz.com/edit/stackoverflow-72056135?file=app/arrow-div.directive.ts

CodePudding user response：

If I extend my move function so that I can jump back to the previous row with the left arrow then the left navigation in the inputs no longer works.

Update:

/**
   * Use arrowKey
   * @param object any
   */
  move(object) {
    console.log('move', object);

    const id = object.element.nativeElement.id;

    console.log(id);

    const arr = id.split('-');
    let row: number = Number(arr[1]);
    let col: number = Number(arr[3]);

    switch (object.action) {
      case 'UP':
        --row;
        break;
      case 'DOWN':
          row;
        break;
      case 'LEFT':
        --col;
        if (col <= this.columns.length) {
          col = this.columns.length - 1;
          --row;
        }
        break;
      case 'RIGTH':
          col;

        if (col >= this.columns.length) {
          // move past last column
          col = 0; // go to column at zero index  (1st column)
            row; // go to next row
        }

        break;
    }
    this.setFocus(row, col);
  }

STACKBLITZ: https://stackblitz.com/edit/stackoverflow-72056135-bqjovx?file=app/table-basic-example.ts