diff --git a/e2e/context-menu.e2e-spec.ts b/e2e/context-menu.e2e-spec.ts index bf85aed6a0..42a845aff6 100644 --- a/e2e/context-menu.e2e-spec.ts +++ b/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', () => { diff --git a/src/app/context-menu-test/context-menu-test.component.ts b/src/app/context-menu-test/context-menu-test.component.ts index 8ad0f47f30..0753e77149 100644 --- a/src/app/context-menu-test/context-menu-test.component.ts +++ b/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 = [ diff --git a/src/framework/theme/components/context-menu/context-menu.directive.ts b/src/framework/theme/components/context-menu/context-menu.directive.ts index c91ed56605..a5d515d0c0 100644 --- a/src/framework/theme/components/context-menu/context-menu.directive.ts +++ b/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,12 +100,16 @@ 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, @@ -112,7 +117,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,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()); + } }