Tab not highlighting the cell in Wijmo Grid

Tab not highlighting the cell in Wijmo Grid

Posted by: sumita.sharma on 19 December 2023, 2:24 am EST

• 

  sumita.sharma

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 19 December 2023, 2:24 am EST - Updated 19 December 2023, 2:29 am EST

  Dear Team,

  We are using Angular 12 and Wijmo Flex Grid. In a few of the cell, we have input type=“text” added via wjFlexGridCellTemplate in HTML. Now our requirement is when the user update the value in any of the text box and hits the tab(focusout) it will call an API to update.

  <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-row="row" let-cell="cell" let-item="item">
                <label for="value-{{ row.index }}" class="sr-only">AmLaw segment</label>
                <input
                  type="text"
                  name="value-{{ row.index }}"
                  id="value-{{ row.index }}"
                  bfmField
                  bfmLabel="value"
                  [disabled]="item.dataProcessing.value"
                  [(ngModel)]="item.value"
                  (focusout)="save(item, item.value, 'value',$event)"
                />
              </ng-template>

  But now we have got accessibility bug saying that when we tab the focus is on the text box but the cell is not highlighted the focus you can see is on the previous cell only(attached is the screen shot)
  
  How to get focus on the cell when the focus is on the input text box?

  Regards,
  
  Sumita Sharma

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 19 December 2023, 9:47 pm EST

  Hi Sumita,

  This is happening because of the tabIndex property of the cell and input field. Please set the tabIndex to -1 of the input cell. To select the next suitable cell you need to use the select() method of the FlexGrid.

  Please refer to this sample for reference: https://stackblitz.com/edit/angular-12-form-validation-feabjg

  Regards
  
  Anirudh

• 

  sumita.sharma

  • Post Options:
  • Link
    Copy

  Posted 29 December 2023, 2:21 am EST

  Thank you so much, Anirudh. The solution worked so smoothly. Thanks again

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 1 January 2024, 3:52 pm EST

  Hi Sumita,

  Thank you for notifying me that the solution was helpful.

  In case, if you have any further queries, please let us know. We will be more than happy to help you.

  Thank you.

  Regards