The HTML spec has an algorithm to be called from the pointerevents spec called popover light dismiss, which closes popovers when the user clicks outside of them on the page. There is a PR to call this from the pointerevents spec.

Popover light dismiss was designed to prevent light dismiss from being triggered when clicking and dragging between two elements as a form of pointer cancellation, which also supports use cases like clicking and dragging to highlight text inside of a popover.

The way this pointer cancellation is implemented is by listening to the pointerdown and pointerup events. The popover light dismiss algorithm expects to be run two times every time the user clicks, once for pointerdown and again for pointerup. On pointerdown, popover light dismiss saves the target node of the pointerdown, and on pointerup the saved node from pointerdown is compared to the target node of pointerup, and if they are the same node and aren't inside the popover, then the popover is closed.

This pointerdown/pointerup implementation has a variety of issues:

• pointerdown is skipped on touch devices in blink and webkit unless there is a pointerdown event listener.
  • This caused a bug when webkit shipped the popover attribute where light dismiss didn't work at all on touch devices.
  • The chromium implementation is affected by this and has some bugs like touch scrolling triggering light dismiss.
• As @flackr pointed out in the spec PR, this is replicating a form of click detection which would better be served by listening to the existing click event.
• Right click unexpectedly triggers light dismiss: Popovers are broken when shown in a contextmenu event listener whatwg/html#10905

I talked with @mustaqahmed about this, and came up with some possible solutions to move the popover light dismiss algorithm from using the pointerdown and pointerup events to just using the click event which would address these issues:

• Add the nodes which the pointer clicked down and up on as properties to the click event. This would be a simple replacement to the existing light dismiss algorithm in HTML.
• Add a flag to the click event which indicates whether pointer cancellation should apply, which the light dismiss algorithm could use to control whether light dismiss runs or not. I'm not sure how this would be implemented - maybe if the user drags their pointer a certain distance?