fix(core/menu): close overlays if menu item is clicked

siemens · Nov 4, 2022 · 59b5fe4 · 59b5fe4
1 parent 39ff691
commit 59b5fe4
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 34 deletions.
diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -8626,4 +8626,4 @@
       "listeners": []
     }
   ]
-}
+}
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -2578,10 +2578,6 @@ declare namespace LocalJSX {
           * Map Sidebar expanded
          */
         "onMapExpandChange"?: (event: CustomEvent<boolean>) => void;
-        /**
-          * Event to emit to parent that the item was selected
-         */
-        "onOverlayClose"?: (event: CustomEvent<boolean>) => void;
         /**
           * Is about tab visible
          */
@@ -2696,10 +2692,6 @@ declare namespace LocalJSX {
           * Show notification cound on tab
          */
         "notifications"?: number;
-        /**
-          * Event to emit to parent that the item was selected
-         */
-        "onOnClick"?: (event: CustomEvent<boolean>) => void;
         /**
           * Icon name from @siemens/ix-icons
          */

diff --git a/packages/core/src/components/menu-item/menu-item.tsx b/packages/core/src/components/menu-item/menu-item.tsx
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { Component, Element, h, Host, Prop, State, Event, EventEmitter } from '@stencil/core';
+import { Component, Element, h, Host, Prop, State } from '@stencil/core';
 
 @Component({
   tag: 'ix-menu-item',
@@ -49,11 +49,6 @@ export class MenuItem {
 
   @State() title: string;
 
-  /**
-   * Event to emit to parent that the item was selected
-   */
-  @Event() onClick: EventEmitter<boolean>;
-
   get tabLabel() {
     return this.hostElement.querySelector('.tab-text');
   }
@@ -66,14 +61,9 @@ export class MenuItem {
     }
   }
 
-  private clicked = () => {
-    this.onClick.emit(true)
-  }
-
   render() {
     return (
       <Host
-        onClick={this.clicked}
         class={{
           disabled: this.disabled,
           'home-tab': this.home,

diff --git a/packages/core/src/components/menu/menu.tsx b/packages/core/src/components/menu/menu.tsx
@@ -123,19 +123,6 @@ export class Menu {
 
   @State() isMoreTabEmpty = false;
 
-  /**
-   * Event to emit to parent that the item was selected
-   */
-   @Event() overlayClose: EventEmitter<boolean>;
-
-  @Listen('onClick',{target: "body"})
-    closeMenu(event: CustomEvent) {
-      if(event.detail === true){
-        this.expand = false;
-        this.overlayClose.emit(true)
-      }
-    }
-
   private readonly domObserver = new MutationObserver(
     this.onDomChange.bind(this)
   );
@@ -671,7 +658,19 @@ export class Menu {
     return this.mapExpand ? 'double-chevron-left' : 'double-chevron-right';
   }
 
+  private closeOverlay(event: MouseEvent) {
+    const path = event.composedPath();
+    const shouldCloseOverlay = path.some((element: HTMLElement) => {
+      if (element.tagName !== 'IX-MENU-ITEM') {
+        return false;
+      }
 
+      if (!element.id) {
+        return true;
+      }
+    });
+    return shouldCloseOverlay;
+  }
 
   render() {
     return (
@@ -685,8 +684,11 @@ export class Menu {
             menu: true,
             expanded: this.expand,
           }}
-          onClick={() => {
+          onClick={(event) => {
             this.resetActiveTab();
+            if (this.closeOverlay(event)) {
+              this.resetOverlay();
+            }
           }}
         >
           <div
@@ -778,6 +780,7 @@ export class Menu {
           <div class="bottom-tab-divider"></div>
           {this.enableSettings && !this.isSettingsEmpty ? (
             <ix-menu-item
+              id="settings"
               class={{
                 'internal-tab': true,
                 'bottom-tab': true,