fix(context-menu): hide on menu item click (#431)

e2e/context-menu.e2e-spec.ts

@@ -9,17 +9,27 @@ describe('nb-context-menu', () => {
     browser.get('#/context-menu').then(done);
   });
 
+  it('have to hide when click on item', () => {
+    element(withContextMenu).click();
+    const containerContent = element(popover).all(by.css('nb-menu > ul > li')).get(2);
+    expect(containerContent.isPresent()).toBeTruthy();
+
+    containerContent.click();
+    expect(containerContent.isPresent()).toBeFalsy();
+  });
+
   it('have to be opened by click', () => {
     element(withContextMenu).click();
     const containerContent = element(popover).element(by.css('nb-menu > ul'));
+
     expect(containerContent.isPresent()).toBeTruthy();
   });
 
-  it('should have two menu items', () => {
+  it('should have three menu items', () => {
     element(withContextMenu).click();
     const menuItems = element(popover).all(by.css('nb-menu > ul > li'));
 
-    expect(menuItems.count()).toEqual(2);
+    expect(menuItems.count()).toEqual(3);
   });
 
   it('have to open user page after click on first item', () => {

src/app/context-menu-test/context-menu-test.component.ts

@@ -29,6 +29,7 @@ export class NbContextMenuTestComponent {
   items = [
     { title: 'Profile', link: '/user' },
     { title: 'Logout', link: '/popover' },
+    { title: 'Another action' },
   ];
 
   itemsWithIcons = [

src/framework/theme/components/context-menu/context-menu.directive.ts

@@ -8,8 +8,9 @@ import {
   ComponentFactoryResolver, Directive, ElementRef, HostListener, Inject, Input, OnDestroy,
   OnInit, PLATFORM_ID,
 } from '@angular/core';
+import { filter, takeWhile } from 'rxjs/operators';
 import { NbPopoverDirective } from '../popover/popover.directive';
-import { NbMenuItem } from '../menu/menu.service';
+import { NbMenuItem, NbMenuService } from '../menu/menu.service';
 import { NbThemeService } from '../../services/theme.service';
 import { NbPopoverAdjustment, NbPopoverPlacement } from '../popover/helpers/model';
 import { NbContextMenuComponent } from './context-menu.component';
@@ -99,20 +100,25 @@ export class NbContextMenuDirective implements OnInit, OnDestroy {
    * */
   @Input('nbContextMenuTag')
   set tag(tag: string) {
+    this.menuTag = tag;
     this.popover.context = Object.assign(this.context, { tag });
   }
 
   protected popover: NbPopoverDirective;
   protected context = {};
 
+  private menuTag: string;
+  private alive: boolean = true;
+
   constructor(hostRef: ElementRef,
               themeService: NbThemeService,
               componentFactoryResolver: ComponentFactoryResolver,
               positioningHelper: NbPositioningHelper,
               adjustmentHelper: NbAdjustmentHelper,
               triggerHelper: NbTriggerHelper,
               @Inject(PLATFORM_ID) platformId,
-              placementHelper: NbPlacementHelper) {
+              placementHelper: NbPlacementHelper,
+              private menuService: NbMenuService) {
     /**
      * Initialize popover with all the important inputs.
      * */
@@ -131,10 +137,12 @@ export class NbContextMenuDirective implements OnInit, OnDestroy {
 
   ngOnInit() {
     this.popover.ngOnInit();
+    this.subscribeOnItemClick();
   }
 
   ngOnDestroy() {
     this.popover.ngOnDestroy();
+    this.alive = false;
   }
 
   /**
@@ -172,4 +180,13 @@ export class NbContextMenuDirective implements OnInit, OnDestroy {
       throw Error(`List of menu items expected, but given: ${items}`)
     }
   }
+
+  private subscribeOnItemClick() {
+    this.menuService.onItemClick()
+      .pipe(
+        takeWhile(() => this.alive),
+        filter(({tag}) => tag === this.menuTag),
+      )
+      .subscribe(() => this.hide());
+  }
 }