Skip to content

Change light dismiss to use click events #11536

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
josepharhar wants to merge 10 commits into
base: main
Choose a base branch
from
+72 −105
Open

Change light dismiss to use click events #11536

Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
c6b3f85
Change light dismiss to use click events
josepharhar Aug 5, 2025
1407e92
use MouseEvent
josepharhar Aug 22, 2025
7099d1a
Merge remote-tracking branch 'upstream/main' into clickdismiss
josepharhar Aug 22, 2025
901da8f
mouseevent -> pointerevent
josepharhar Aug 28, 2025
7c5512c
Merge branch 'main' into clickdismiss
josepharhar Dec 11, 2025
3046211
Merge branch 'main' into clickdismiss
josepharhar Dec 12, 2025
fdaaacd
add parameters
josepharhar Dec 12, 2025
ef19936
move note inside li
josepharhar Dec 12, 2025
b7bb25e
use correct variable
josepharhar Jan 3, 2026
782a96d
Merge branch 'main' into clickdismiss
josepharhar Jun 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
177 changes: 72 additions & 105 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4173,6 +4173,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li>The <dfn data-x="event-scrollend" data-x-href="https://drafts.csswg.org/cssom-view/#eventdef-document-scrollend"><code>scrollend</code></dfn> event</li>
<li><dfn data-x-href="https://drafts.csswg.org/cssom-view/#set-up-browsing-context-features">set up browsing context features</dfn></li>
<li>The <dfn data-x="mouseevent-clientx" data-x-href="https://drafts.csswg.org/cssom-view/#dom-mouseevent-clientx">clientX</dfn> and <dfn data-x="mouseevent-clienty" data-x-href="https://drafts.csswg.org/cssom-view/#dom-mouseevent-clienty">clientY</dfn> extension attributes of the <span>MouseEvent</span> interface</li>
<li><dfn data-x-href="https://drafts.csswg.org/cssom-view/#element-get-the-bounding-box">get the bounding box</dfn></li>
</ul>

