Skip to content

Add context for popover light dismiss to click event #542

Open
@josepharhar

Description

@josepharhar

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:

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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions