Skip to content

Close dialog elements when the open attribute is removed #10124

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 11 commits into
base: main
Choose a base branch
from
Open

Close dialog elements when the open attribute is removed #10124

Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
128a87e
Close dialog elements when the open attribute is removed
josepharhar Feb 5, 2024
9cdcfdd
add ignoreOpenAttribute parameter
josepharhar Feb 6, 2024
ae5c95d
delete notes
josepharhar Feb 6, 2024
6f65d03
fix closing tag
josepharhar Feb 7, 2024
d84add3
split into two algorithms
josepharhar Feb 7, 2024
42df787
remove ignoreopenattribute
josepharhar Feb 9, 2024
5a93291
Merge branch 'main' into dialogattrclose
josepharhar Dec 10, 2024
8fa9712
Make focus async when removing open attribute
josepharhar Dec 10, 2024
f26d007
remove async focus
josepharhar Feb 12, 2025
e3fb7c7
kind rebase
josepharhar Feb 19, 2026
ab7c06f
rewrite
josepharhar Feb 19, 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
65 changes: 28 additions & 37 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63281,8 +63281,8 @@ fur
button</span>, then set <var>result</var> to <var>submitter</var>'s <span
data-x="concept-fe-optional-value">optional value</span>.</p></li>

<li><p><span>Close the dialog</span> <var>subject</var> with <var>result</var> and
null.</p></li>
<li><p><span>Close the dialog</span> <var>subject</var> with <var>result</var>, null, and
false.</p></li>

