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

Close dialog elements when the open attribute is removed #10124

Changes from 1 commit
Commits
Show all changes
9 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
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
Prev Previous commit
Next Next commit
add ignoreOpenAttribute parameter
  • Loading branch information
@josepharhar
josepharhar committed Feb 6, 2024
commit 9cdcfdd5a2533e740268108b1078d37c6749a6a3
27 changes: 18 additions & 9 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59316,7 +59316,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</span> given <var>subject</var>, <var>result</var>, and
false.</p></li>

<li><p>Return.</p></li>
</ol>
Expand Down Expand Up @@ -61062,7 +61063,7 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
return.</p></li>

<li><p>If <var>value</var> is null, then <span>close the dialog</span> given
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This won't work, because it will return in step 1, because the open attribute has already been removed.

I guess we need to factor out steps 3-9 into a separate algorithm. Maybe "process open attribute removal"?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Whoops I forgot that, I added a parameter to close in chromium. I just added it here. What do you think?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's slightly harder to understand than factoring out the steps would be, but I don't feel too strongly. (Thanks for updating the algorithm declaration style while you were there!)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, I factored out the steps into a separate algorithm

<var>element</var>.</p></li>
<var>element</var>, null, and true.</p></li>
</ol>

<div class="note" id="note-dialog-remove-open-attribute">
Expand Down Expand Up @@ -61271,18 +61272,26 @@ 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</span> given <span>this</span>, <var>returnValue</var>, and
false.</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 data-x="close the dialog">close a dialog</dfn> given a <code>dialog</code> element
<var>subject<?var>, a string or null <var>result</var>, and a boolean
<var>ignoreOpenAttribute</var>:</p>

<ol>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(github doesn't seem to let me add comment in the right place outside the PR changes)
Don't "focusing steps" possibly end up firing an event at problematic time.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the best thing would either be to not focus the previously focused element in this case, or to post a task/microtask to focus that element. Thoughts? @domenic @keithamus

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dbaron too if you have thoughts

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Related for popovers: #10129

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd prefer to schedule a task. We should avoid losing focus on the document if we can help it.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Scheduling a task sounds good to me too

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@smaug---- what do you think of scheduling a task?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I made it schedule a task to focus for this case

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

<li><p>Remove <var>subject</var>'s <code data-x="attr-dialog-open">open</code>
attribute.</p></li>
<ol>
<li><p>If <var>subject</var> does not have an <code data-x="attr-dialog-open">open</code>
attribute, then return.</p></li>

<li><p>Remove <var>subject</var>'s <code data-x="attr-dialog-open">open</code>
attribute.</p></li>
</ol>
</li>

<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 Down