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

[invokers] Reference the parent popover/dialog #1148

Open
o-t-w opened this issue Feb 2, 2025 · 2 comments
Open

[invokers] Reference the parent popover/dialog #1148

o-t-w opened this issue Feb 2, 2025 · 2 comments

Comments

@o-t-w
Copy link

o-t-w commented Feb 2, 2025

The "close" command will almost always be used to close the dialog that the close button is in.

Similarly a button set to "hide-popover" will, a great deal of the time, be nested inside the popover that it hides.

Needing to reference a unique id makes reuse awkward. If I reuse the same UI element on the same page by copy/pasteing some HTML, needing to look through the markup and update every id and commandfor is laborious and error-prone.

It would be useful to be able to refer to the nearest ancestor popover/dialog element, rather than only being able to reference an id, which needs to be unique every time.

Something like commandfor="parent", commandfor="closest", commandfor="this" or commandfor="self"

e.g.

<dialog>
  <h2>Dialog</h2>
  <button command="close" commandfor="closest">Close</button>
</dialog>

If the command is set to "close", it would find the nearest ancestor dialog. If command is set to "hide-popover" it would reference the nearest ancestor popover.

I think this would have been nice default behaviour if the commandfor attribute was omitted, but if that's not possible this would at least be better than nothing.

For certain UI components, like a large nested menu, for example, many buttons, each with a command and commandfor might be used, which makes referencing ids particularly onerous.

https://codepen.io/cssgrid/pen/raBbMPL

@o-t-w o-t-w changed the title [invokers] Reference parent? [invokers] Reference the parent popover/dialog Feb 2, 2025
@hidde
Copy link
Contributor

hidde commented Feb 11, 2025

I like the idea of a defaulting to dialog button is in as the commandfor value, can see it save a lot of awkward manual setting up, like in the cases you describe.

@lukewarlow
Copy link
Collaborator

lukewarlow commented Feb 11, 2025

Fwiw I'm completely supportive of this idea, I also liked the idea of implicit commands. Both were in various states of being in the proposals originally. They've been dropped from v1 based on discussions in whatwg. But we can potentially bring either of them back in future (modulo compat concerns).

Things to consider is what would .commandForElement reflect? How would this work with the referencetarget proposal?

I actually think this is potentially more doable than implicit commands especially given that the commands will generally be unique to a specific element so will make searching for a valid target easier.

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

No branches or pull requests

3 participants