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

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 } 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';
@@ -66,6 +67,8 @@ import { NbPlacementHelper } from '../popover/helpers/placement.helper';
 @Directive({ selector: '[nbContextMenu]' })
 export class NbContextMenuDirective implements OnInit, OnDestroy {
 
+  private menuTag: string;
+
   /**
    * Basic menu items, will be passed to the internal NbMenuComponent.
    * */
@@ -99,6 +102,7 @@ export class NbContextMenuDirective implements OnInit, OnDestroy {
    * */
   @Input('nbContextMenuTag')
   set tag(tag: string) {
+    this.menuTag = tag;
     this.popover.context = Object.assign(this.context, { tag });
   }
 
@@ -112,7 +116,8 @@ export class NbContextMenuDirective implements OnInit, OnDestroy {
               adjustmentHelper: NbAdjustmentHelper,
               triggerHelper: NbTriggerHelper,
               @Inject(PLATFORM_ID) platformId,
-              placementHelper: NbPlacementHelper) {
+              placementHelper: NbPlacementHelper,
+              private menuService: NbMenuService) {
     /**
      * Initialize popover with all the important inputs.
      * */
@@ -131,6 +136,7 @@ export class NbContextMenuDirective implements OnInit, OnDestroy {
 
   ngOnInit() {
     this.popover.ngOnInit();
+    this.subscribeOnItemClick();
   }
 
   ngOnDestroy() {
@@ -172,4 +178,10 @@ export class NbContextMenuDirective implements OnInit, OnDestroy {
       throw Error(`List of menu items expected, but given: ${items}`)
     }
   }
+
+  private subscribeOnItemClick() {
+    this.menuService.onItemClick()
+      .pipe(filter(({tag}) => tag === this.menuTag))
+      .subscribe(() => this.hide());
+  }
 }