Fixed to auto-close menu when click outside menu (#390)

future-architect · Jan 5, 2023 · 0a74c3f · 0a74c3f
1 parent 64eb933
commit 0a74c3f
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 3 deletions.
diff --git a/packages/cheetah-grid/package.json b/packages/cheetah-grid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cheetah-grid",
-  "version": "1.8.4",
+  "version": "1.8.5",
   "description": "Cheetah Grid is a high performance grid engine that works on canvas",
   "keywords": [
     "spreadsheet",
@@ -54,6 +54,7 @@
     "test:ff": "karma start --browsers Firefox",
     "test:ie": "karma start --min --browsers IE_no_addons",
     "test:chrome": "karma start --browsers Chrome",
+    "build-for-node-v18":  "cross-env NODE_OPTIONS=\"--openssl-legacy-provider\" npm run build",
     "build": "npm run build:ts && npm run build:webpack && npm run build:dts",
     "build:ts": "rimraf dist-ts && tsc --project ./tsconfig.json",
     "build:webpack": "cross-env NO_UPDATE_NOTIFIER=1 webpack",

diff --git a/packages/cheetah-grid/src/js/columns/action/internal/InlineMenuElement.ts b/packages/cheetah-grid/src/js/columns/action/internal/InlineMenuElement.ts
@@ -197,10 +197,25 @@ export class InlineMenuElement<T> {
   private _menu: HTMLUListElement;
   private _beforePropEditor?: EditorProps<T> | null;
   private _activeData?: ActiveData<T> | null;
+  private _registerBodyClickListener: () => void;
+  private _deregisterBodyClickListener: () => void;
   constructor() {
-    this._handler = new EventHandler();
+    const handler = (this._handler = new EventHandler());
     this._menu = createMenuElement();
     this._bindMenuEvents();
+
+    let bodyClickListenerId: number | undefined;
+    const deregisterBodyClickListener = (this._deregisterBodyClickListener =
+      () => handler.off(bodyClickListenerId));
+    this._registerBodyClickListener = () => {
+      deregisterBodyClickListener();
+      bodyClickListenerId = handler.on(
+        document.body,
+        "click",
+        this._onBodyClick.bind(this),
+        { capture: true }
+      );
+    };
   }
   dispose(): void {
     const menu = this._menu;
@@ -210,6 +225,7 @@ export class InlineMenuElement<T> {
     delete this._menu;
     this._beforePropEditor = null;
     menu.parentElement?.removeChild(menu);
+    this._deregisterBodyClickListener();
   }
   attach(
     grid: ListGridAPI<T>,
@@ -233,6 +249,7 @@ export class InlineMenuElement<T> {
     openMenu(grid, editor, col, row, value, options, menu);
     this._activeData = { grid, col, row, editor, options };
     this._beforePropEditor = editor;
+    this._registerBodyClickListener();
   }
   detach(gridFocus?: boolean): void {
     if (this._isActive()) {
@@ -247,6 +264,7 @@ export class InlineMenuElement<T> {
       }
     }
     this._activeData = null;
+    this._deregisterBodyClickListener();
   }
   _doChangeValue(valueindex: number | string): void {
     if (!this._isActive()) {
@@ -317,6 +335,22 @@ export class InlineMenuElement<T> {
       }
     });
   }
+  _onBodyClick(e: MouseEvent): void {
+    const el = e.target as Element | null;
+    if (!el) {
+      return;
+    }
+    if (this._menu.contains(el)) {
+      return;
+    }
+    if (this._isActive()) {
+      const { grid } = this._activeData!;
+      if (grid.getElement().contains(el)) {
+        return;
+      }
+    }
+    this.detach();
+  }
   _onKeydownEnter(
     _menu: HTMLUListElement,
     item: HTMLElement,

diff --git a/packages/cheetah-grid/src/test/ListGrid_sample.js b/packages/cheetah-grid/src/test/ListGrid_sample.js
@@ -60,6 +60,16 @@ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deseru
 	const columnAction = cheetahGrid.columns.action;
 	const records = generate(1000);
 	const startTime = new Date();
+	const menuOptions = [
+		{value: '', label: 'Empty'},
+		{value: '1', label: 'Option 1'},
+		{value: '2', label: 'Option 2'},
+		{value: '3', label: 'Option 3'},
+		{value: '4', label: 'Option 4'},
+		{value: '5', label: 'Option 5'},
+		{value: '6', label: 'Option 6'},
+		{value: '7', label: 'Option 7'},
+	];
 	const grid = new cheetahGrid.ListGrid({
 		parentElement: document.querySelector('#parent'),
 		allowRangePaste: true,
@@ -96,6 +106,15 @@ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deseru
 					{field: 'lname', caption: 'Last Name', width: 'auto', minWidth: '150px', action: 'input'},
 				],
 			},
+			{
+				field: 'menuValue',
+				caption: 'Menu',
+				width: '120px',
+				columnType: new cheetahGrid.columns.type.MenuColumn({options: menuOptions}),
+				action: new cheetahGrid.columns.action.InlineMenuEditor({
+					options: menuOptions,
+				}),
+			},
 			{
 				field: 'email',
 				caption: 'Email',

diff --git a/packages/vue-cheetah-grid/package.json b/packages/vue-cheetah-grid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-cheetah-grid",
-  "version": "1.8.4",
+  "version": "1.8.5",
   "description": "Cheetah Grid for Vue.js",
   "main": "lib/index.js",
   "unpkg": "dist/vueCheetahGrid.js",