Merge pull request #961 from infor-design/930-toolbar-overflow

930 - Improve IdsToolbarMoreActions menu

doc/CHANGELOG.md

@@ -26,6 +26,7 @@
 - `[Lookup]` Fixed the dirty tacker was not able to reset. ([#871](https://github.com/infor-design/enterprise-wc/issues/871))
 - `[Pager]` Fixed the direction of the icons in RTL mode. ([#865](https://github.com/infor-design/enterprise-wc/issues/865))
 - `[Popup]` Added ability to place the popup at any side of the align target ([#748](https://github.com/infor-design/enterprise-wc/issues/748))
+- `[PopupMenu]` Fixed a problem where nested Popup Menus would sometimes be impossible to open. ([#930](https://github.com/infor-design/enterprise-wc/issues/930))
 - `[Tabs]` Fixed styling for draggable tabs. ([#842](https://github.com/infor-design/enterprise-wc/issues/842))
 
 ## 1.0.0-beta.1

src/components/ids-menu/ids-menu-group.ts

@@ -107,21 +107,6 @@ export default class IdsMenuGroup extends Base {
     return [...this.children].filter((e) => e.matches('ids-menu-item'));
   }
 
-  /**
-   * References all icons that describe menu item contents (ignores dropdown/check icons)
-   * @readonly
-   * @returns {Array<HTMLElement>} list of items
-   */
-  get itemIcons() {
-    const icons: any = [];
-    this.items.forEach((item) => {
-      if (item.iconEl) {
-        icons.push(item.iconEl);
-      }
-    });
-    return icons;
-  }
-
   /**
    * Sets/Remove an alignment CSS class
    * @private

src/components/ids-menu/ids-menu-header.scss

@@ -14,6 +14,11 @@
 
   color: var(--ids-color-palette-slate-70);
   list-style: none;
+  text-align: start;
+
+  &.align-for-icons {
+    @include pl-40();
+  }
 }
 
 // Handle Themes

src/components/ids-menu/ids-menu-header.ts

@@ -26,6 +26,7 @@ export default class IdsMenuHeader extends Base {
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute(htmlAttributes.ROLE, 'none');
+    if (this.menu) this.decorateForIcon(this.menu.hasIcons);
   }
 
   static get attributes() {
@@ -34,7 +35,19 @@ export default class IdsMenuHeader extends Base {
     ];
   }
 
+  /**
+   * @readonly
+   * @returns {HTMLElement} the `IdsMenu` or `IdsPopupMenu` parent node.
+   */
+  get menu() {
+    return this.parentElement;
+  }
+
   template() {
     return `<div class="ids-menu-header" part="header" role="none"><slot></slot></div>`;
   }
+
+  decorateForIcon(doShow: boolean) {
+    this.container?.classList[doShow ? 'add' : 'remove']('align-for-icons');
+  }
 }

src/components/ids-menu/ids-menu-item.scss

@@ -15,6 +15,15 @@
   }
 }
 
+// Fixes usability issues with some slotted IDS components inside menu items
+::slotted(ids-text) {
+  pointer-events: none;
+}
+
+::slotted(ids-icon) {
+  pointer-events: none;
+}
+
 // Resets position rules for nested menus
 ::slotted(ids-popup-menu) {
   position: relative;
@@ -106,6 +115,14 @@
     }
   }
 
+  &:not(.text-center),
+  &:not(.text-start),
+  &:not(.text-end) {
+    .ids-menu-item-text {
+      text-align: start;
+    }
+  }
+
   &.text-center,
   &.text-start,
   &.text-end {

src/components/ids-menu/ids-menu-item.ts

@@ -109,6 +109,7 @@ export default class IdsMenuItem extends Base {
       ...super.attributes,
       attributes.DISABLED,
       attributes.HIDDEN,
+      attributes.HIGHLIGHTED,
       attributes.ICON,
       attributes.SELECTED,
       attributes.SUBMENU,
@@ -147,33 +148,13 @@ export default class IdsMenuItem extends Base {
     this.detectHidden();
     this.detectSubmenu();
     this.detectSelectability();
-    this.decorateForIcon();
+    if (this.menu) this.decorateForIcon(this.menu.hasIcons);
   }
 
   /**
    * @returns {void}
    */
   attachEventHandlers() {
-    // On 'mouseenter', after a specified duration, run some events,
-    // including activation of submenus where applicable.
-    this.onEvent('mouseenter', this, () => {
-      // Highlight
-      this.menu.highlightItem(this);
-
-      // Tell the menu which item to use for converting a hover state to keyboard
-      if (!this.disabled) {
-        this.menu.lastHovered = this;
-      }
-    });
-
-    // On 'mouseleave', clear any pending timeouts, hide submenus if applicable,
-    // and unhighlight the item
-    this.onEvent('mouseleave', this, () => {
-      if (!this.hasSubmenu || this.submenu.hidden) {
-        this.unhighlight();
-      }
-    });
-
     // When any of this item's slots change, refresh the visual state of the item
     this.onEvent('slotchange', this.container, () => {
       this.refresh();
@@ -293,9 +274,11 @@ export default class IdsMenuItem extends Base {
     if (trueVal && this.disabled) {
       return;
     }
-    // If the item's submenu is open, don't unhighlight.
-    if (!trueVal && this.hasSubmenu && !this.submenu.hidden) {
-      return;
+
+    if (trueVal) {
+      this.setAttribute(attributes.HIGHLIGHTED, 'true');
+    } else {
+      this.removeAttribute(attributes.HIGHLIGHTED);
     }
 
     this.state.highlighted = trueVal;
@@ -315,6 +298,7 @@ export default class IdsMenuItem extends Base {
    */
   highlight() {
     this.highlighted = true;
+    this.triggerEvent('highlighted', this, { bubbles: true, detail: { elem: this } });
   }
 
   /**
@@ -388,11 +372,11 @@ export default class IdsMenuItem extends Base {
   /**
    * Updates the alignment of text/icon content in the menu item to account for icons
    * that are present either on this menu item, or another one inside this menu item's group.
+   * @param {boolean} doShow true if the menu item should be decorated
    * @private
    */
-  decorateForIcon() {
-    const hasIcons = this.group.itemIcons.length > 0;
-    this.container?.classList[hasIcons ? 'add' : 'remove']('has-icon');
+  decorateForIcon(doShow: boolean) {
+    this.container?.classList[doShow ? 'add' : 'remove']('has-icon');
   }
 
   /**
@@ -701,7 +685,10 @@ export default class IdsMenuItem extends Base {
    * @returns {void}
    */
   focus() {
-    if (!this.hidden && !this.disabled) this.a?.focus();
+    if (!this.hidden && !this.disabled) {
+      this.a?.focus();
+      this.menu.highlightItem(this);
+    }
   }
 
   /**