<p>The following features and terms are defined in <cite>CSS Syntax</cite>:
Expand Down Expand Up @@ -66543,9 +66544,6 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {

<hr>

<p>Each <code>Document</code> has a <dfn>dialog pointerdown target</dfn>, which is an <span
data-x="HTMLDialogElement">HTML dialog element</span> or null, initially null.</p>

<p>Each <span data-x="html elements">HTML element</span> has a <dfn>previously focused
element</dfn> which is null or an element, and it is initially null. When <code
data-x="dom-dialog-showModal">showModal()</code> and <code data-x="dom-dialog-show">show()</code>
Expand Down Expand Up @@ -67083,64 +67081,58 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
is in addition to how such <code>dialog</code>s respond to <span data-x="close request">close requests</span>.</p>

<div algorithm>
<p>To <dfn>light dismiss open dialogs</dfn>, given a <code>PointerEvent</code> <var>event</var>:</p>
<p>To <dfn>light dismiss open dialogs</dfn>, given a <code>Node</code>
<var>pointerDownTarget</var>, a number <var>pointerDownX</var>, a number <var>pointerDownY</var>,
a <code>Node</code> <var>pointerUpTarget</var>, a number <var>pointerUpX</var>, and a number
<var>pointerUpY</var>:</p>

<ol>
<li><p><span>Assert</span>: <var>event</var>'s <code
data-x="dom-Event-isTrusted">isTrusted</code> attribute is true.</p></li>

<li><p>Let <var>document</var> be <var>event</var>'s <span
data-x="concept-event-target">target</span>'s <span>node document</span>.</p></li>
<li><p>Let <var>document</var> be <var>pointerDownTarget</var>'s <span>node
document</span>.</p></li>

<li><p>If <var>document</var>'s <span>open dialogs list</span> is <span
data-x="list is empty">empty</span>, then return.</p></li>

<li><p>Let <var>ancestor</var> be the result of running <span>nearest clicked dialog</span>
given <var>event</var>.</p></li>

<li><p>If <var>event</var>'s <code data-x="dom-Event-type">type</code> is
"<code data-x="event-pointerdown">pointerdown</code>", then set <var>document</var>'s
<span>dialog pointerdown target</span> to <var>ancestor</var>.</p></li>

<li>
<p>If <var>event</var>'s <code data-x="dom-Event-type">type</code> is
"<code data-x="event-pointerup">pointerup</code>":</p>

<ol>
<li><p>Let <var>sameTarget</var> be true if <var>ancestor</var> is <var>document</var>'s
<span>dialog pointerdown target</span>.</p></li>
<li><p>Let <var>pointerDownDialog</var> be the result of running <span>nearest clicked
dialog</span> given <var>pointerDownTarget</var>, <var>pointerDownX</var>, and
<var>pointerDownY</var>.</p></li>

<li><p>Set <var>document</var>'s <span>dialog pointerdown target</span> to null.</p></li>
<li><p>Let <var>pointerUpDialog</var> be the result of running <span>nearest clicked
dialog</span> given <var>pointerUpTarget</var>, <var>pointerUpX</var>, and
<var>pointerUpY</var>.</p></li>

<li><p>If <var>sameTarget</var> is false, then return.</p></li>
<li><p>If <var>pointerDownDialog</var> is not <var>pointerUpDialog</var>, then return.</p></li>

<li><p>Let <var>topmostDialog</var> be the last element of <var>document</var>'s <span>open
dialogs list</span>.</p></li>
<li><p>Let <var>topmostDialog</var> be the last element of <var>document</var>'s <span>open
dialogs list</span>.</p></li>

<li><p>If <var>ancestor</var> is <var>topmostDialog</var>, then return.</p></li>
<li><p>If <var>pointerDownDialog</var> is <var>topmostDialog</var>, then return.</p></li>

<li><p>If <var>topmostDialog</var>'s <span>computed closed-by state</span> is not <span
data-x="attr-dialog-closedby-any-state">Any</span>, then return.</p></li>
<li><p>If <var>topmostDialog</var>'s <span>computed closed-by state</span> is not <span
data-x="attr-dialog-closedby-any-state">Any</span>, then return.</p></li>

<li><p><span>Assert</span>: <var>topmostDialog</var>'s <span
data-x="dialog-close-watcher">close watcher</span> is not null.</p></li>
<li><p><span>Assert</span>: <var>topmostDialog</var>'s <span
data-x="dialog-close-watcher">close watcher</span> is not null.</p></li>

<li><p><span data-x="close-watcher-request-close">Request to close</span>
<var>topmostDialog</var>'s <span data-x="dialog-close-watcher">close watcher</span> with
false.</p></li>
</ol>
</li>
<li><p><span data-x="close-watcher-request-close">Request to close</span>
<var>topmostDialog</var>'s <span data-x="dialog-close-watcher">close watcher</span> with
false.</p></li>
</ol>
</div>

<div algorithm>
<p>To <dfn>run light dismiss activities</dfn>, given a <code>PointerEvent</code>
<var>event</var>:</p>
<p>To <dfn>run light dismiss activities</dfn>, given a <code>Node</code>
<var>pointerDownTarget</var>, a number <var>pointerDownX</var>, a number <var>pointerDownY</var>,
a <code>Node</code> <var>pointerUpTarget</var>, a number <var>pointerUpX</var>, and a number
<var>pointerUpY</var>:</p>

<ol>
<li><p>Run <span>light dismiss open popovers</span> with <var>event</var>.</p></li>
<li><p>Run <span>light dismiss open popovers</span> given <var>pointerDownTarget</var> and
<var>pointerUpTarget</var>.</p></li>

<li><p>Run <span>light dismiss open dialogs</span> with <var>event</var>.</p></li>
<li><p>Run <span>light dismiss open dialogs</span> given <var>pointerDownTarget</var>,
<var>pointerDownX</var>, <var>pointerDownY</var>, <var>pointerUpTarget</var>,
<var>pointerUpX</var>, and <var>pointerUpY</var>.</p></li>
</ol>
</div>

Expand All @@ -67149,23 +67141,23 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
or touches anywhere on the page.</p>

<div algorithm>
<p>To find the <dfn>nearest clicked dialog</dfn>, given a <code>PointerEvent</code>
<var>event</var>:</p>
<p>To find the <dfn>nearest clicked dialog</dfn>, given a <code>Node</code> <var>target</var>, a
number <var>clientX</var>, and a number <var>clientY</var>:</p>

<ol>
<li><p>Let <var>target</var> be <var>event</var>'s <span
data-x="concept-event-target">target</span>.</p></li>

<li><p>If <var>target</var> is a <code>dialog</code> element, <var>target</var> has an <code
data-x="attr-dialog-open">open</code> attribute, <var>target</var>'s <span>is modal</span> is
true, and <var>event</var>'s <code data-x="mouseevent-clientx">clientX</code> and
<code data-x="mouseevent-clienty">clientY</code> are outside the bounds of <var>target</var>,
then return null.
<li>
<p>If <var>target</var> is a <code>dialog</code> element, <var>target</var> has an <code
data-x="attr-dialog-open">open</code> attribute, <var>target</var>'s <span>is modal</span> is
true, and <var>clientX</var> and <var>clientY</var> are outside of <var>target</var>'s <span
data-x="get the bounding box">bounding box</span>, then return null.</p>

<p class="note">The check for <code data-x="mouseevent-clientx">clientX</code> and <code
data-x="mouseevent-clienty">clientY</code> is because a pointer event that hits the <code
data-x="">::backdrop</code> pseudo element of a dialog will result in <var>event</var> having a
target of the dialog element itself.</p>
<p class="note">The check for <code data-x="mouseevent-clientx">clientX</code> and <code
data-x="mouseevent-clienty">clientY</code> is because a pointer event that hits the <code
data-x="">::backdrop</code> pseudo element of a dialog will result in <var>event</var> having a
target of the dialog element itself. This could be improved if the pointer events spec passed the
<code data-x="">::backdrop</code> pseudo-element directly instead of the <code>dialog</code>
element.</p>
</li>

<li><p>Let <var>currentNode</var> be <var>target</var>.</p></li>

Expand Down Expand Up @@ -91888,9 +91880,6 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
data-x="popover-showing-state">showing</dfn></p></li>
</ul>

<p>Every <code>Document</code> has a <dfn>popover pointerdown target</dfn>, which is an <span
data-x="HTML elements">HTML element</span> or null, initially null.</p>

<p>Every <span data-x="HTML elements">HTML element</span> has a <dfn>popover trigger</dfn>, which
is an <span data-x="HTML elements">HTML element</span> or null, initially set to null.</p>

Expand Down Expand Up @@ -93081,64 +93070,42 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
data-x="close request">close requests</span>.</p>

<div algorithm>
<p>To <dfn>light dismiss open popovers</dfn>, given a <code>PointerEvent</code>
<var>event</var>:</p>
<p>To <dfn>light dismiss open popovers</dfn>, given a <code>Node</code>
<var>pointerDownTarget</var> and a <code>Node</code> <var>pointerUpTarget</var>:</p>

<ol>
<li><p><span>Assert</span>: <var>event</var>'s <code
data-x="dom-Event-isTrusted">isTrusted</code> attribute is true.</p></li>

<li><p>Let <var>target</var> be <var>event</var>'s <span
data-x="concept-event-target">target</span>.</p></li>

<li><p>Let <var>document</var> be <var>target</var>'s <span>node document</span>.</p></li>

<li><p>If the result of running <span>topmost auto or hint popover</span> given
<var>document</var> is null, then return.</p></li>

<li><p>If <var>event</var>'s <code data-x="dom-Event-type">type</code> is "<code
data-x="event-pointerdown">pointerdown</code>": set <var>document</var>'s <span>popover
pointerdown target</span> to the result of running <span>topmost clicked popover</span> given
<var>target</var>.</p></li>

<li>
<p>If <var>event</var>'s <code data-x="dom-Event-type">type</code> is "<code
data-x="event-pointerup">pointerup</code>":</p>

<ol>
<li><p>Let <var>ancestor</var> be the result of running <span>topmost clicked popover</span>
given <var>target</var>.</p></li>

<li><p>Let <var>sameTarget</var> be true if <var>ancestor</var> is <var>document</var>'s
<span>popover pointerdown target</span>.</p></li>
<li><p>Let <var>document</var> be <var>pointerDownTarget</var>'s <span>node
document</span>.</p></li>

<li><p>Set <var>document</var>'s <span>popover pointerdown target</span> to null.</p></li>
<li><p>Let <var>pointerDownPopover</var> be the result of running <span>topmost clicked
popover</span> given <var>pointerDownTarget</var>.</p></li>

<li><p>If <var>sameTarget</var> is false, then return.</p></li>
<li><p>Let <var>pointerUpPopover</var> be the result of running <span>topmost clicked
popover</span> given <var>pointerUpTarget</var>.</p></li>

<li><p>Let <var>endpointIsHint</var> be true if <var>document</var>'s <span>showing hint
popover list</span> <span data-x="list contains">contains</span> <var>ancestor</var>; otherwise
false.</p></li>
<li><p>If <var>pointerDownPopover</var> is not <var>pointerUpPopover</var>, then return.</p></li>

<li><p>Run <span>hide popover stack until</span> given <var>document</var>,
<var>ancestor</var>, <span data-x="attr-popover-hint-state">Hint</span>, false, and
true.</p></li>
<li><p>Let <var>endpointIsHint</var> be true if <var>document</var>'s <span>showing hint
popover list</span> <span data-x="list contains">contains</span> <var>pointerDownPopover</var>;
otherwise false.</p></li>

<li><p>Let <var>autoEndpoint</var> be <var>ancestor</var>.</p></li>
<li><p>Run <span>hide popover stack until</span> given <var>document</var>,
<var>pointerDownPopover</var>, <span data-x="attr-popover-hint-state">Hint</span>, false, and
true.</p></li>

<li>
<p>If <var>endpointIsHint</var> is true, then set <var>autoEndpoint</var> to
<var>document</var>'s <span>hint stack parent</span>.</p>
<li><p>Let <var>autoEndpoint</var> be <var>pointerDownPopover</var>.</p></li>

<p class="note">This means, if a hint popover is clicked, auto popovers are closed, except
those that are parent to the clicked hint popover.</p>
</li>
<li>
<p>If <var>endpointIsHint</var> is true, then set <var>autoEndpoint</var> to
<var>document</var>'s <span>hint stack parent</span>.</p>

<li><p>Run <span>hide popover stack until</span> given <var>document</var>,
<var>autoEndpoint</var>, <span data-x="attr-popover-auto-state">Auto</span>, false, and
true.</p></li>
</ol>
<p class="note">This means, if a hint popover is clicked, auto popovers are closed, except
those that are parent to the clicked hint popover.</p>
</li>

<li><p>Run <span>hide popover stack until</span> given <var>document</var>,
<var>autoEndpoint</var>, <span data-x="attr-popover-auto-state">Auto</span>, false, and
true.</p></li>
</ol>
</div>

Expand Down
Loading