Closing the context menu by clicking <div class='outside'>

[Ivan M]

Right now there is no <div class='outside'> element in this library at all and the left mouse button clicks on the elements that are in the background. I need the mouse click to be stopped with a <div class='outside'> element and event.stopPropagation(). After that the context menu and <div class='outside'> should be closed.
We can move this function to MenuOptions.

[快乐的梦鱼]

Thank you for your question, In version 1.3.0 add clickCloseClassName and clickCloseClassName for ignore clicking of some element. You can set clickCloseClassName property in MenuOptions, If your element in menu item has this className, click it will ignore event and close hole menu.

[Ivan M]

@imengyu I tried to use an existing container with class 'mx-context-no-clickable' and it didn't work. I see in the code "return" ahead of time.

maybe you need to swap these fragments in places?

[Ivan M]

Here is a workaround:

export function showContextMenu(e: MouseEvent, items: MenuItem[] | undefined) {
  const contextMenuInstance = Vue3ContextMenu.showContextMenu({
    x: e.x,
    y: e.y,
    theme: darkColorScheme.value ? "mac dark" : "mac",
    items,
    closeWhenScroll: true,
    clickCloseClassName: "mx-context-no-clickable", // it's not working
  });
  // it's working
  nextTick(() => {
    const el = document.getElementById("mx-menu-default-container")!;
    el.style.pointerEvents = "all";
    const closeListener = () => {
      el.style.pointerEvents = "none";
      contextMenuInstance.closeMenu();
    };
    el.addEventListener("click", (e) => {
      e.preventDefault();
      e.stopPropagation();
      closeListener();
    });
    el.addEventListener("touchmove", () => {
      closeListener();
    });
    el.addEventListener("wheel", () => {
      closeListener();
    });
  });
  return contextMenuInstance;
}

It turns out that even if you swap fragments, you will still need to change style 'pointer-events' and fix scroll bugs. So we need to think about another way to solve it. For example, you can embed this code in a separate MenuOptions property.