fix: editors with drop-down layer to follow scrolling

packages/toast-ui.grid/cypress/integration/editor.spec.ts

@@ -3,6 +3,7 @@ import { CellValue } from '@t/store/data';
 import { createCustomLayerEditor, CustomTextEditor } from '../helper/customEditor';
 import { GridEventProps } from '@t/event';
 import { clickFilterBtn } from '../helper/util';
+import { cls } from '@/helper/dom';
 
 before(() => {
   cy.visit('/dist');
@@ -585,3 +586,66 @@ describe('original cell value should be kept', () => {
     cy.get('input').should('have.value', 'undefined');
   });
 });
+
+describe('Scroll with editor that has drop-down layer', () => {
+  function scrollTo(position: Cypress.PositionType) {
+    cy.get(`.${cls('rside-area')} .${cls('body-area')}`)
+      .wait(0)
+      .scrollTo(position);
+  }
+
+  beforeEach(() => {
+    const data = [
+      { id: '1', name: 'Kim', age: '10', school: '1', grade: 'First' },
+      { id: '2', name: 'Lee', age: '11', school: '1', grade: 'Second' },
+      { id: '3', name: 'Park', age: '12', school: '1', grade: 'First' },
+      { id: '4', name: 'Choi', age: '13', school: '1', grade: 'Second' },
+      { id: '5', name: 'Cho', age: '14', school: '1', grade: 'Third' },
+      { id: '6', name: 'Han', age: '14', school: '1', grade: 'Second' },
+      { id: '7', name: 'Lim', age: '14', school: '1', grade: 'First' },
+      { id: '8', name: 'Ahn', age: '14', school: '1', grade: 'Second' },
+      { id: '9', name: 'Ryu', age: '14', school: '1', grade: 'First' },
+    ];
+    const columns = [
+      { name: 'id', minWidth: 100 },
+      { name: 'name', minWidth: 100 },
+      {
+        name: 'school',
+        formatter: 'listItemText',
+        editor: {
+          type: 'select',
+          options: {
+            listItems: [
+              { text: 'Primary', value: '1' },
+              { text: 'Middle', value: '2' },
+              { text: 'High', value: '3' },
+            ],
+          },
+        },
+        minWidth: 100,
+      },
+      { name: 'age', minWidth: 100 },
+      {
+        name: 'grade',
+        minWidth: 100,
+      },
+    ];
+
+    cy.createGrid({ data, columns, width: 200, bodyHeight: 150 });
+  });
+
+  [
+    { direcion: 'down', position: 'bottom' },
+    { direcion: 'up', position: 'top' },
+    { direcion: 'right', position: 'right' },
+    { direcion: 'left', position: 'left' },
+  ].forEach(({ direcion, position }) => {
+    it(`should hides the drop-down layer when scrolling ${direcion}`, () => {
+      cy.gridInstance().invoke('startEditing', 4, 'school');
+
+      scrollTo(position as Cypress.PositionType);
+
+      cy.getByCls('editor-select-box-layer').should('be.not.visible');
+    });
+  });
+});

packages/toast-ui.grid/src/editor/checkbox.ts

@@ -1,10 +1,16 @@
-import { CellEditor, CellEditorProps, PortalEditingKeydown } from '@t/editor';
+import {
+  CellEditor,
+  CellEditorProps,
+  GridRectForDropDownLayerPos,
+  LayerPos,
+  PortalEditingKeydown,
+} from '@t/editor';
 import { CellValue, ListItem } from '@t/store/data';
 import { getListItems } from '../helper/editor';
 import { cls, hasClass } from '../helper/dom';
 import { getKeyStrokeString, isArrowKey } from '../helper/keyboard';
 import { findIndex, isNil } from '../helper/common';
-import { getContainerElement, setLayerPosition, setOpacity } from './dom';
+import { getContainerElement, setLayerPosition, setOpacity, moveLayer } from './dom';
 
 const LAYER_CLASSNAME = cls('editor-checkbox-list-layer');
 const LIST_ITEM_CLASSNAME = cls('editor-checkbox');
