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.

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

Conversation

josepharhar
Copy link
Contributor

@josepharhar josepharhar commented Feb 5, 2024

Fixes #5802

This patch adds attribute change steps to run the dialog closing steps whenever the open attribute is removed in order to prevent a bad state where the dialog is hidden but modal which renders the rest of the page inert.

(See WHATWG Working Mode: Changes for more details.)


/form-control-infrastructure.html ( diff )
/interactive-elements.html ( diff )

Fixes whatwg#5802

This patch adds attribute change steps to run the dialog closing steps
whenever the open attribute is removed in order to prevent a bad state
where the dialog is hidden but modal which renders the rest of the page
inert.
Copy link
Member

@domenic domenic left a comment

Choose a reason for hiding this comment

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

Very excited to see you tackle this! I hope other implementers are interested and that it's web-compatible. Pinging @emilio @zcorpan @annevk @nt1m for their thoughts.

return.</p></li>

<li><p>If <var>value</var> is null, then <span>close the dialog</span> given
<var>element</var>.</p></li>
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

source Show resolved Hide resolved
source Outdated Show resolved Hide resolved
@domenic domenic self-assigned this Feb 6, 2024
@josepharhar
Copy link
Contributor Author

I hope other implementers are interested and that it's web-compatible.

I will ship this behind a flag, and I will let yall know if any issues come up. I don't have a usecounter for it but I don't see why this change would be a problem.

Copy link
Member

@domenic domenic left a comment

Choose a reason for hiding this comment

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

Generally LGTM. I'll agenda+ this in the hopes of getting quick feedback.

return.</p></li>

<li><p>If <var>value</var> is null, then <span>close the dialog</span> given
<var>element</var>.</p></li>
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!)

source Show resolved Hide resolved
@domenic domenic added the agenda+ To be discussed at a triage meeting label Feb 7, 2024
@annevk
Copy link
Member

annevk commented Feb 8, 2024

Seems reasonable modulo web compatibility. @lukewarlow might also be interested in this.

source Outdated Show resolved Hide resolved
Copy link
Contributor

@keithamus keithamus left a comment

Choose a reason for hiding this comment

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

As a web developer (currently using <dialog> quite a bit), I'd be interested in seeing this change. (I've raised https://phabricator.services.mozilla.com/D201076 for Firefox).

source Show resolved Hide resolved
@past past removed the agenda+ To be discussed at a triage meeting label Feb 8, 2024
source Outdated
<p>To <dfn>close the dialog</dfn> given a <code>dialog</code> element <var>subject</var> and a
string or null <var>result</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>

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?

chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this pull request Feb 9, 2024
https: //github.com/whatwg/html/pull/10124#discussion_r1483640232
Change-Id: Iab20699b345d96a8cffc83f7e7e44f4a03feb833
@lukewarlow
Copy link
Member

This feels like a big win for developers and having looked at the changes I don't think it's likely to cause any issues. Especially because it's unlikely developers will be relying on this behaviour (seems like its always undesirable)

@mfreed7
Copy link
Contributor

mfreed7 commented Nov 19, 2024

Any updates on this PR? It's mildly related to #10737 inasmuch as the close watcher logic is a little weirder (implementation-wise) when the open attribute can just be yanked off without calling close(). @josepharhar did you happen to try shipping the new behavior to see about web compat? (I'm happy to try, if there's consensus that this PR's behavior is desirable.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Development

Successfully merging this pull request may close these issues.

Dialog should be better-behaved on misuse, probably
8 participants