Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
100
igx-grid keyboard navigation issue
posted

I have an igx-grid within an igx-dialog and when the dialog is shown I am setting a cell to edit mode and everything looks I'd expect.  But using the tab key to try and move to the next cell the grid loses focus.  

If I go back and select the same cell using the mouse then the keyboard navigation works as I'd expect.

Here is a short video showing the issue

  • 2500
    Offline posted

    Hello Nate,

    Thank you for providing a video!

    I have been looking into it and in an effort to reproduce this, I created this minimal sample in StackBlitz. There is added logic to set a target cell in edit mode once the dialog is opened. I am unaware if the approach I am using corresponds to the one you have adopted for this, nevertheless, I was able to reproduce the reported behavior with the following code:

    <igx-dialog
    
      <!-- -->
    
      (opened)="onDialogOpenedHandler($event, grid1)"
    
    > 
     

    public onDialogOpenedHandler(
        event: IDialogEventArgs,
        grid: IgxGridComponent
      ) {
        const myCell = grid.getCellByColumn(0, 'name');
        myCell.editMode = true;
      }
    
     

    After further investigation, I determined that the observed is due to the fact that programmatically setting a cell into edit mode like this does not indicate to the grid that the same should also be the active cell. My suggestion is to apply the following method to indicate to the grid’s navigation service that the active node should be set to the target row and column indexes:

      const myCell = grid.getCellByColumn(0, 'name');
        myCell.editMode = true;
        grid.navigation.setActiveNode({
          row: myCell.row.index,
          column: myCell.column.index,
        });
     

    This approach is applied in the above referenced sample. Please, check it out on your side and let me know if it helps resolve the issue.

    Best regards,
    Bozhidara Pachilova
    Associate Software Developer