@@ -27,6 +33,8 @@ export class CheckboxEditor implements CellEditor {
 
   private elementIds: string[] = [];
 
+  private initLayerPos: LayerPos | null = null;
+
   public constructor(props: CellEditorProps) {
     const { columnInfo, width, formattedValue, portalEditingKeydown } = props;
     const el = document.createElement('div');
@@ -159,6 +167,12 @@ export class CheckboxEditor implements CellEditor {
       this.layer.querySelector('input')) as HTMLInputElement;
   }
 
+  public moveDropdownLayer(gridRect: GridRectForDropDownLayerPos) {
+    if (this.initLayerPos) {
+      moveLayer(this.layer, this.initLayerPos, gridRect);
+    }
+  }
+
   public getElement() {
     return this.el;
   }
@@ -189,7 +203,7 @@ export class CheckboxEditor implements CellEditor {
     // To prevent wrong stacked z-index context, layer append to grid container
     getContainerElement(this.el).appendChild(this.layer);
     // @ts-ignore
-    setLayerPosition(this.el, this.layer);
+    this.initLayerPos = setLayerPosition(this.el, this.layer);
 
     const checkedInput = this.getCheckedInput();
     if (checkedInput) {
@@ -204,5 +218,6 @@ export class CheckboxEditor implements CellEditor {
     this.layer.removeEventListener('mouseover', this.onMouseover);
     this.layer.removeEventListener('keydown', this.onKeydown);
     getContainerElement(this.el).removeChild(this.layer);
+    this.initLayerPos = null;
   }
 }

packages/toast-ui.grid/src/editor/datePicker.ts

@@ -1,9 +1,9 @@
 import TuiDatePicker from 'tui-date-picker';
 import { Dictionary } from '@t/options';
-import { CellEditor, CellEditorProps } from '@t/editor';
+import { CellEditor, CellEditorProps, GridRectForDropDownLayerPos, LayerPos } from '@t/editor';
 import { cls } from '../helper/dom';
 import { deepMergedCopy, isNumber, isString, isNil } from '../helper/common';
-import { setLayerPosition, getContainerElement, setOpacity } from './dom';
+import { setLayerPosition, getContainerElement, setOpacity, moveLayer } from './dom';
 
 export class DatePickerEditor implements CellEditor {
   public el: HTMLDivElement;
@@ -16,6 +16,8 @@ export class DatePickerEditor implements CellEditor {
 
   private iconEl?: HTMLElement;
 
+  private initLayerPos: LayerPos | null = null;
+
   private createInputElement() {
     const inputEl = document.createElement('input');
     inputEl.className = cls('content-text');
@@ -102,6 +104,12 @@ export class DatePickerEditor implements CellEditor {
     this.datePickerEl.on('close', () => this.focus());
   }
 
+  public moveDropdownLayer(gridRect: GridRectForDropDownLayerPos) {
+    if (this.initLayerPos) {
+      moveLayer(this.layer, this.initLayerPos, gridRect);
+    }
+  }
+
   public getElement() {
     return this.el;
   }
@@ -118,7 +126,13 @@ export class DatePickerEditor implements CellEditor {
     this.datePickerEl.open();
 
     // `this.layer.firstElementChild` is real datePicker layer(it is need to get total height)
-    setLayerPosition(this.el, this.layer, this.layer.firstElementChild as HTMLElement, true);
+    this.initLayerPos = setLayerPosition(
+      this.el,
+      this.layer,
+      this.layer.firstElementChild as HTMLElement,
+      true
+    );
+
     // To show the layer which has appropriate position
     setOpacity(this.layer, 1);
   }
@@ -129,5 +143,6 @@ export class DatePickerEditor implements CellEditor {
     }
     this.datePickerEl.destroy();
     getContainerElement(this.el).removeChild(this.layer);
+    this.initLayerPos = null;
   }
 }

packages/toast-ui.grid/src/editor/dom.ts

@@ -1,9 +1,22 @@
+import { GridRectForDropDownLayerPos, LayerPos } from '@t/editor';
+import { isBetween } from '../helper/common';
 import { findParentByClassName } from '../helper/dom';
 
 const INDENT = 5;
 const SCROLL_BAR_WIDTH = 17;
 const SCROLL_BAR_HEIGHT = 17;
 
+function isHidden(
+  top: number,
+  left: number,
+  { bodyHeight, bodyWidth, headerHeight, leftSideWidth }: GridRectForDropDownLayerPos
+) {
+  return !(
+    isBetween(top, headerHeight, bodyHeight + headerHeight) &&
+    isBetween(left, leftSideWidth, bodyWidth)
+  );
+}
+
 export function setOpacity(el: HTMLElement, opacity: number | string) {
   el.style.opacity = String(opacity);
 }
@@ -12,6 +25,23 @@ export function getContainerElement(el: HTMLElement) {
   return findParentByClassName(el, 'container')!;
 }
 
+export function moveLayer(
+  layerEl: HTMLElement,
+  initLayerPos: LayerPos,
+  gridRect: GridRectForDropDownLayerPos
+) {
+  if (initLayerPos) {
+    const { top, left } = initLayerPos;
+    const { initBodyScrollTop, initBodyScrollLeft, bodyScrollTop, bodyScrollLeft } = gridRect;
+    const newTop = top + initBodyScrollTop - bodyScrollTop;
+    const newLeft = left + initBodyScrollLeft - bodyScrollLeft;
+
+    layerEl.style.display = isHidden(newTop, newLeft, gridRect) ? 'none' : '';
+    layerEl.style.top = `${newTop}px`;
+    layerEl.style.left = `${newLeft}px`;
+  }
+}
+
 export function setLayerPosition(
   innerEl: HTMLElement,
   layerEl: HTMLElement,
@@ -34,15 +64,18 @@ export function setLayerPosition(
   const totalHeight = layerHeight + childElHeight;
   const totalWidth = layerWidth || childElWidth;
 
-  layerEl.style.top = `${
+  const newLayerTop =
     (layerTop + totalHeight > innerHeight - SCROLL_BAR_WIDTH
       ? innerHeight - totalHeight - INDENT - SCROLL_BAR_WIDTH
-      : layerTop) - containerRect.top
-  }px`;
-
-  layerEl.style.left = `${
+      : layerTop) - containerRect.top;
+  const newLayerLeft =
     (left + totalWidth > innerWidth - SCROLL_BAR_HEIGHT
       ? innerWidth - totalWidth - INDENT - SCROLL_BAR_HEIGHT
-      : left) - containerRect.left
-  }px`;
+      : left) - containerRect.left;
+
+  layerEl.style.top = `${newLayerTop}px`;
+  layerEl.style.left = `${newLayerLeft}px`;
+  layerEl.style.display = '';
+
+  return { top: newLayerTop, left: newLayerLeft };
 }

packages/toast-ui.grid/src/editor/select.ts

@@ -1,10 +1,16 @@
 import SelectBox from '@toast-ui/select-box';
 import '@toast-ui/select-box/dist/toastui-select-box.css';
-import { CellEditor, CellEditorProps, PortalEditingKeydown } from '@t/editor';
+import {
+  CellEditor,
+  CellEditorProps,
+  GridRectForDropDownLayerPos,
+  LayerPos,
+  PortalEditingKeydown,
+} from '@t/editor';
 import { CellValue, ListItem } from '@t/store/data';
 import { getListItems } from '../helper/editor';
 import { cls } from '../helper/dom';
-import { setLayerPosition, getContainerElement, setOpacity } from './dom';
+import { setLayerPosition, getContainerElement, setOpacity, moveLayer } from './dom';
 import { getKeyStrokeString } from '../helper/keyboard';
 import { includes, isNil } from '../helper/common';
 
@@ -21,6 +27,8 @@ export class SelectEditor implements CellEditor {
 
   private portalEditingKeydown: PortalEditingKeydown;
 
+  private initLayerPos: LayerPos | null = null;
+
   public constructor(props: CellEditorProps) {
     const { width, formattedValue, portalEditingKeydown } = props;
     const el = document.createElement('div');
@@ -93,6 +101,12 @@ export class SelectEditor implements CellEditor {
     this.selectBoxEl.input.focus();
   }
 
+  public moveDropdownLayer(gridRect: GridRectForDropDownLayerPos) {
+    if (this.initLayerPos) {
+      moveLayer(this.layer, this.initLayerPos, gridRect);
+    }
+  }
+
   public getElement() {
     return this.el;
   }
@@ -106,7 +120,7 @@ export class SelectEditor implements CellEditor {
     // To prevent wrong stacked z-index context, layer append to grid container
     getContainerElement(this.el).appendChild(this.layer);
     // @ts-ignore
-    setLayerPosition(this.el, this.layer, this.selectBoxEl.dropdown.el);
+    this.initLayerPos = setLayerPosition(this.el, this.layer, this.selectBoxEl.dropdown.el);
     this.focusSelectBox();
     this.isMounted = true;
     // To show the layer which has appropriate position
@@ -117,5 +131,6 @@ export class SelectEditor implements CellEditor {
     this.selectBoxEl.destroy();
     this.layer.removeEventListener('keydown', this.onKeydown);
     getContainerElement(this.el).removeChild(this.layer);
+    this.initLayerPos = null;
   }
 }

packages/toast-ui.grid/src/helper/common.ts

@@ -433,3 +433,7 @@ export function convertDataToText(data: string[][], delimiter: string) {
 export function silentSplice<T>(arr: T[], start: number, deleteCount: number, ...items: T[]): T[] {
   return Array.prototype.splice.call(arr, start, deleteCount, ...items);
 }
+
+export function isBetween(value: number, start: number, end: number) {
+  return value >= start && value <= end;
+}