From c6b3f85bd0ba578c7036b52c85c9c2bb41462e98 Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Tue, 5 Aug 2025 13:48:09 -0700 Subject: [PATCH 1/6] Change light dismiss to use click events 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: https://github.com/w3c/pointerevents/pull/460 Using click events instead of doing click detection with pointerdown and pointerup fixes a number of issues which are detailed here: https://github.com/w3c/pointerevents/issues/542 Fixes https://github.com/whatwg/html/issues/10905 --- source | 88 ++++++++++++++++------------------------------------------ 1 file changed, 24 insertions(+), 64 deletions(-) diff --git a/source b/source index 84638b6d657..581859eedec 100644 --- a/source +++ b/source @@ -63063,9 +63063,6 @@ interface HTMLDialogElement : HTMLElement {
-

Each Document has a dialog pointerdown target, which is an HTML dialog element or null, initially null.

-

Each HTML element has a previously focused element which is null or an element, and it is initially null. When showModal() and show() @@ -63528,7 +63525,8 @@ interface HTMLDialogElement : HTMLElement { data-x="attr-dialog-closedby-any-state">Any state will close the dialog element. This is in addition to how such dialogs respond to close requests.

-

To light dismiss open dialogs, given a PointerEvent event:

+

To light dismiss open dialogs, given a click event + event:

  1. Assert: event's HTMLDialogElement : HTMLElement {

  2. Let ancestor be the result of running nearest clicked dialog given event.

    3. -

  3. If event's type is - "pointerdown", then set document's - dialog pointerdown target to ancestor.

    4. - -
  4. -

    If event's type is - "pointerup", then:

    - -
      -

    1. Let sameTarget be true if ancestor is document's - dialog pointerdown target.

      2. - -

    2. Set document's dialog pointerdown target to null.

      3. - -

    3. If sameTarget is false, then return.

      4. - -

    4. Let topmostDialog be the last element of document's open - dialogs list.

      5. +

    5. Let topmostDialog be the last element of document's open + dialogs list.

      6. -

    6. If ancestor is topmostDialog, then return.

      7. +

    7. If ancestor is topmostDialog, then return.

      8. -

    8. If topmostDialog's computed closed-by state is not Any, then return.

      9. +

    9. If topmostDialog's computed closed-by state is not Any, then return.

      10. -

    10. Assert: topmostDialog's close watcher is not null.

      11. +

    11. Assert: topmostDialog's close watcher is not null.

      12. -

    12. Request to close - topmostDialog's close watcher with - false.

      13. -
    -
    5. +

  5. Request to close + topmostDialog's close watcher with + false.

-

To run light dismiss activities, given a PointerEvent - event:

+

To run light dismiss activities, given a click + event event:

  1. Run light dismiss open popovers with event.

    2. @@ -63590,8 +63570,8 @@ interface HTMLDialogElement : HTMLElement { href="https://github.com/w3c/pointerevents/pull/460">Pointer Events spec when the user clicks or touches anywhere on the page.

    -

    To find the nearest clicked dialog, given a PointerEvent - event:

    +

    To find the nearest clicked dialog, given a click + event event:

    1. Let target be event's DragEventInit : MouseEventInit { data-x="popover-showing-state">showing

      2. -

      Every Document has a popover pointerdown target, which is an HTML element or null, initially null.

      -

      Every HTML element has a popover invoker, which is an HTML element or null, initially set to null.

      @@ -88550,8 +88527,8 @@ dictionary DragEventInit : MouseEventInit { data-x="attr-popover-auto-state">Auto state will close the popover. This is in addition to how such popovers respond to close requests.

      -

      To light dismiss open popovers, given a PointerEvent - event:

      +

      To light dismiss open popovers, given a click + event event:

      1. Assert: event's DragEventInit : MouseEventInit {

      2. If topmostPopover is null, then return.

        3. -

      3. If event's type is "pointerdown", then: set document's popover - pointerdown target to the result of running topmost clicked popover given - target.

        4. - -
      4. -

        If event's type is "pointerup", then:

        - -
          -

        1. Let ancestor be the result of running topmost clicked popover - given target.

          2. - -

        2. Let sameTarget be true if ancestor is document's - popover pointerdown target.

          3. +

        3. Let ancestor be the result of running topmost clicked popover + given target.

          4. -

        4. Set document's popover pointerdown target to null.

          5. - -

        5. If ancestor is null, then set ancestor to - document.

          6. +

        6. If ancestor is null, then set ancestor to + document.

          7. -

        7. If sameTarget is true, then run hide - all popovers until given ancestor, false, and true.

          8. -
        -
        5. +

      5. Run hide all popovers until given + ancestor, false, and true.

      To find the topmost clicked popover, given a Node node:

      From 1407e926b52c944112f426fc5da4d8194df53828 Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Fri, 22 Aug 2025 13:46:08 -0700 Subject: [PATCH 2/6] use MouseEvent --- source | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/source b/source index 581859eedec..b3c563db5f3 100644 --- a/source +++ b/source @@ -63525,13 +63525,16 @@ interface HTMLDialogElement : HTMLElement { data-x="attr-dialog-closedby-any-state">Any state will close the dialog element. This is in addition to how such dialogs respond to close requests.

      -

      To light dismiss open dialogs, given a click event +

      To light dismiss open dialogs, given a MouseEvent event event:

      1. Assert: event's isTrusted attribute is true.

        2. +

      2. Assert: event's type is + "click".

        3. +

      3. Let document be event's target's node document.

        4. @@ -63557,10 +63560,16 @@ interface HTMLDialogElement : HTMLElement { false.

      -

      To run light dismiss activities, given a click - event event:

      +

      To run light dismiss activities, given a MouseEvent + event:

        +

      1. Assert: event's isTrusted attribute is true.

        2. + +

      2. Assert: event's type is + "click".

        3. +

      3. Run light dismiss open popovers with event.

      4. Run light dismiss open dialogs with event.

        5. @@ -88527,13 +88536,16 @@ dictionary DragEventInit : MouseEventInit { data-x="attr-popover-auto-state">Auto state will close the popover. This is in addition to how such popovers respond to close requests.

        -

        To light dismiss open popovers, given a click - event event:

        +

        To light dismiss open popovers, given a MouseEvent + event:

        1. Assert: event's isTrusted attribute is true.

          2. +

        2. Assert: event's type is + "click".

          3. +

        3. Let target be event's target.

          4. From 901da8fbd185c9630ccc7d5359a75ffc5ecc66c8 Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Thu, 28 Aug 2025 15:40:14 -0700 Subject: [PATCH 3/6] mouseevent -> pointerevent --- source | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/source b/source index b99ab08d433..ddf60bcd008 100644 --- a/source +++ b/source @@ -63193,7 +63193,7 @@ interface HTMLDialogElement : HTMLElement { data-x="attr-dialog-closedby-any-state">Any state will close the dialog element. This is in addition to how such dialogs respond to close requests.

          -

          To light dismiss open dialogs, given a MouseEvent event +

          To light dismiss open dialogs, given a PointerEvent event event:

            @@ -63228,7 +63228,7 @@ interface HTMLDialogElement : HTMLElement { false.

          -

          To run light dismiss activities, given a MouseEvent +

          To run light dismiss activities, given a PointerEvent event:

            @@ -88215,7 +88215,7 @@ dictionary DragEventInit : MouseEventInit { data-x="attr-popover-auto-state">Auto state will close the popover. This is in addition to how such popovers respond to close requests.

            -

            To light dismiss open popovers, given a MouseEvent +

            To light dismiss open popovers, given a PointerEvent event:

              From fdaaacd143dfcf22fd110c2a24a73e7d4e4fc04f Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Fri, 12 Dec 2025 11:05:32 -0800 Subject: [PATCH 4/6] add parameters --- source | 98 +++++++++++++++++++++++++--------------------------------- 1 file changed, 42 insertions(+), 56 deletions(-) diff --git a/source b/source index 2f65d5e099b..4a0d1dd2bee 100644 --- a/source +++ b/source @@ -4136,6 +4136,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
            1. The scrollend event
            2. set up browsing context features
            3. The clientX and clientY extension attributes of the MouseEvent interface
              4. +
            4. get the bounding box

              5. The following features and terms are defined in CSS Syntax: @@ -65826,29 +65827,32 @@ interface HTMLDialogElement : HTMLElement { is in addition to how such dialogs respond to close requests.

              -

              To light dismiss open dialogs, given a PointerEvent event - event:

              +

              To light dismiss open dialogs, given a Node + pointerDownTarget, a number pointerDownX, a number pointerDownY, + a Node pointerUpTarget, a number pointerUpX, and a number + pointerUpY:

                -

              1. Assert: event's isTrusted attribute is true.

                2. - -

              2. Assert: event's type is - "click".

                3. - -

              3. Let document be event's target's node document.

                4. +

              4. Let document be pointerDownTarget's node + document.

              5. If document's open dialogs list is empty, then return.

                6. -

              6. Let ancestor be the result of running nearest clicked dialog - given event.

                7. +

              7. Let pointerDownDialog be the result of running nearest clicked + dialog given pointerDownTarget, pointerDownX, and + pointerDownY.

                8. + +

              8. Let pointerUpDialog be the result of running nearest clicked + dialog given pointerUpTarget, pointerUpX, and + pointerUpY.

                9. + +

              9. If pointerDownDialog is not pointerUpDialog, then return.

              10. Let topmostDialog be the last element of document's open dialogs list.

                11. -

              11. If ancestor is topmostDialog, then return.

                12. +

              12. If pointerDownDialog is topmostDialog, then return.

              13. If topmostDialog's computed closed-by state is not Any, then return.

                14. @@ -65863,19 +65867,18 @@ interface HTMLDialogElement : HTMLElement {
              -

              To run light dismiss activities, given a PointerEvent - event:

              +

              To run light dismiss activities, given a Node + pointerDownTarget, a number pointerDownX, a number pointerDownY, + a Node pointerUpTarget, a number pointerUpX, and a number + pointerUpY:

                -

              1. Assert: event's isTrusted attribute is true.

                2. +

              2. Run light dismiss open popovers given pointerDownTarget and + pointerUpTarget.

                3. -

              3. Assert: event's type is - "click".

                4. - -

              4. Run light dismiss open popovers with event.

                5. - -

              5. Run light dismiss open dialogs with event.

                6. +

              6. Run light dismiss open dialogs given pointerDownTarget, + pointerDownX, pointerDownY, pointerUpTarget, + pointerUpX, and pointerUpY.

              @@ -65884,23 +65887,21 @@ interface HTMLDialogElement : HTMLElement { or touches anywhere on the page.

              -

              To find the nearest clicked dialog, given a click - event event:

              +

              To find the nearest clicked dialog, given a Node target, a + number clientX, and a number clientY:

                -

              1. Let target be event's target.

                2. -

              2. If target is a dialog element, target has an open attribute, target's is modal is - true, and event's clientX and - clientY are outside the bounds of target, - then return null. + true, and clientX and clientY are outside of target's bounding box, then return null.

                3. The check for clientX and clientY is because a pointer event that hits the ::backdrop pseudo element of a dialog will result in event having a - target of the dialog element itself.

                + target of the dialog element itself. This could be improved if the pointer events spec passed the + ::backdrop pseudo-element directly instead of the dialog + element.

              3. Let currentNode be target.

                4. @@ -91752,34 +91753,19 @@ dictionary DragEventInit : MouseEventInit { how such popovers respond to close requests.

                -

                To light dismiss open popovers, given a PointerEvent - event:

                +

                To light dismiss open popovers, given a Node + pointerDownTarget and a Node pointerUpTarget:

                  -

                1. Assert: event's isTrusted attribute is true.

                  2. - -

                2. Assert: event's type is - "click".

                  3. - -

                3. Let target be event's target.

                  4. - -

                4. Let document be target's node document.

                  5. - -

                5. Let topmostPopover be the result of running topmost auto popover - given document.

                  6. - -

                6. If topmostPopover is null, then return.

                  7. +

                7. Let pointerDownPopover be the result of running topmost clicked + popover given pointerDownTarget.

                  8. -

                8. Let ancestor be the result of running topmost clicked popover - given target.

                  9. +

                9. Let pointerUpPopover be the result of running topmost clicked + popover given pointerUpTarget.

                  10. -

                10. If ancestor is null, then set ancestor to - document.

                  11. - -

                11. Run hide all popovers until given - ancestor, false, and true.

                  12. +

                12. If pointerDownPopover is the same as pointerUpPopover, then run + hide all popovers until given ancestor, + false, and true.

                From ef19936157a127f084040ccc06bc13e3b39338a6 Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Fri, 12 Dec 2025 11:10:47 -0800 Subject: [PATCH 5/6] move note inside li --- source | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/source b/source index 4a0d1dd2bee..77535a9c339 100644 --- a/source +++ b/source @@ -65891,17 +65891,19 @@ interface HTMLDialogElement : HTMLElement { number clientX, and a number clientY:

                  -

                1. If target is a dialog element, target has an open attribute, target's is modal is - true, and clientX and clientY are outside of target's bounding box, then return null.

                  2. - -

                  The check for clientX and clientY is because a pointer event that hits the ::backdrop pseudo element of a dialog will result in event having a - target of the dialog element itself. This could be improved if the pointer events spec passed the - ::backdrop pseudo-element directly instead of the dialog - element.

                  +
                2. +

                  If target is a dialog element, target has an open attribute, target's is modal is + true, and clientX and clientY are outside of target's bounding box, then return null.

                  + +

                  The check for clientX and clientY is because a pointer event that hits the ::backdrop pseudo element of a dialog will result in event having a + target of the dialog element itself. This could be improved if the pointer events spec passed the + ::backdrop pseudo-element directly instead of the dialog + element.

                  +

                3. Let currentNode be target.

                  4. From b7bb25ea4ab802cf92b586edd618097f9b2afee6 Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Fri, 2 Jan 2026 16:15:19 -0800 Subject: [PATCH 6/6] use correct variable --- source | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/source b/source index 77535a9c339..a78c80b0e70 100644 --- a/source +++ b/source @@ -91766,8 +91766,8 @@ dictionary DragEventInit : MouseEventInit { popover given pointerUpTarget.

                4. If pointerDownPopover is the same as pointerUpPopover, then run - hide all popovers until given ancestor, - false, and true.

                  5. + hide all popovers until given + pointerDownPopover, false, and true.