diff --git a/packages/toast-ui.grid/cypress/integration/keyMap.spec.ts b/packages/toast-ui.grid/cypress/integration/keyMap.spec.ts index f03f8cc43..e6a76ca98 100644 --- 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 index 1ee3ddf62..a582b65d6 100644 --- 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 index 44861bd2e..deaf804cc 100644 --- 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 { 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 { if (isUndefined(moveDirectionOnEnter)) { this.saveAndFinishEditing(true); } else { - this.moveTabAndEnterFocus(ev, moveDirectionOnEnter); + this.moveTabAndEnterFocus(ev, moveDirectionOnEnter, true); } break; case 'esc':