diff --git a/ng2-components/ng2-alfresco-core/src/components/context-menu/context-menu-holder.component.spec.ts b/ng2-components/ng2-alfresco-core/src/components/context-menu/context-menu-holder.component.spec.ts index 3264847114..1e79b8798b 100644 --- a/ng2-components/ng2-alfresco-core/src/components/context-menu/context-menu-holder.component.spec.ts +++ b/ng2-components/ng2-alfresco-core/src/components/context-menu/context-menu-holder.component.spec.ts @@ -28,6 +28,7 @@ describe('ContextMenuHolderComponent', () => { let contextMenuService: ContextMenuService; let overlayContainer = { getContainerElement: () => ({ + addEventListener: () => {}, querySelector: (val) => ({ name: val, clientWidth: 0, diff --git a/ng2-components/ng2-alfresco-core/src/components/context-menu/context-menu-holder.component.ts b/ng2-components/ng2-alfresco-core/src/components/context-menu/context-menu-holder.component.ts index 5fce6e1e5e..b9c02555de 100644 --- a/ng2-components/ng2-alfresco-core/src/components/context-menu/context-menu-holder.component.ts +++ b/ng2-components/ng2-alfresco-core/src/components/context-menu/context-menu-holder.component.ts @@ -17,7 +17,7 @@ import { OverlayContainer } from '@angular/cdk/overlay'; import { ViewportRuler } from '@angular/cdk/scrolling'; -import { Component, HostListener, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'; +import { Component, HostListener, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core'; import { MatMenuTrigger } from '@angular/material'; import { Subscription } from 'rxjs/Rx'; import { ContextMenuService } from './context-menu.service'; @@ -48,9 +48,13 @@ export class ContextMenuHolderComponent implements OnInit, OnDestroy { private openSubscription: Subscription; private closeSubscription: Subscription; private contextSubscription: Subscription; + private contextMenuListenerFn: () => void; - @Input() showIcons: boolean = false; - @ViewChild(MatMenuTrigger) menuTrigger: MatMenuTrigger; + @Input() + showIcons: boolean = false; + + @ViewChild(MatMenuTrigger) + menuTrigger: MatMenuTrigger; @HostListener('contextmenu', ['$event']) onShowContextMenu(event?: MouseEvent) { @@ -69,19 +73,39 @@ export class ContextMenuHolderComponent implements OnInit, OnDestroy { constructor( private viewport: ViewportRuler, private overlayContainer: OverlayContainer, - private contextMenuService: ContextMenuService + private contextMenuService: ContextMenuService, + private renderer: Renderer2 ) {} ngOnInit() { this.contextSubscription = this.contextMenuService.show.subscribe(e => this.showMenu(e.event, e.obj)); - this.openSubscription = this.menuTrigger.onMenuOpen.subscribe(() => this.menuElement = this.getContextMenuElement()); - this.closeSubscription = this.menuTrigger.onMenuClose.subscribe(() => this.menuElement = null); + + this.openSubscription = this.menuTrigger.onMenuOpen.subscribe(() => { + const container = this.overlayContainer.getContainerElement(); + if (container) { + this.contextMenuListenerFn = this.renderer.listen(container, 'contextmenu', (e: Event) => { + e.preventDefault(); + }); + } + this.menuElement = this.getContextMenuElement(); + }); + + this.closeSubscription = this.menuTrigger.onMenuClose.subscribe(() => { + this.menuElement = null; + if (this.contextMenuListenerFn) { + this.contextMenuListenerFn(); + } + }); } ngOnDestroy() { + if (this.contextMenuListenerFn) { + this.contextMenuListenerFn(); + } this.contextSubscription.unsubscribe(); this.openSubscription.unsubscribe(); this.closeSubscription.unsubscribe(); + this.menuElement = null; } onMenuItemClick(event: Event, menuItem: any): void {