Popovers are broken when shown in a contextmenu event listener

[jpzwarte]

What is the issue with the HTML Standard?

https://codepen.io/jpzwarte/pen/OPLQypz?editors=1010

If you want to use a popover for a context menu, you cannot use the contextmenu event to display the popover. The problem is that the popover is immediately light dismissed.

(not sure if this belongs in whatwg/html or whatwg/dom)

[jpzwarte]

Perhaps the light dismiss behavior should be tweaked to not close any popovers that are shown immediately before in contextmenu, mousedown, mouseup, pointerdown, pointerup, touchstart, touchend event listeners?

[mkrause]

Maybe wrap it in a setTimeout(fn, 0) so the popover gets shown after the event.

[jpzwarte]

That doesn't work in Chrome, FF or Safari. Once you increase the timeout to at least 100ms, then it sometimes works. But at that point you start to have a noticeable delay.

[mkrause]

That doesn't work in Chrome, FF or Safari. Once you increase the timeout to at least 100ms, then it sometimes works. But at that point you start to have a noticeable delay.

Ah, interesting. I just tested it, the reason is because contextmenu is fired on mouse down, but on mouse up the popover will be closed.

To test this, try wrapping the showPopover() in setTimeout(fn, 0), and then start right clicking but hold the click. The popover will show. As soon as you release the click the popover is closed.

What's also interesting is it doesn't seem that the "close popovers on click/mouseup" can be canceled. At least no combination that I tried with canceling click/mouseup/pointerup resulted in canceling the popover close. So that doesn't seem like a viable option either.

popover="manual" would work of course, but then you have to reimplement light dismiss.

[mkrause]

Found a workaround by using mouseup instead and checking for right click (or CTRL+click on Mac).

document.querySelector('span')?.addEventListener('contextmenu', (event) => {
  event.preventDefault();
});


document.querySelector('span')?.addEventListener('mouseup', (event) => {
  if (event.which === 3 || event.ctrlKey) {
    document.querySelector('[popover]').showPopover();   
  }
});

No setTimeout necessary when done in mouseup. Tested it in Chrome, Firefox, and Safari and works in all of them.