fix: remove drop-down layer of editor (#1545)

* fix: editors with drop-down layer to follow scrolling * test: add tests for editors with drop-down layer to follow scrolling * chore: apply code reviews * chore: fix lint error * test: add tests for remove drop-down layer of editor * fix: remove drop-down layer of editor * chore: remove destructuring * chore: apply code reviews
nhn · Jan 7, 2022 · 13947c1 · 13947c1
1 parent 95eb78f
commit 13947c1
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 10 deletions.
diff --git a/packages/toast-ui.grid/cypress/integration/editor.spec.ts b/packages/toast-ui.grid/cypress/integration/editor.spec.ts
@@ -345,8 +345,8 @@ it('should do synchronous rendering of the editing cell', () => {
 });
 
 describe('select, checkbox, radio editor', () => {
+  const dataForGridWithType = [{ name: '1' }, { name: '2' }, { name: '3' }, { name: '4' }];
   function createGridWithType(type: string) {
-    const data = [{ name: '1' }, { name: '2' }, { name: '3' }, { name: '4' }];
     const columns = [
       {
         name: 'name',
@@ -364,7 +364,7 @@ describe('select, checkbox, radio editor', () => {
       },
     ];
 
-    cy.createGrid({ data, columns });
+    cy.createGrid({ data: dataForGridWithType, columns });
   }
 
   context('UI', () => {
@@ -452,6 +452,26 @@ describe('select, checkbox, radio editor', () => {
       assertOptionHighlighted(3);
     });
   });
+
+  describe('remove drop-down layer', () => {
+    ['radio', 'select', 'checkbox'].forEach((type) => {
+      it(`should remove drop-down layer when calling cancelEditing() API (${type})`, () => {
+        createGridWithType(type);
+
+        cy.gridInstance().invoke('cancelEditing');
+
+        cy.getByCls('editor-select-box-layer').should('be.not.visible');
+      });
+
+      it(`should remove drop-down layer when calling resetData() API (${type})`, () => {
+        createGridWithType(type);
+
+        cy.gridInstance().invoke('resetData', dataForGridWithType);
+
+        cy.getByCls('editor-select-box-layer').should('be.not.visible');
+      });
+    });
+  });
 });
 
 // @TODO: should rewrite test case after modifying casting editing value
@@ -586,7 +606,7 @@ describe('original cell value should be kept', () => {
   });
 });
 
-describe.only('Scroll with editor that has drop-down layer', () => {
+describe('Scroll with editor that has drop-down layer', () => {
   function scrollTo(position: Cypress.PositionType) {
     cy.getByCls('rside-area', 'body-area').wait(0).scrollTo(position);
   }

diff --git a/packages/toast-ui.grid/src/view/editingLayer.tsx b/packages/toast-ui.grid/src/view/editingLayer.tsx
@@ -88,9 +88,6 @@ export class EditingLayerComp extends Component<Props> {
   private cancelEditing() {
     const { rowKey, columnName, value } = this.getEditingCellInfo();
 
-    // eslint-disable-next-line no-unused-expressions
-    this.editor?.beforeDestroy?.();
-
     this.props.dispatch('finishEditing', rowKey, columnName, value, {
       save: false,
       triggeredByKey: true,
@@ -104,10 +101,6 @@ export class EditingLayerComp extends Component<Props> {
       const { rowKey, columnName, value } = this.getEditingCellInfo();
 
       dispatch('setValue', rowKey, columnName, value);
-
-      // eslint-disable-next-line no-unused-expressions
-      this.editor?.beforeDestroy?.();
-
       dispatch('finishEditing', rowKey, columnName, value, { save: true, triggeredByKey });
     }
   }
@@ -195,6 +188,11 @@ export class EditingLayerComp extends Component<Props> {
     } = this.props;
     const { focusedColumnName, focusedRowKey, active, forcedDestroyEditing } = nextProps;
 
+    if (prevActive && !active) {
+      // eslint-disable-next-line no-unused-expressions
+      this.editor?.beforeDestroy?.();
+    }
+
     if (
       (prevActive && !active && forcedDestroyEditing) ||
       (prevActive &&