Table : update edit mode tab to navigate

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<ModusDateInputEventDetails>) => {
             this.editedValue = e.detail[valueKey];
           }}></modus-date-input>

stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx

@@ -24,6 +24,7 @@
   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 @@
 
     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,

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();