fix: finish editing when type enter from last cell when using moveDir…

…ectionOnEnter
nhn · Jan 4, 2024 · 293dd57 · 293dd57
1 parent fce9765
commit 293dd57
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 13 deletions.
diff --git a/packages/toast-ui.grid/src/dispatch/keyboard.ts b/packages/toast-ui.grid/src/dispatch/keyboard.ts
@@ -2,7 +2,7 @@ import { Store } from '@t/store';
 import { SelectionRange } from '@t/store/selection';
 import { EnterCommandType, KeyboardEventCommandType, TabCommandType } from '../helper/keyboard';
 import { getNextCellIndex, getRemoveRange, getNextCellIndexWithRowSpan } from '../query/keyboard';
-import { changeFocus, startEditing } from './focus';
+import { changeFocus, saveAndFinishEditing, startEditing } from './focus';
 import { changeSelectionRange } from './selection';
 import { isRowHeader } from '../helper/column';
 import { getRowRangeWithRowSpan, isRowSpanEnabled } from '../query/rowSpan';
@@ -64,7 +64,11 @@ export function editFocus(store: Store, command: KeyboardEventCommandType) {
   }
 }
 
-export function moveTabAndEnterFocus(store: Store, command: TabCommandType | EnterCommandType) {
+export function moveTabAndEnterFocus(
+  store: Store,
+  command: TabCommandType | EnterCommandType,
+  moveFocusByEnter = false
+) {
   const { focus, data, column, id } = store;
   const { visibleColumnsWithRowHeader } = column;
   const { rowKey, columnName, rowIndex, totalColumnIndex: columnIndex } = focus;
@@ -76,19 +80,21 @@ export function moveTabAndEnterFocus(store: Store, command: TabCommandType | Ent
   const [nextRowIndex, nextColumnIndex] = getNextCellIndex(store, command, [rowIndex, columnIndex]);
   const nextRowKey = getRowKeyByIndexWithPageRange(data, nextRowIndex);
   const nextColumnName = visibleColumnsWithRowHeader[nextColumnIndex].name;
+  const moveAndEditFromLastCellByEnter =
+    rowIndex === nextRowIndex && columnIndex === nextColumnIndex && moveFocusByEnter;
 
   if (!isRowHeader(nextColumnName)) {
     focus.navigating = true;
     changeFocus(store, nextRowKey, nextColumnName, id);
 
-    if (
-      focus.tabMode === 'moveAndEdit' &&
-      focus.rowKey === nextRowKey &&
-      focus.columnName === nextColumnName
-    ) {
-      setTimeout(() => {
-        startEditing(store, nextRowKey, nextColumnName);
-      });
+    if (focus.tabMode === 'moveAndEdit') {
+      if (moveAndEditFromLastCellByEnter) {
+        saveAndFinishEditing(store);
+      } else if (focus.rowKey === nextRowKey && focus.columnName === nextColumnName) {
+        setTimeout(() => {
+          startEditing(store, nextRowKey, nextColumnName);
+        });
+      }
     }
   }
 }

diff --git a/packages/toast-ui.grid/src/view/editingLayer.tsx b/packages/toast-ui.grid/src/view/editingLayer.tsx
@@ -58,11 +58,15 @@ export class EditingLayerComp extends Component<Props> {
 
   private longestTextWidths: { [columnName: string]: number } = {};
 
-  private moveTabAndEnterFocus(ev: KeyboardEvent, command: TabCommandType | EnterCommandType) {
+  private moveTabAndEnterFocus(
+    ev: KeyboardEvent,
+    command: TabCommandType | EnterCommandType,
+    moveFocusByEnter = false
+  ) {
     const { dispatch } = this.props;
 
     ev.preventDefault();
-    dispatch('moveTabAndEnterFocus', command);
+    dispatch('moveTabAndEnterFocus', command, moveFocusByEnter);
     dispatch('setScrollToFocus');
   }
 
@@ -75,7 +79,7 @@ export class EditingLayerComp extends Component<Props> {
         if (isUndefined(moveDirectionOnEnter)) {
           this.saveAndFinishEditing(true);
         } else {
-          this.moveTabAndEnterFocus(ev, moveDirectionOnEnter);
+          this.moveTabAndEnterFocus(ev, moveDirectionOnEnter, true);
         }
         break;
       case 'esc':