Using mat-menu as context menu: How to close opened mat-menu, and open it in another location

Question

Angular: v8.2.8

I manage to use mat-menu (angular material) to emulate the context menu. Right-clicking anyway on my page, the menu appears at my mouse location.

What I want to achieve: when I move my mouse to another location on the page, I right-click again. I was expecting the menu at the original location to close and reopen at the new location.

But In reality: When I right-click, nothing happens and the menu at the original location remains open.

In fact, I have to left-click to close the opened menu at original location, followed by right click to open menu at the new mouse location.

Question: Any idea how to achieve what I want?

@Component({
  selector: 'fl-home',
  template:`
 <mat-menu #contextmenu>
      <div >
           <button mat-menu-item>Clear all Paths</button>
       </div>
  </mat-menu>
  <div [matMenuTriggerFor]="contextmenu" [style.position]="'absolute'" [style.left.px]="menuX" [style.top.px]="menuY" ></div>
  
  <div class="container" (contextmenu)="onTriggerContextMenu($event);"> ....</div>
`})
export class HomeComponent  {

    menuX:number=0
    menuY:number=0

    @ViewChild(MatMenuTrigger,{static:false}) menu: MatMenuTrigger; 
    
   
    onTriggerContextMenu(event){
        
      event.preventDefault();
      this.menuX = event.x - 10;
      this.menuY = event.y - 10;
      this.menu.closeMenu() // close existing menu first.
      this.menu.openMenu()

    }
}

Answer 1

Just add hasBackdrop=false as in <mat-menu ... [hasBackdrop]="false">. What happens is that when the menu is opened after I right click, an invisible backdrop overlay appears covering the entire page. No matter what I try to right click again, the contextmenu event won't trigger and hence onTriggerContextMenu() does not get called. By setting hasBackgrop to false, this overlay will not appear.