Enhance Arrow keys support

[yoursantu]

Hi, I am trying to add Arrow key support navigate between editable cells. I have added one more parameter in handleKeyDown() function that now supporting ArrowRight key perfectly.

handleKeydown(e: any, index: number, data: any) {
      if (
        (e.code === 'Tab' || e.code === 'Enter' || e.code === 'ArrowRight') &&
        this.editMode === 'cell' &&
        !this.disableDefaultEdit
      ) {
        e.preventDefault()
         ..........
}

For ArrowLeft key support i have added one more else if statement. This allowed me to only navigate left within the row.

handleKeydown(e: any, index: number, data: any) {
      if (
        (e.code === 'Tab' || e.code === 'Enter' || e.code === 'ArrowRight') &&
        this.editMode === 'cell' &&
        !this.disableDefaultEdit
      ) {
        e.preventDefault()
         ..........
} else if (e.code === 'ArrowLeft' && this.editMode === 'cell' &&
        !this.disableDefaultEdit) {
          e.preventDefault();
          console.log('Key:', e.code);

          let fieldIndex = this.fields.length + 1 === index ? 0 : index - 1
        let rowIndex =
        this.fields.length + 1 === index
            ? this.tableMap[data.item.id].rowIndex - 1
            : this.tableMap[data.item.id].rowIndex
        let i = fieldIndex
        console.log('rowIndex', rowIndex, 'fieldIndex', fieldIndex,);

        // Find next editable field
        while (!this.fields[i].editable) {
          if (i === this.fields.length + 1) {
            i = 0
            rowIndex--
          } else {
            i--
          }
        }
        fieldIndex = i
        this.selectedCell = this.fields[fieldIndex].key
        this.clearEditMode(data.item.id)
        this.updateData(data.item.id)

        const rowId = this.tableItems[rowIndex]?.id
        if (this.tableMap[rowId]) {
          this.tableMap[rowId].isEdit = true
          if (!this.localChanges[rowId]) {
            this.localChanges[rowId] = {}
          }
        }

      }

And i also want to add ArrowUp and ArrowDown key support. ArrowUp key should navigate previous cell of same column and ArrowDown key should navigate next row of same column.

Please help me.

Thank you

[muhimasri]

Hey there, since the component already supports tabbing to navigate between cells, it will be a good idea to support arrows internally as well. I will look into it and keep you posted.

I will label this issue as a new enhancement.

Thanks

[yoursantu]

Hi there, Thank you for your response, Yeah, the component already has forward navigation with Tab, and Enter keys, but when the user wants to navigate back to previous, then have to use mouse to focus it. So this enhancement will be very useful.

Thank you.

[muhimasri]

Hi, I found a small UX issue when implementing the arrow functionality. The user will not be able to interact with elements that requires the keyboard arrows like a dropdown or input number. For example, if the user is trying to select different items in the select menu using arrow up and down, it won't work because the arrows will navigate to the next row. Similarly with the input number when trying to increment and decrement a value.

The only way around this is to change how selecting and navigating works all together, it should more or less behave like an excel sheet. The user can navigate using arrows but when trying to modify a cell, they need to click enter. When they're in edit mode, the arrows will not change cell location until clicking escape.