Nested context menu example not working in Safari/OS X

mtmacdonald commented 4 years ago

[nothing urgent for me]

This documentation example doesn't seem to work properly in Safari:

https://codesandbox.io/s/nested-context-menus-xx52d?fontsize=14

The menu doesn't stay visible unless you hold down the mouse/trackpad while right-clicking. Unlike for Firefox where right-click alone is enough to keep the menu open.

everweij commented 4 years ago

Mmm interesting... Unfortunately, I can't reproduce this with locally with my osx/safari. Which version of Safari are you running (Mine is 11.1.2)?

mtmacdonald commented 4 years ago

Version 13.0.4 (15608.4.9.1.3) on macOs Catalina 10.15.2. I'm on a 2019 Macbook Pro using Ctrl+click on the trackpad in lieu of right-clicking with a mouse (I haven't actually tested with a mouse).

If there's any way I can help with reproducing it, just let me know.

anilanar commented 4 years ago

I can reproduce by Ctrl+Clicking. Works normal when right clicked.

everweij commented 3 years ago

Unfortunately, this is more a safari-related issue than a react-laag issue I'm afraid. See https://stackoverflow.com/questions/26032971/how-do-you-disable-click-events-from-the-contextmenu-event-when-using-ctrlclick

From what I understand: initially the context-menu event is triggered, but immediately afterward the click-event gets also triggered, which does not place nicely with onOutsideClick. I think you can work-around this by adding an extra click-handler on the element where you want your context-menu to open from:

<div
  onContextMenu={handleContextMenu}
  onClick={evt => {
    if (evt.ctrlKey) {
      evt.preventDefault(); // should prevent fire `onOutsideClick`?
      evt.stopPropagation(); // maybe we need this one too?
    }
  }} />

everweij / react-laag

Nested context menu example not working in Safari/OS X #32