From 92f49d891f4dc16a3221690c8e9bdbe0481b080f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8C=80=EC=97=B0?= <daeyeon.kim@nhn.com>
Date: Mon, 25 Oct 2021 18:22:47 +0900
Subject: [PATCH] fix: editing occurs error after filter (fix #1456) (#1487)

* fix: editing occurs error after filter

* test: add test for focus on editing after filter

* fix: not work when rowKey is zero

* chore: apply code reviews

* chore: apply code reviews on isRowFilt

chore: correct typo

* chore: apply code reviews

* chore: fix lint error
---
 .../cypress/integration/data.spec.ts          | 35 +++++++++++++++++++
 packages/toast-ui.grid/src/dispatch/data.ts   | 14 ++++++--
 2 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/packages/toast-ui.grid/cypress/integration/data.spec.ts b/packages/toast-ui.grid/cypress/integration/data.spec.ts
index 204dc266e..a8409d469 100644
--- a/packages/toast-ui.grid/cypress/integration/data.spec.ts
+++ b/packages/toast-ui.grid/cypress/integration/data.spec.ts
@@ -722,6 +722,24 @@ describe('setRow()', () => {
 
     cy.getCell(1, 'name').should('have.text', 'observable');
   });
+
+  it.only('should destroy the focusing layer, only when row will be filtered', () => {
+    createGrid();
+    cy.gridInstance().invoke('setFilter', 'age', 'number');
+    invokeFilter('age', [{ code: 'gt', value: 5 }]);
+
+    cy.getCellByIdx(0, 0).click();
+
+    cy.gridInstance().invoke('setValue', 0, 'age', '6');
+
+    cy.getByCls('layer-focus').should('exist');
+
+    cy.gridInstance().invoke('setValue', 0, 'age', '0');
+
+    cy.gridInstance()
+      .invoke('getFocusedCell')
+      .should('eql', { columnName: null, rowKey: null, value: null });
+  });
 });
 
 describe('moveRow()', () => {
@@ -895,6 +913,23 @@ describe('setValue()', () => {
       ['Lee', '20'],
     ]);
   });
+
+  it('should destroy the focusing layer, only when row will be filtered', () => {
+    cy.gridInstance().invoke('setFilter', 'age', 'number');
+    invokeFilter('age', [{ code: 'gt', value: 5 }]);
+
+    cy.getCellByIdx(0, 0).click();
+
+    cy.gridInstance().invoke('setValue', 0, 'age', '6');
+
+    cy.getByCls('layer-focus').should('exist');
+
+    cy.gridInstance().invoke('setValue', 0, 'age', '0');
+
+    cy.gridInstance()
+      .invoke('getFocusedCell')
+      .should('eql', { columnName: null, rowKey: null, value: null });
+  });
 });
 
 it('should change the value of the hidden cell', () => {
diff --git a/packages/toast-ui.grid/src/dispatch/data.ts b/packages/toast-ui.grid/src/dispatch/data.ts
index 7c9a0490e..ed44ae51e 100644
--- a/packages/toast-ui.grid/src/dispatch/data.ts
+++ b/packages/toast-ui.grid/src/dispatch/data.ts
@@ -72,7 +72,11 @@ import { setColumnWidthsByText, setAutoResizingColumnWidths } from './column';
 import { fitRowHeightWhenMovingRow } from './renderState';
 
 function updateHeightsWithFilteredData(store: Store) {
-  if (store.data.filters) {
+  const { data, focus } = store;
+  const { filteredRawData } = data;
+  const { rowKey } = focus;
+  // if (isRowFiltered(store, store.focus.rowKey)) {
+  if (!filteredRawData.some((row) => row.rowKey === rowKey)) {
     initFocus(store);
   }
   updateHeights(store);
@@ -180,7 +184,9 @@ export function setValue(
     sort(store, columnName, columns[index].ascending, true, false);
   }
 
-  updateHeightsWithFilteredData(store);
+  setTimeout(() => {
+    updateHeightsWithFilteredData(store);
+  });
   updateSummaryValueByCell(store, columnName, { orgValue, value });
   getDataManager(id).push('UPDATE', targetRow);
 
@@ -693,7 +699,9 @@ export function setRow(store: Store, rowIndex: number, row: OptRow) {
 
   getDataManager(id).push('UPDATE', rawRow);
 
-  updateHeightsWithFilteredData(store);
+  setTimeout(() => {
+    updateHeightsWithFilteredData(store);
+  });
   updateSummaryValueByRow(store, rawRow, { type: 'SET', orgRow });
   postUpdateAfterManipulation(store, rowIndex, 'DONE');
 }