PerfectMemory / ngx-contextmenu

A context menu component for Angular
https://perfectmemory.github.io/ngx-contextmenu
MIT License
42 stars 12 forks source link

Context menu doesn't close when stopPropagation() is called on a click event. #34

Open Timmeeeey opened 10 months ago

Timmeeeey commented 10 months ago

Describe the bug When you open a context menu and click somewhere where stopPropagation() is called on the click event, then the context menu doesn't close.

To Reproduce Steps to reproduce the behavior:

  1. Open context menu.
  2. Click on the blue area.

Expected behavior The context menu should always close when clicking outside the menu.

Stackblitz Example https://stackblitz.com/edit/ngx-contextmenu-example-zas2j8

2023-12-18_15h49_51

sroucheray commented 7 months ago

Hi @Timmeeeey, I just saw your issue, sorry for the delay. Unfortunately, there is little I can do. To close the menu I listen to "document:click", if the event is stopped it never reach the document, thus prevent menu closing. Do you see any workaround ?

Timmeeeey commented 7 months ago

Hi @sroucheray Unfortunately, I don't see any good alternative. You could use a backdrop to close the menu on outside click but this causes other issues, for example with submenus. The issue I have is with a dialog component of a UI framework I use which catches click events and calls stopPropagation(). I guess I have to wait and hope that they are fixing this.

sroucheray commented 7 months ago

Backdrop is not a bad idea, though.

sroucheray commented 5 months ago

At one point de native dialog API (https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement) along with anchor positioning https://developer.chrome.com/blog/anchor-positioning-api will be the solution

Timmeeeey commented 4 months ago

@sroucheray That sounds great. Until then, I'll use a backdrop.