<li><p>Return.</p></li>
</ol>
Expand Down Expand Up @@ -65126,26 +65126,20 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {

</div>

<div class="note" id="note-dialog-remove-open-attribute">
<p>Removing the <code data-x="attr-dialog-open">open</code> attribute will usually hide the
dialog. However, doing so has a number of strange additional consequences:

<ul>
<li><p>The <code data-x="event-close">close</code> event will not be fired.</p></li>
<div algorithm>
<p>The following <span data-x="concept-element-attributes-change-ext">attribute change
steps</span>, given <var>element</var>, <var>localName</var>, <var>oldValue</var>,
<var>value</var>, and <var>namespace</var> are used for <code>dialog</code> elements:</p>

<li><p>The <code data-x="dom-dialog-close">close()</code> method, and any <span data-x="close
request">close requests</span>, will no longer be able to close the dialog.</p></li>
<ol>
<li><p>If <var>namespace</var> is not null, then return.</p></li>

<li><p>If the dialog was shown using its <code data-x="dom-dialog-showModal">showModal()</code>
method, the <code>Document</code> will still be <span data-x="blocked by a modal
dialog">blocked</span>.</p></li>
</ul>
<li><p>If <var>localName</var> is not <code data-x="attr-dialog-open">open</code>, then
return.</p></li>

<p>For these reasons, it is generally better to never remove the <code
data-x="attr-dialog-open">open</code> attribute manually. Instead, use the <code
data-x="dom-dialog-requestclose">requestClose()</code> or <code
data-x="dom-dialog-close">close()</code> methods to close the dialog, or the <code
data-x="attr-hidden">hidden</code> attribute to hide it.</p>
<li><p>If <var>value</var> is null, then <span>close the dialog</span> given
<var>element</var>, null, null, and true.</p></li>
</ol>
</div>

<p>The <code data-x="attr-tabindex">tabindex</code> attribute must not be specified on
Expand Down Expand Up @@ -65266,8 +65260,8 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
<ol>
<li><p>If <var>returnValue</var> is not given, then set it to null.</p></li>

<li><p><span>Close the dialog</span> <span>this</span> with <var>returnValue</var> and
null.</p></li>
<li><p><span>Close the dialog</span> <span>this</span> with <var>returnValue</var>, null, and
false.</p></li>
</ol>
</div>

Expand All @@ -65293,11 +65287,7 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
<li><p>Hiding a dialog is different from closing one. Closing a dialog gives it a return value,
fires an event, unblocks the page for other dialogs, and so on. Whereas hiding a dialog is a
purely visual property, and is something you can already do with the <code
data-x="attr-hidden">hidden</code> attribute or by removing the <code
data-x="attr-dialog-open">open</code> attribute. (See also the <a
href="#note-dialog-remove-open-attribute">note above</a> about removing the <code
data-x="attr-dialog-open">open</code> attribute, and how hiding the dialog in that way is
generally not desired.)</p></li>
data-x="attr-hidden">hidden</code> attribute.</p></li>

<li><p>Showing a dialog is different from opening one. Opening a dialog consists of creating
and showing that dialog (similar to how <code data-x="dom-open">window.open()</code> both
Expand Down Expand Up @@ -65547,7 +65537,7 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {

<li><p><i data-x="create-close-watcher-closeAction">closeAction</i> being to <span>close the
dialog</span> given <var>dialog</var>, <var>dialog</var>'s <span>request close return
value</span>, and <var>dialog</var>'s <span>request close source element</span>.</p></li>
value</span>, <var>dialog</var>'s <span>request close source element</span>, and false.</p></li>

<li><p><i data-x="create-close-watcher-getEnabledState">getEnabledState</i> being to return
true if <var>dialog</var>'s <span>enable close watcher for request close</span> is true or
Expand Down Expand Up @@ -65585,14 +65575,14 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
data-x="attr-button-command-close-state">Close</span> state and <var>element</var> has an <code
data-x="attr-dialog-open">open</code> attribute, then <span>close the dialog</span>
<var>element</var> with <var>source</var>'s <span data-x="concept-fe-optional-value">optional
value</span> and <var>source</var>.</p></li>
value</span> and <var>source</var>, and false.</p></li>

<li><p>If <var>command</var> is in the <span
data-x="attr-button-command-request-close-state">Request Close</span> state and
<var>element</var> has an <code data-x="attr-dialog-open">open</code> attribute, then <span
data-x="dialog-request-close">request to close the dialog</span> <var>element</var> with
<var>source</var>'s <span data-x="concept-fe-optional-value">optional value</span> and
<var>source</var>.</p></li>
<var>source</var>'s <span data-x="concept-fe-optional-value">optional value</span>,
<var>source</var>, and false.</p></li>

<li><p>If <var>command</var> is the <span
data-x="attr-button-command-show-modal-state">Show Modal</span> state and <var>element</var> does
Expand Down Expand Up @@ -65626,12 +65616,12 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {

<div algorithm>
<p>When a <code>dialog</code> element <var>subject</var> is to be <dfn data-x="close the
dialog">closed</dfn>, with null or a string <var>result</var> and an <code>Element</code> or null
<var>source</var>, run these steps:</p>
dialog">closed</dfn>, with null or a string <var>result</var>, an <code>Element</code> or null
<var>source</var>, and a boolean <var>removingOpenAttribute</var>, run these steps:</p>

<ol>
<li><p>If <var>subject</var> does not have an <code data-x="attr-dialog-open">open</code>
attribute, then return.</p></li>
attribute and <var>removingOpenAttribute</var> is false, then return.</p></li>

<li><p><span data-x="concept-event-fire">Fire an event</span> named <code
data-x="event-beforetoggle">beforetoggle</code>, using <code>ToggleEvent</code>, with the <code
Expand All @@ -65642,13 +65632,13 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
<var>subject</var>.</p></li>

<li><p>If <var>subject</var> does not have an <code data-x="attr-dialog-open">open</code>
attribute, then return.</p></li>
attribute, and <var>removingOpenAttribute</var> is false, then return.</p></li>

<li><p><span>Queue a dialog toggle event task</span> given <var>subject</var>, "<code
data-x="">open</code>", "<code data-x="">closed</code>", and <var>source</var>.</p></li>

<li><p>Remove <var>subject</var>'s <code data-x="attr-dialog-open">open</code>
attribute.</p></li>
<li><p>If <var>removingOpenAttribute</var> is false, then remove <var>subject</var>'s <code
data-x="attr-dialog-open">open</code> attribute.</p></li>

<li><p>If <span>is modal</span> of <var>subject</var> is true, then <span>request an
element to be removed from the top layer</span> given <var>subject</var>.</p></li>
Expand All @@ -65666,7 +65656,8 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
<li><p>Set <var>subject</var>'s <span>request close source element</span> to null.</p></li>

<li>
<p>If <var>subject</var>'s <span>previously focused element</span> is not null, then:</p>
<p>If <var>subject</var>'s <span>previously focused element</span> is not null and
<var>removingOpenAttribute</var> is false, then:</p>

<ol>
<li><p>Let <var>element</var> be <var>subject</var>'s <span>previously focused
Expand Down