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 });
     }
   };