Skip to content

Add the focusreset event #13050

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
noamr wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Add the focusreset event #13050

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2382051
Add the focusreset event
noamr Oct 8, 2026
39848cc
Only fire focusreset if focus ended up on the viewport
noamr Oct 8, 2026
abd54e7
Don't fire focusreset if focus was explicitly moved since the reset
noamr Oct 8, 2026
d49f985
Only fire focusreset for removal of the focused element while the doc…
noamr Oct 8, 2026
8f40318
Merge focusreset into the focus fixup step
noamr Oct 8, 2026
178f554
Fire focusreset when the focused element is removed
noamr Oct 12, 2026
bf1fcc8
Refine timing
noamr Oct 13, 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
64 changes: 54 additions & 10 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1840,16 +1840,28 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute

<li id="node-remove-focus-fixup">
<p>If <var>document</var>'s <span data-x="focused area of the document">focused area</span> is
<var>removedNode</var>, then set <var>document</var>'s <span data-x="focused area of the
document">focused area</span> to <var>document</var>'s <span>viewport</span>, and set
<var>document</var>'s <span>relevant global object</span>'s <span
data-x="window-navigation-api">navigation API</span>'s <span>focus changed during ongoing
navigation</span> to false.</p>
<var>removedNode</var>:</p>

<ol>
<li><p>Set <var>document</var>'s <span data-x="focused area of the document">focused
area</span> to <var>document</var>'s <span>viewport</span>.</p></li>

<li><p>Set <var>document</var>'s <span>relevant global object</span>'s <span
data-x="window-navigation-api">navigation API</span>'s <span>focus changed during ongoing
navigation</span> to false.</p></li>

<li><p>If the <span>has focus steps</span> given <var>document</var> return true, then
<span>signal a focus reset</span> for <var>document</var>.</p></li>
</ol>

<p class="note">This does <em>not</em> perform the <span>unfocusing steps</span>,
<span>focusing steps</span>, or <span>focus update steps</span>, and thus no <code
data-x="event-blur">blur</code> or <code data-x="event-change">change</code> events are
fired.</p>
data-x="event-blur">blur</code> or <code data-x="event-change">change</code> events are fired.
Instead, a <code data-x="event-focusreset">focusreset</code> event is fired at
<var>document</var> the next time the user agent runs <span>notify mutation observers</span>
(i.e., in a microtask), unless focus is explicitly moved before then. If <var>document</var>
does not have focus, <var>removedNode</var> already received a <code
data-x="event-blur">blur</code> event when focus left <var>document</var>.</p>
</li>

<li><p>If <var>removedNode</var> is an element whose <span
Expand Down Expand Up @@ -3448,6 +3460,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<dfn data-x="concept-element-is-value" data-x-href="https://dom.spec.whatwg.org/#concept-element-is-value"><code data-x="">is</code> value</dfn></li>

