More than one menu showup, how to disappear it automatic?

[kyle-go]

React/React-dom version:
React-Menu version:
4.0.2

Describe the bug

If the browser lose focus, right click the clickable area, will show two menus.

To Reproduce

1. right click the clickable area, will show one menu
2. click other window (let the browser lose focus)
3. right click second clickable area, will show two menus.

Expected behavior

Show only one menu.

Code snippets/CodeSandbox examples/Screenshots

https://codesandbox.io/s/usecontrolledmenu-forked-yxndtd

picuture:

[szhsin]

Hi @kyle-go , thanks for raising this issue.

The bug is due to checking document.activeElement in addition to relatedTarget in onBlur event to decide when a menu should be closed. The code was brought in to make the library compatible with IE 11. As of v4 we have dropped IE 11 support so we can remove the workaround.

Will be fixing it in the upcoming release.

[szhsin]

Fixed by v4.0.3.

In addition to the new version, we need to make sure open context menu only if the browser tab is in foreground:

onContextMenu: (e) => {
  e.preventDefault();
  if (!document.hasFocus()) return;

  setAnchorRef(null);
  setAnchorPoint({ x: e.clientX, y: e.clientY });
  toggleMenu(true);
}

CodeSandbox Link

[kyle-go]

Thanks for your update new version.
I tested antd dropdown. example: https://codesandbox.io/s/you-jian-cai-dan-antd-5-8-3-forked-cngr25

It can disappear even if document is not in focus.

any way, It's better than before, Thanks so much! Greate job

[JonathanMEdwards]

Is there any way to keep the standard behavior that right-click focuses the document? The suggested code above ignores them. Thank

[szhsin]

hey @JonathanMEdwards, you could remove the checking for document focus if (!document.hasFocus()) return;, but this will cause the menu to lose focus and cannot be closed.

I think the setup in the CodeSandbox Link is a middle ground solution without introducing an undesired bug.

This is due to how focus management is implemented in this library. We're still able to navigate through menu items using keyboard even in a context menu.