Skip to content
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

Close dialog elements when the open attribute is removed #10124

Open
wants to merge 8 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
8 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
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
71 changes: 40 additions & 31 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59996,7 +59996,8 @@ fur
<li><p>Otherwise, if <var>submitter</var> has a <span data-x="concept-fe-value">value</span>,
then set <var>result</var> to that <span data-x="concept-fe-value">value</span>.</p></li>

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

<li><p>Return.</p></li>
</ol>
Expand Down Expand Up @@ -61720,26 +61721,19 @@ 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>
<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-close">close()</code> method to close the dialog, or the <code
data-x="attr-hidden">hidden</code> attribute to hide it.</p>
</div>
<li><p>If <var>value</var> is null, then <span>close the dialog</span> given
<var>element</var>, null, and true.</p></li>
</ol>

<p>The <code data-x="attr-tabindex">tabindex</code> attribute must not be specified on
<code>dialog</code> elements.</p>
Expand Down Expand Up @@ -62021,11 +62015,12 @@ 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>.</p></li>
<li><p><span>Close the dialog with attribute changes</span> given <span>this</span> and
<var>returnValue</var>.</p></li>
</ol>

<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>, run these steps:</p>
<p>To <dfn>close the dialog with attribute changes</dfn> given a <code>dialog</code> element
<var>subject</var> and a string or null <var>result</var>:</p>

<ol>
<li><p>If <var>subject</var> does not have an <code data-x="attr-dialog-open">open</code>
Expand All @@ -62046,6 +62041,14 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
<li><p>Remove <var>subject</var>'s <code data-x="attr-dialog-open">open</code>
attribute.</p></li>

<li><p>Run <span>close the dialog</span> given <var>subject</var>, <var>result</var>, and
false.</p></li>
</ol>

<p>To <dfn>close the dialog</dfn> given a <code>dialog</code> element <var>subject</var>, a
string or null <var>result</var>, and a boolean <var>asyncFocus</var>:</p>

<ol>
<li><p>If the <span>is modal</span> flag 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 @@ -62066,11 +62069,21 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {

<li><p>Set <var>subject</var>'s <span>previously focused element</span> to null.</p></li>

<li><p>If <var>subject</var>'s <span>node document</span>'s <span>focused area of the
document</span>'s <span>DOM anchor</span> is a <span>shadow-including inclusive
descendant</span> of <var>element</var>, or <var>wasModal</var> is true, then run the
<span>focusing steps</span> for <var>element</var>; the viewport should not be scrolled by
doing this step.</p></li>
<li>
<p>If <var>subject</var>'s <span>node document</span>'s <span>focused area of the
document</span>'s <span>DOM anchor</span> is a <span>shadow-including inclusive
descendant</span> of <var>element</var>, or <var>wasModal</var> is true, then:</p>

<ol>
<li><p>If <var>asyncFocus</var> is true, then <span>queue an element task</span> on the
<span>user interaction task source</span> given the <var>subject</var> element to run the
<span>focusing steps</span> for <var>element</var>; the viewport should not be scrolled by
doing this step.</p></li>

<li><p>Otherwise, run run the <span>focusing steps</span> for <var>element</var>; the
viewport should not be scrolled by doing this step.</p></li>
</ol>
</li>
</ol>
</li>

Expand Down Expand Up @@ -62108,11 +62121,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