<li><dfn data-x-href="https://dom.spec.whatwg.org/#mutationobserver"><code>MutationObserver</code></dfn> interface and <dfn data-x-href="https://dom.spec.whatwg.org/#mutation-observers">mutation observers</dfn> in general</li>
<li>The <dfn data-x-href="https://dom.spec.whatwg.org/#notify-mutation-observers">notify mutation observers</dfn> algorithm</li>
<li>The <dfn data-x-href="https://dom.spec.whatwg.org/#signal-a-focus-reset">signal a focus reset</dfn> algorithm, <dfn data-x-href="https://dom.spec.whatwg.org/#pending-focus-reset-documents">pending focus reset documents</dfn>, and the <dfn data-x="event-focusreset" data-x-href="https://dom.spec.whatwg.org/#eventdef-document-focusreset"><code>focusreset</code></dfn> event</li>
<li><dfn data-x-href="https://dom.spec.whatwg.org/#abortcontroller"><code>AbortController</code></dfn> and its
<dfn data-x="concept-AbortController-signal" data-x-href="https://dom.spec.whatwg.org/#abortcontroller-signal">signal</dfn></li>
<li><dfn data-x-href="https://dom.spec.whatwg.org/#abortsignal"><code>AbortSignal</code></dfn></li>
Expand Down Expand Up @@ -11723,6 +11737,7 @@ partial interface <dfn id="document" data-lt="">Document</dfn> {
// special <span>event handler IDL attributes</span> that only apply to Document objects
[<span>LegacyLenientThis</span>] attribute <span>EventHandler</span> <span data-x="handler-onreadystatechange">onreadystatechange</span>;
attribute <span>EventHandler</span> <span data-x="handler-onvisibilitychange">onvisibilitychange</span>;
attribute <span>EventHandler</span> <span data-x="handler-onfocusreset">onfocusreset</span>;

// <a href="#Document-partial">also has obsolete members</a>
};
Expand Down Expand Up @@ -87249,10 +87264,26 @@ dictionary <dfn dictionary>CommandEventInit</dfn> : <span>EventInit</span> {
follows:</p>

<ol>
<li><p>Let <var>documents</var> be a <span>list</span> of all <code>Document</code> objects in
<var>old chain</var> and <var>new chain</var>.</p></li>

<!-- focusin/focusout?: https://software.hixie.ch/utilities/js/live-dom-viewer/?saved=723 -->

<li><p>If the last entry in <var>old chain</var> and the last entry in <var>new chain</var> are the same, pop the last entry from <var>old chain</var>
and the last entry from <var>new chain</var> and redo this step.</p></li>
<li><p>If the last entry in <var>old chain</var> and the last entry in <var>new chain</var> are
the same, pop the last entry from <var>old chain</var> and the last entry from <var>new
chain</var> and redo this step.</p></li>

<li>
<p>If <var>old chain</var> or <var>new chain</var> contains an <code>Element</code> or a
<code>Document</code> object, then for each <var>document</var> of <var>documents</var>, <span
data-x="list remove">remove</span> <var>document</var> from <var>document</var>'s <span>relevant
agent</span>'s <span>pending focus reset documents</span>.</p>

<p class="note">Focus is being explicitly moved such that a <code
data-x="event-blur">blur</code> or <code data-x="event-focus">focus</code> event will be fired,
so there is no need to fire a <code data-x="event-focusreset">focusreset</code> event for an
earlier reset.</p>
</li>

<li>
<p>For each entry <var>entry</var> in <var>old chain</var>, in order, run
Expand Down Expand Up @@ -87423,6 +87454,8 @@ dictionary <dfn dictionary>CommandEventInit</dfn> : <span>EventInit</span> {
are as follows:</p>

<ol>
<li><p>If <var>target</var>'s <span>node navigable</span> is null, then return false.</p></li>

<li><p>If <var>target</var>'s <span>node navigable</span>'s <span data-x="nav-top">top-level
traversable</span> does not have <span>system focus</span>, then return false.</p></li>

Expand Down Expand Up @@ -114775,6 +114808,9 @@ new PaymentRequest(&hellip;); // Allowed to use
<var>document</var>'s <span data-x="concept-Document-worklet-global-scopes">worklet global
scopes</span>, <span data-x="terminate a worklet global scope">terminate</span>
<var>workletGlobalScope</var>.</p></li>

<li><p><span data-x="list remove">Remove</span> <var>document</var> from <var>document</var>'s
<span>relevant agent</span>'s <span>pending focus reset documents</span>.</p></li>
</ol>
</div>

Expand Down Expand Up @@ -123823,7 +123859,8 @@ import "https://example.com/foo/../module2.mjs";</code></pre>
<p class="note">In addition to this asynchronous fixup, if the <span>focused area of the
document</span> is removed, there is a <a href="#node-remove-focus-fixup">synchronous
fixup</a>. That one will <em>not</em> fire <code data-x="event-blur">blur</code> or <code
data-x="event-change">change</code> events.</p>
data-x="event-change">change</code> events; instead, it causes a <code
data-x="event-focusreset">focusreset</code> event to be fired.</p>
</li>

<li><p>For each <var>doc</var> of <var>docs</var>, <span>perform pending transition
Expand Down Expand Up @@ -125408,6 +125445,7 @@ typedef <span>OnBeforeUnloadEventHandlerNonNull</span>? <dfn typedef>OnBeforeUnl
<thead>
<tr><th><span data-x="event handlers">Event handler</span> <th><span>Event handler event type</span>
<tbody>
<tr><td><dfn attribute for="Document"><code data-x="handler-onfocusreset">onfocusreset</code></dfn> <td> <code data-x="event-focusreset">focusreset</code>
<tr><td><dfn attribute for="Document"><code data-x="handler-onreadystatechange">onreadystatechange</code></dfn> <td> <code data-x="event-readystatechange">readystatechange</code>
<tr><td><dfn attribute for="Document"><code data-x="handler-onvisibilitychange">onvisibilitychange</code></dfn> <td> <code data-x="event-visibilitychange">visibilitychange</code>
</table>
Expand Down Expand Up @@ -161964,6 +162002,12 @@ INSERT INTERFACES HERE
<td> <code>Window</code>, elements
<td> Fired at nodes <span data-x="gains focus">gaining focus</span>

<tr> <!-- focusreset -->
<td> <code data-x="event-focusreset">focusreset</code>
<td> <code>Event</code>
<td> <code>Document</code>
<td> Fired at the <code>Document</code> during <span>notify mutation observers</span> if its focused element was removed and focus was not explicitly moved since

<tr> <!-- formdata -->
<td> <dfn event for="HTMLElement"><code data-x="event-formdata">formdata</code></dfn>
<td> <code>FormDataEvent</code>
Expand Down
Loading