Enhance keyboard navigation's API

[zdrawku]

Description

We need to provide a way to overrite/change the current keyboard behavior in order to have more rich navigation capabilities. For example, to change the default navigation in the grid for tab key, to be column-based navigation, and not row-based or to navigate with keys different than the arrow keys.

Proposals

Provide callbacks for:

• navigateTo(rowIndex: number, visibleColumnIndex: number, callback({targetType, target: Object }))
• getNextCell(currentRowIndex, currentvisibleColumnIndex, callback(IgxColumnComponent)) - returns { rowIndex, visibleColumnIndex } which defines the next cell, that match specific criteria according to the current position
• getPreviousCell(currentRowIndex, currentvisibleColumnIndex, callback(IgxColumnComponent)) - returns { rowIndex, visibleColumnIndex } which defines the previous cell, that match specific criteria according to the current position

Events

Currently we provide the following key interaction events

• onFocusChange - will be deprecated
• onKeydownEnterEditMode
• onKeydownExitEditMode
• onGridKeydown event will be exposed - the event will emit
  IGridKeydownEventArgs {
  targetType: GridKeydownTargetType;
  target: Object;
  event: Event;
  cancel: boolean;
  }

[ymita]

Hi @zdrawku
In addition to #4021, there is another use case. I would like to navigate cell to the next row by hitting Enter key. You can image cell navigation behavior on Excel. On Excel, when you have an active cell, hitting Enter key moves focus to the next row.

[ymita]

Hi @zdrawku , do you have a planned schedule for this feature?

[zdrawku]

Hey Yuki, we are currently working on the keyboard navigation api, we are finishing up the Specification, and next sprint we are going to start with the development.

[ymita]

Do you assume this feature will be available by the end of May?

[zdrawku]

Yes, I believe this feature will be availabe by the end of May. You can keep track of the progress here and whenever I have any updates, I will let you know.

[ymita]

That is great! Thank you! I will keep track of it here.

[zdrawku]

Hi @ymita, the feature is now available with version 7.2.8
StackBlitz live sample

@ddincheva did a great job with this feature and covered all scenarios mentioned in this issue and even more:

• Double click on a cell from Orders column and after the cell is in edit mode, change the value to 7 and press tab key. Prompt message will be shown.
• Select a cell and press Enter key a couple of times. Column based navigation will be applied.

[ymita]

Hi @zdrawku and @ddincheva,
Thank you very much for delivering this feature!! The StackBlitz sample helps a lot!

I see active cell moves both horizontally and vertically. I also confirm activation is skipped for non-editable cell. These are all great!

I notice one thing on the StackBlitz sample. After a cell is selected and hit Enter for the first time, the initially selected cell remains selected. For the second time and later, only one cell is selected. Is this going to be fixed later? Plese see this screenshot.

This can be prevented by deselecting the previously selected cell in the navigateTo method's callback.

    } else if (type === "dataCell" && args.event.key.toLowerCase() === "enter") {
      // Perform column based kb navigation with 'enter' key press
      args.cancel = true;

      this.grid1.navigateTo(target.rowIndex + 1, target.visibleColumnIndex,
        (obj) => {
          // Deselect the previously selected cell
          const cell = this.grid1.selectedCells[0] as IgxGridCellComponent;
          cell.selected = false;
          obj.target.nativeElement.focus();
        });
    }

[zdrawku]

Done