fix(common): mouseover disabled sub-menu shouldn't open it (#1167)

- the logic should be the same as the sub-menu click event, if the item is disabled (or is a didiver), then we shouldn't go further and not try to open it
ghiscoding · Oct 31, 2023 · 550f103 · 550f103
1 parent 7e8d80e
commit 550f103
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 21 deletions.
diff --git a/packages/common/src/extensions/menuBaseClass.ts b/packages/common/src/extensions/menuBaseClass.ts
@@ -299,13 +299,6 @@ export class MenuBaseClass<M extends CellMenu | ContextMenu | GridMenu | HeaderM
           undefined,
           eventGroupName
         );
-        // this._bindEventService.bind(commandLiElm, 'mouseover', ((e: DOMMouseOrTouchEvent<HTMLDivElement>) => {
-        //   if ((item as MenuCommandItem).commandItems || (item as MenuOptionItem).optionItems || (item as HeaderMenuCommandItem).items) {
-        //     (this as any).repositionSubMenu(item, itemType, args.level, e);
-        //   } else if (level === 0) {
-        //     this.disposeSubMenus();
-        //   }
-        // }) as EventListener);
       }
 
       // the option/command item could be a sub-menu if it has another list of commands/options

diff --git a/packages/common/src/extensions/menuFromCellBaseClass.ts b/packages/common/src/extensions/menuFromCellBaseClass.ts
@@ -263,11 +263,13 @@ export class MenuFromCellBaseClass<M extends CellMenu | ContextMenu> extends Men
   }
 
   protected handleMenuItemMouseOver(e: DOMMouseOrTouchEvent<HTMLElement>, type: MenuType, item: ExtractMenuType<ExtendableItemTypes, MenuType>, level = 0) {
-    if ((item as MenuCommandItem).commandItems || (item as MenuOptionItem).optionItems || (item as HeaderMenuCommandItem).items) {
-      this.repositionSubMenu(item, type, level, e);
-      this._lastMenuTypeClicked = type;
-    } else if (level === 0) {
-      this.disposeSubMenus();
+    if ((item as never)?.[type] !== undefined && item !== 'divider' && !item.disabled && !(item as MenuCommandItem | MenuOptionItem).divider) {
+      if ((item as MenuCommandItem).commandItems || (item as MenuOptionItem).optionItems || (item as HeaderMenuCommandItem).items) {
+        this.repositionSubMenu(item, type, level, e);
+        this._lastMenuTypeClicked = type;
+      } else if (level === 0) {
+        this.disposeSubMenus();
+      }
     }
   }
 

diff --git a/packages/common/src/extensions/slickGridMenu.ts b/packages/common/src/extensions/slickGridMenu.ts
@@ -886,10 +886,12 @@ export class SlickGridMenu extends MenuBaseClass<GridMenu> {
   }
 
   protected handleMenuItemMouseOver(e: DOMMouseOrTouchEvent<HTMLElement>, _type: MenuType, item: ExtractMenuType<ExtendableItemTypes, MenuType>, level = 0) {
-    if ((item as GridMenuItem).commandItems) {
-      this.repositionSubMenu(e, item, level);
-    } else if (level === 0) {
-      this.disposeSubMenus();
+    if (item !== 'divider' && !item.disabled && !(item as GridMenuItem).divider) {
+      if ((item as GridMenuItem).commandItems) {
+        this.repositionSubMenu(e, item, level);
+      } else if (level === 0) {
+        this.disposeSubMenus();
+      }
     }
   }
 

diff --git a/packages/common/src/extensions/slickHeaderMenu.ts b/packages/common/src/extensions/slickHeaderMenu.ts
@@ -322,10 +322,12 @@ export class SlickHeaderMenu extends MenuBaseClass<HeaderMenu> {
   }
 
   protected handleMenuItemMouseOver(e: DOMMouseOrTouchEvent<HTMLElement>, _type: MenuType, item: ExtractMenuType<ExtendableItemTypes, MenuType>, level = 0, columnDef?: Column) {
-    if ((item as HeaderMenuCommandItem).commandItems || (item as HeaderMenuCommandItem).items) {
-      this.repositionSubMenu(e, item as HeaderMenuCommandItem, level, columnDef as Column);
-    } else if (level === 0) {
-      this.disposeSubMenus();
+    if (item !== 'divider' && !item.disabled && !(item as HeaderMenuCommandItem).divider) {
+      if ((item as HeaderMenuCommandItem).commandItems || (item as HeaderMenuCommandItem).items) {
+        this.repositionSubMenu(e, item as HeaderMenuCommandItem, level, columnDef as Column);
+      } else if (level === 0) {
+        this.disposeSubMenus();
+      }
     }
   }
 

diff --git a/packages/common/src/global-grid-options.ts b/packages/common/src/global-grid-options.ts
@@ -41,6 +41,7 @@ export const GlobalGridOptions: GridOption = {
     hideCommandSection: false,
     hideOptionSection: false,
     showBulletWhenIconMissing: true,
+    subItemChevronClass: 'mdi mdi-chevron-down mdi-rotate-270',
   },
   compositeEditorOptions: {
     labels: {
@@ -77,6 +78,7 @@ export const GlobalGridOptions: GridOption = {
     iconExportExcelCommand: 'fa fa-file-excel-o mdi mdi-file-excel-outline',
     iconExportTextDelimitedCommand: 'fa fa-download mdi mdi-download',
     showBulletWhenIconMissing: true,
+    subItemChevronClass: 'mdi mdi-chevron-down mdi-rotate-270',
   },
   customFooterOptions: {
     dateFormat: 'YYYY-MM-DD, hh:mm a',
@@ -211,6 +213,7 @@ export const GlobalGridOptions: GridOption = {
     menuWidth: 16,
     resizeOnShowHeaderRow: true,
     showBulletWhenIconMissing: true,
+    subItemChevronClass: 'mdi mdi-chevron-down mdi-rotate-270',
     headerColumnValueExtractor: pickerHeaderColumnValueExtractor
   },
   headerMenu: {
@@ -229,7 +232,8 @@ export const GlobalGridOptions: GridOption = {
     hideClearFilterCommand: false,
     hideClearSortCommand: false,
     hideFreezeColumnsCommand: true, // opt-in command
-    hideSortCommands: false
+    hideSortCommands: false,
+    subItemChevronClass: 'mdi mdi-chevron-down mdi-rotate-270',
   },
   ignoreAccentOnStringFilterAndSort: false,
   multiColumnSort: true,