Add popover light dismiss integration #460

josepharhar · 2022-11-22T23:54:28Z

I am adding a new HTML attribute called "popover" in whatwg/html#8221

Part of this feature involves "light dismiss", where clicking outside of an element with the popover attribute causes it to be closed. This functionality was originally implemented by changing the event dispatching system of the DOM, but it was recommended to move it here instead:
whatwg/dom#1117 (comment)
https://chromium-review.googlesource.com/c/chromium/src/+/4023021

Preview | Diff

I am adding a new HTML attribute called "popover" in whatwg/html#8221 Part of this feature involves "light dismiss", where clicking outside of an element with the popover attribute causes it to be closed. This functionality was originally implemented by changing the event dispatching system of the DOM, but it was recommended to move it here instead: whatwg/dom#1117 (comment) https://chromium-review.googlesource.com/c/chromium/src/+/4023021

patrickhlauke · 2022-11-23T16:25:08Z

Briefly discussed at today's meeting. https://www.w3.org/2022/11/23-pointerevents-minutes.html#t03

Waiting for this to stabilise before adding to PE spec.

josepharhar · 2022-11-23T16:46:24Z

Sounds good, I'll comment again when the popover HTML PR is done

index.html

josepharhar · 2023-05-01T14:53:19Z

The HTML spec for this has been merged: https://html.spec.whatwg.org/multipage/popover.html#light-dismiss-open-popovers
Can we merge this PR now?

patrickhlauke · 2023-05-15T10:54:55Z

@mustaqahmed @flackr @smaug---- as you're all closer to the "metal" here in terms of your technical experience/understanding, do you mind reviewing this PR to just double-check it's kosher and then merge?

flackr · 2023-05-15T16:45:31Z

index.html

@@ -409,6 +409,8 @@ <h2>Firing events using the <code>PointerEvent</code> interface</h2>
                <p>If the event is {{GlobalEventHandlers/pointerdown}}, the associated device is a direct manipulation device, and the target is an {{Element}},
                   then <a>set pointer capture</a> for this <code>pointerId</code> to the target element as described in <a>implicit pointer capture</a>.

+                <p>Run <a href="html.spec.whatwg.org/#popover-light-dismiss">light dismiss open popovers</a> given the event.</p>


In the chromium implementation, light dismiss from the escape key seems to only be invoked if the default wasn't prevented[1]. However, calling it here before the event has been fired means that this will happen regardless of whether the default was prevented for pointer events. This indeed matches the implementation but are we intentionally inconsistent? Has there been discussion about this? I put together a demo at https://jsbin.com/bakoxan/edit?html,js,output to show a page which calls preventDefault on all events after a popover or dialog is open to test the differences.

Our implementation only calls the light dismiss steps if the event is pointerdown or pointerup. I see the steps in the html spec only care about pointerdown and pointerup, but might be worth limiting this here?

I have some concerns about the algorithm in the html spec. It seems like https://html.spec.whatwg.org/#popover-light-dismiss is replicating a form of click detection, however not taking into account many of the cases in which clicks are not generated.

Do you really want to light dismiss popovers on the pointerup event if the finger was moved sufficiently such that a click wouldn't be generated?

The check of whether the down target is the same as the up target seems a bit overly naive, in complex pages it's possible for the pointer to drift slightly and be over a different target element. Should this really result in not dismissing the popover even though it still generates a click?

I wonder whether it would be better to look for click events.

Apologies if these things have already been discussed I just couldn't find them with the searching that I did.

The reason I'm putting this here instead of in the HTML spec is that I got feedback during the review that we shouldn't be using an event listener to do the light dismiss behavior or really interacting with the event system at all, and that instead we should be going where the events are fired and instrumenting everything there. The lack of preventDefault support seems consistent with that idea.

Perhaps the escape key behavior should do the same if that is really what's preferred. I'm not sure if CloseWatcher, which should replace the current escape key implementation, imposes any changes in behavior regarding preventDefault. @domenic

It seems like https://html.spec.whatwg.org/#popover-light-dismiss is replicating a form of click detection, however not taking into account many of the cases in which clicks are not generated.

I agree, reusing the implementation of click events sounds better. @mfreed7 I believe that your initial implementation used mouseup and mousedown instead of click. Am I right? Was there any reason for that?

Perhaps the escape key behavior should do the same if that is really what's preferred. I'm not sure if CloseWatcher, which should replace the current escape key implementation, imposes any changes in behavior regarding preventDefault. @domenic

CloseWatcher works per https://wicg.github.io/close-watcher/#close-signals ; note steps 2 and 3. (Also note that per discussion in whatwg/html#9132 (comment), @emilio would prefer we be more explicit about it being keydown for Esc, instead of my current proposal's "Fire any relevant event ... If multiple such events are fired, the user agent must pick one for the purposes of the following steps.")

I wonder whether it would be better to look for click events.

If we wanted to use the click event instead, should it be added here? https://w3c.github.io/uievents/#event-type-click

I think I have to find some place outside of the HTML spec to implement this, unless we can add some abstraction in the HTML spec for this kind of behavior. Potentially related: whatwg/html#10762

I talked to Mason, and changing to click sounds OK as long as it preserves the user-facing behavior, which we have a lot of WPT coverage for. I'm not sure if it will or not. I can try experimenting with it by instrumenting the place where click events are fired from.

dontcallmedom · 2024-10-18T08:50:07Z

