From d9dbb8f582316d31b9766b7131d62aa23a99270b 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: Fri, 29 Oct 2021 10:56:29 +0900
Subject: [PATCH] fix: remove editing layer when filter button clicked (#1493)

* fix: remove editing layer when filter button clicked

* chore: add test
---
 .../toast-ui.grid/cypress/integration/editor.spec.ts | 12 ++++++++++++
 packages/toast-ui.grid/src/view/filterButton.tsx     |  1 +
 2 files changed, 13 insertions(+)

diff --git a/packages/toast-ui.grid/cypress/integration/editor.spec.ts b/packages/toast-ui.grid/cypress/integration/editor.spec.ts
index 03c0a5b2a..f005db965 100644
--- a/packages/toast-ui.grid/cypress/integration/editor.spec.ts
+++ b/packages/toast-ui.grid/cypress/integration/editor.spec.ts
@@ -2,6 +2,7 @@ import GridEvent from '@/event/gridEvent';
 import { CellValue } from '@t/store/data';
 import { createCustomLayerEditor, CustomTextEditor } from '../helper/customEditor';
 import { GridEventProps } from '@t/event';
+import { clickFilterBtn } from '../helper/util';
 
 before(() => {
   cy.visit('/dist');
@@ -63,6 +64,7 @@ describe('with interaction', () => {
       {
         name: 'name',
         editor: 'text',
+        filter: 'select',
       },
       { name: 'age' },
     ];
@@ -81,6 +83,16 @@ describe('with interaction', () => {
 
     cy.getByCls('layer-editing').should('be.not.visible');
   });
+
+  it('should destroy the editing later and save editing, when fileter button clicked', () => {
+    cy.gridInstance().invoke('startEditing', 0, 'name');
+    cy.getByCls('content-text').type('Kim');
+
+    clickFilterBtn();
+
+    cy.getCell(0, 'name').should('have.text', 'Kim');
+    cy.getByCls('layer-editing').should('be.not.visible');
+  });
 });
 
 describe('onBeforeChange, onAfterChange', () => {
diff --git a/packages/toast-ui.grid/src/view/filterButton.tsx b/packages/toast-ui.grid/src/view/filterButton.tsx
index 1031f9253..62831c798 100644
--- a/packages/toast-ui.grid/src/view/filterButton.tsx
+++ b/packages/toast-ui.grid/src/view/filterButton.tsx
@@ -36,6 +36,7 @@ class FilterButtonComp extends Component<Props> {
 
     if (!activeColumnAddress || activeColumnAddress.name !== columnName) {
       const left = target.getBoundingClientRect().left - offsetLeft - DISTANCE_FROM_ICON_TO_LAYER;
+      dispatch('saveAndFinishEditing');
       dispatch('setActiveColumnAddress', { name: columnName, left });
     }
   };