imrpoved editing data with keyboard #331

packages/web/src/datagrid/DataGridCore.svelte

@@ -1194,7 +1194,7 @@
       // console.log('event', event.nativeEvent);
     }
 
-    if (event.keyCode == keycodes.f2) {
+    if (event.keyCode == keycodes.f2 || event.keyCode == keycodes.enter) {
       // @ts-ignore
       dispatchInsplaceEditor({ type: 'show', cell: currentCell, selectAll: true });
     }
@@ -1257,8 +1257,10 @@
           if (currentCell[0] == 0) return focusFilterEditor(currentCell[1]);
           return moveCurrentCell(currentCell[0] - 1, currentCell[1], event);
         case keycodes.downArrow:
-        case keycodes.enter:
           return moveCurrentCell(currentCell[0] + 1, currentCell[1], event);
+        case keycodes.enter:
+          if (!grider.editable) return moveCurrentCell(currentCell[0] + 1, currentCell[1], event);
+          break;
         case keycodes.leftArrow:
           return moveCurrentCell(currentCell[0], currentCell[1] - 1, event);
         case keycodes.rightArrow:
@@ -1272,7 +1274,17 @@
         case keycodes.pageDown:
           return moveCurrentCell(currentCell[0] + visibleRowCountLowerBound, currentCell[1], event);
         case keycodes.tab: {
-          if (event.shiftKey) {
+          return moveCurrentCellWithTabKey(event.shiftKey);
+        }
+      }
+    }
+    return null;
+  }
+
+  function moveCurrentCellWithTabKey(isShift) {
+    if (!isRegularCell(currentCell)) return null;
+
+    if (isShift) {
       if (currentCell[1] > 0) {
         return moveCurrentCell(currentCell[0], currentCell[1] - 1, event);
       } else {
@@ -1286,10 +1298,6 @@
       }
     }
   }
-      }
-    }
-    return null;
-  }
 
   function setCellValue(cell, value) {
     grider.setCellValue(cell[0], realColumnUniqueNames[cell[1]], value);
@@ -1431,10 +1439,24 @@
           selectAll: action.selectAll,
         };
       case 'close': {
-        const [row, col] = currentCell || [];
         if (domFocusField) domFocusField.focus();
-        // @ts-ignore
+        if (action.mode == 'enter' || action.mode == 'tab' || action.mode == 'shiftTab') {
-        if (action.mode == 'enter' && row) setTimeout(() => moveCurrentCell(row + 1, col), 0);
+          setTimeout(() => {
+            if (isRegularCell(currentCell)) {
+              switch (action.mode) {
+                case 'enter':
+                  moveCurrentCell(currentCell[0] + 1, currentCell[1]);
+                  break;
+                case 'tab':
+                  moveCurrentCellWithTabKey(false);
+                  break;
+                case 'shiftTab':
+                  moveCurrentCellWithTabKey(true);
+                  break;
+              }
+            }
+          }, 0);
+        }
         // if (action.mode == 'save') setTimeout(handleSave, 0);
         return {};
       }

packages/web/src/datagrid/InplaceEditor.svelte

@@ -36,18 +36,26 @@
         break;
       case keycodes.enter:
         if (isChangedRef.get()) {
-          // grider.setCellValue(rowIndex, uniqueName, editor.value);
           onSetValue(parseCellValue(domEditor.value));
           isChangedRef.set(false);
         }
         domEditor.blur();
+        event.preventDefault();
         dispatchInsplaceEditor({ type: 'close', mode: 'enter' });
         break;
+      case keycodes.tab:
+        if (isChangedRef.get()) {
+          onSetValue(parseCellValue(domEditor.value));
+          isChangedRef.set(false);
+        }
+        domEditor.blur();
+        event.preventDefault();
+        dispatchInsplaceEditor({ type: 'close', mode: event.shiftKey ? 'shiftTab' : 'tab' });
+        break;
       case keycodes.s:
         if (isCtrlOrCommandKey(event)) {
           if (isChangedRef.get()) {
             onSetValue(parseCellValue(domEditor.value));
-            // grider.setCellValue(rowIndex, uniqueName, editor.value);
             isChangedRef.set(false);
           }
           event.preventDefault();