This one-line PR is nearly two years old - is there any update on the discussion above that could help move it forward?

josepharhar · 2025-04-15T17:07:59Z

I filed an issue about migrating from pointerdown/pointerup to the click event here: #542

josepharhar · 2025-07-22T21:19:13Z

I updated this PR to use the click event instead of sending the pointerdown and pointerup events to the HTML spec.

mustaqahmed · 2025-07-30T20:48:35Z

index.html

+
+                    <p>Before a |click| event is dispatched, the <a href="html.spec.whatwg.org/#popover-light-dismiss">light dismiss open popovers</a> algorithm MUST be run given the target of the corresponding <code>pointerdown</code> event and the target of the corresponding <code>pointerup</code> event.</p>


I think this step should better move before (current) Step 4, saying something like:

run the (html) algorithm with parameters target, the target of pointerdown and the target of pointerup.

Do we have a corresponding PR to update the HTML algorithm parameters?

I moved it before step 4, and I will work on a corresponding HTML spec PR

This PR replaces the existing pointerdown and pointerup listening and tracking with algorithms which use a click event. The click event is going to be used by the pointerevents spec here: w3c/pointerevents#460 Using click events instead of doing click detection with pointerdown and pointerup fixes a number of issues which are detailed here: w3c/pointerevents#542 Fixes whatwg#10905

josepharhar · 2025-08-05T20:56:15Z

I created a corresponding HTML spec PR to use click instead of pointerdown/pointerup here: whatwg/html#11536

mustaqahmed

Looks good to me, thanks for addressing my comments.

mustaqahmed · 2025-08-27T16:06:35Z

Because this PR depends on your the HTML PR (whatwg/html#11536), should we perhaps land that one first?

smaug---- · 2025-08-31T09:39:36Z

index.html

@@ -899,6 +899,10 @@ <h4>Event dispatch</h4>
                            <p>Otherwise (|event| is a <code>click</code> or <code>auxclick</code> event for which |userEvent| is a <code>pointerup</code> event that was dispatched uncaptured) let |target| be the nearest common inclusive ancestor of the corresponding <code>pointerdown</code> and <code>pointerup</code> targets in the DOM at the moment |event| is being dispatched.</p>
                        </li>

+                        <li>
+                          <p>If |event| is a <code>click</code> event, then <a href="https://html.spec.whatwg.org/#run-light-dismiss-activities">run light dismiss activities</a> given |event|.</p>
+                        </li>


I don't quite understand how this works with customizable select's popup. That one is opened using mousedown, and then we'd a click, and that runs light dismiss. Maybe I'm just missing something

josepharhar mentioned this pull request Nov 22, 2022

Add pop-up light dismiss logic to event dispatching whatwg/dom#1117

Closed

3 tasks

patrickhlauke added the v4 label Nov 23, 2022

foolip reviewed Dec 2, 2022

View reviewed changes

index.html Outdated Show resolved Hide resolved

foolip mentioned this pull request Dec 2, 2022

Add popover attribute whatwg/html#8221

Merged

3 tasks

annevk mentioned this pull request Jan 27, 2023

Reland "Add popover attribute" whatwg/html#8717

Merged

3 tasks

remove target parameter

2286d66

jakearchibald mentioned this pull request Mar 16, 2023

Questions/issues with popover spec whatwg/html#9036

Closed

patrickhlauke requested review from flackr, mustaqahmed and smaug---- May 15, 2023 10:55

flackr reviewed May 15, 2023

View reviewed changes

mfreed7 mentioned this pull request Oct 31, 2024

Add dialog light dismiss behavior whatwg/html#10737

Merged

5 tasks

josepharhar mentioned this pull request Apr 15, 2025

Add context for popover light dismiss to click event #542

Open

josepharhar added 2 commits July 22, 2025 13:52

Merge remote-tracking branch 'upstream/gh-pages' into popover

2524ba2

use click event instead of pointerdown and pointerup

146efd0

mustaqahmed reviewed Jul 30, 2025

View reviewed changes

josepharhar mentioned this pull request Aug 5, 2025

Change light dismiss to use click events whatwg/html#11536

Open

6 tasks

reorder to use new algorithm

5013123

mustaqahmed approved these changes Aug 27, 2025

View reviewed changes

smaug---- reviewed Aug 31, 2025

View reviewed changes


		<p>Before a \|click\| event is dispatched, the <a href="html.spec.whatwg.org/#popover-light-dismiss">light dismiss open popovers</a> algorithm MUST be run given the target of the corresponding <code>pointerdown</code> event and the target of the corresponding <code>pointerup</code> event.</p>

Add popover light dismiss integration #460

Are you sure you want to change the base?

Add popover light dismiss integration #460

Uh oh!

Conversation

josepharhar commented Nov 22, 2022 • edited by pr-preview bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

patrickhlauke commented Nov 23, 2022

Uh oh!

josepharhar commented Nov 23, 2022

Uh oh!

Uh oh!

josepharhar commented May 1, 2023

Uh oh!

patrickhlauke commented May 15, 2023

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dontcallmedom commented Oct 18, 2024

Uh oh!

josepharhar commented Apr 15, 2025

Uh oh!

josepharhar commented Jul 22, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

josepharhar commented Aug 5, 2025

Uh oh!

mustaqahmed left a comment

Choose a reason for hiding this comment

Uh oh!

mustaqahmed commented Aug 27, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

josepharhar commented Nov 22, 2022 •

edited by pr-preview bot

Loading