diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx index 46f502954..c41592b0e 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx @@ -163,6 +163,7 @@ export class ModusTableCellEditor { size="large" show-calendar-icon="true" value={this.value as string} + onBlur={this.handleBlur} onValueChange={(e: CustomEvent) => { this.editedValue = e.detail[valueKey]; }}> diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx index f0cee1a7c..4ff597375 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx @@ -24,6 +24,7 @@ import { KEYBOARD_ENTER, KEYBOARD_ESCAPE, COLUMN_DEF_DATATYPE_BADGE, + KEYBOARD_TAB, } from '../../../modus-table.constants'; import NavigateTableCells from '../../../utilities/table-cell-navigation.utility'; import { CellFormatter } from '../../../utilities/table-cell-formatter.utility'; @@ -168,10 +169,29 @@ export class ModusTableCellMain { const key = event.key?.toLowerCase(); const isCellEditable = this.cell.column.columnDef[this.cellEditableKey]; - if (isCellEditable && !this.editMode && key === KEYBOARD_ENTER) { this.editMode = true; event.stopPropagation(); + } else if (isCellEditable && this.editMode && key === KEYBOARD_TAB) { + const isShiftPressed = event.shiftKey; + NavigateTableCells({ + eventKey: isShiftPressed ? 'shift+tab' : event.key, + cellElement: this.cellEl, + isCellEditable: isCellEditable, + onNavigateComplete: (cellElement) => { + if (cellElement) { + cellElement.focus(); + const cellComponent = cellElement; + if (cellComponent) { + (cellComponent as any).componentOnReady().then((componentInstance) => { + const nextRowIndex = componentInstance.cell.row.index.toString(); + const nextColumnId = componentInstance.cell.column.id; + componentInstance.handleCellEdit(nextRowIndex, nextColumnId); + }); + } + } + }, + }); } else { NavigateTableCells({ eventKey: event.key, diff --git a/stencil-workspace/src/components/modus-table/utilities/table-cell-navigation.utility.tsx b/stencil-workspace/src/components/modus-table/utilities/table-cell-navigation.utility.tsx index 2a161a6b4..c1f00d26f 100644 --- a/stencil-workspace/src/components/modus-table/utilities/table-cell-navigation.utility.tsx +++ b/stencil-workspace/src/components/modus-table/utilities/table-cell-navigation.utility.tsx @@ -4,17 +4,19 @@ import { KEYBOARD_ESCAPE, KEYBOARD_LEFT, KEYBOARD_RIGHT, + KEYBOARD_TAB, KEYBOARD_UP, } from '../modus-table.constants'; interface NavigateTableCellsProps { eventKey: string; cellElement: HTMLElement; + isCellEditable?: boolean; + onNavigateComplete?: (cell: HTMLElement) => void; } export default function NavigateTableCells(props: NavigateTableCellsProps) { - const { eventKey: key, cellElement: cell } = props; - let nextCell: HTMLElement; - + const { eventKey: key, cellElement: cell, onNavigateComplete, isCellEditable } = props; + let nextCell, prevCell: HTMLElement; const row = cell.closest('tr') as HTMLTableRowElement; const index = Array.prototype.indexOf.call(row.children, cell); @@ -28,6 +30,20 @@ export default function NavigateTableCells(props: NavigateTableCellsProps) { case KEYBOARD_ESCAPE: // Pressing Escape does nothing but to retain the focus cell.focus(); break; + case 'shift+tab': + prevCell = + ((cell.previousSibling as HTMLElement)?.querySelector('modus-table-cell-main') as HTMLElement) || + ((row.previousSibling?.lastChild as HTMLElement)?.querySelector('modus-table-cell-main') as HTMLElement); + + if (prevCell && isCellEditable) onNavigateComplete(prevCell); + break; + case KEYBOARD_TAB: + nextCell = + ((cell.nextSibling as HTMLElement)?.querySelector('modus-table-cell-main') as HTMLElement) || + ((row.nextSibling as HTMLElement)?.querySelector('modus-table-cell-main') as HTMLElement); + + if (nextCell && isCellEditable) onNavigateComplete(nextCell); + break; case KEYBOARD_RIGHT: // Moves to right cell nextCell = cell.nextSibling as HTMLElement; nextCell?.focus();