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

…ectionOnEnter (#2007) * test: add test * fix: finish editing when type enter from last cell when using moveDirectionOnEnter
nhn · Jan 10, 2024 · 285f7ae · 285f7ae
1 parent 33f1766
commit 285f7ae
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 13 deletions.
diff --git a/packages/toast-ui.grid/cypress/integration/keyMap.spec.ts b/packages/toast-ui.grid/cypress/integration/keyMap.spec.ts
@@ -263,6 +263,29 @@ describe('Move focus on enter', () => {
 
     assertFocusedCell('name', 0);
   });
+
+  it('should finish editing on last cell', () => {
+    createGrid({
+      columns: [
+        { name: 'name', editor: 'text' },
+        { name: 'value', editor: 'text' },
+        { name: 'age', editor: 'text' },
+      ],
+      moveDirectionOnEnter: 'nextCell',
+    });
+    cy.getCellByIdx(3, 1).click();
+
+    clipboardType('{enter}');
+    editingLayerType('{enter}');
+
+    assertFocusedCell('age', 3);
+    cy.getByCls('layer-editing').should('be.visible');
+
+    editingLayerType('{enter}');
+
+    assertFocusedCell('age', 3);
+    cy.getByCls('layer-editing').should('not.be.visible');
+  });
 });
 
 describe('Selection', () => {

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':