Skip to content

Technical review: Document the ToggleEvent.source property #40533

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

chrisdavidmills
Copy link
Contributor

@chrisdavidmills chrisdavidmills commented Jul 25, 2025

Description

Chrome 140 adds support for the ToggleEvent.source property. See #39723 for details.

This PR adds documentation for the new property.

Motivation

Additional details

Related issues and pull requests

Fixes #39723.

@chrisdavidmills chrisdavidmills requested a review from a team as a code owner July 25, 2025 16:24
@chrisdavidmills chrisdavidmills requested review from sideshowbarker and removed request for a team July 25, 2025 16:24
@github-actions github-actions bot added the Content:WebAPI Web API docs label Jul 25, 2025
@chrisdavidmills chrisdavidmills changed the title Document the ToggleEvent.source property Technical review: Document the ToggleEvent.source property Jul 25, 2025
@chrisdavidmills chrisdavidmills removed the request for review from sideshowbarker July 25, 2025 16:25
@github-actions github-actions bot added the size/m [PR only] 51-500 LoC changed label Jul 25, 2025
Copy link
Contributor

@chrisdavidmills
Copy link
Contributor Author

Can I get a tech review, please, @josepharhar?

I'm on vacation for a week next week, so there might be a bit of a delay getting it merged.

Copy link

@josepharhar josepharhar left a comment

Choose a reason for hiding this comment

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

Thank you for writing this!

@@ -29,6 +29,8 @@ _This interface inherits properties from its parent, {{DOMxRef("Event")}}._
- : A string (either `"open"` or `"closed"`), representing the state the element is transitioning to.
- {{DOMxRef("ToggleEvent.oldState")}} {{ReadOnlyInline}}
- : A string (either `"open"` or `"closed"`), representing the state the element is transitioning from.
- {{DOMxRef("ToggleEvent.source")}} {{Experimental_Inline}} {{ReadOnlyInline}}
- : An {{domxref("Element")}} object instance representing the HTML control that initiated the toggle.

Choose a reason for hiding this comment

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

ToggleEvent.source may be null, for example if you just call popover.showPopover() from script. Not sure if this is worth mentioning here.


The **`source`** read-only property of the {{domxref("ToggleEvent")}} interface is an {{domxref("Element")}} object instance representing the HTML popover control element that initiated the toggle.

A {{htmlelement("button")}} or `<input type="button">` element can be specified as a popover control by specifying the [`id`](/en-US/docs/Web/HTML/Reference/Global_attributes/id) of the popover element in its [`commandfor`](/en-US/docs/Web/HTML/Reference/Elements/button#commandfor) or [`popovertarget`](/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget) attribute.

Choose a reason for hiding this comment

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

I don't think command attribute work on <input type=button>?


## Value

An {{domxref("Element")}} object instance, or `null` if the popover does not have a control element (for example, if the popover is being controlled using a JavaScript method such as {{domxref("HTMLElement.togglePopover()")}}).

Choose a reason for hiding this comment

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

Instead of saying "if the popover does not have a control element" id say "if the popover was not triggered (or activated?) by a control element"

In this example, the popover does have a control element but the ToggleEvent fired will have a null source:

<button commandfor=popover command=show-popover>control</button>
<div id=popover popover=auto>popover</div>
<script>
popover.showPopover();
</script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Content:WebAPI Web API docs size/m [PR only] 51-500 LoC changed
Projects
None yet
Development

Successfully merging this pull request may close these issues.

ToggleEvent.source
2 participants