Add @bind-open support for details and dialog elements

src/Components/Web.JS/src/Rendering/Events/EventTypes.ts

@@ -160,7 +160,11 @@ registerBuiltInEventType(['wheel', 'mousewheel'], {
   createEventArgs: e => parseWheelEvent(e as WheelEvent),
 });
 
-registerBuiltInEventType(['cancel', 'close', 'toggle'], createBlankEventArgsOptions);
+registerBuiltInEventType(['cancel', 'close'], createBlankEventArgsOptions);
+
+registerBuiltInEventType(['toggle'], {
+  createEventArgs: e => parseToggleEvent(e),
+});
 
 function parseChangeEvent(event: Event): ChangeEventArgs {
   const element = event.target as Element;
@@ -190,6 +194,18 @@ function parseWheelEvent(event: WheelEvent): WheelEventArgs {
   };
 }
 
+function parseToggleEvent(event: Event): ChangeEventArgs {
+  // For <details>, <dialog>, and popover elements, return a ChangeEventArgs
+  // compatible object with the open state as a boolean value. This enables @bind-open support.
+  // We use ToggleEvent.newState which works for all element types that fire toggle events.
+  const toggleEvent = event as ToggleEvent;
+  const isOpen = toggleEvent.newState === 'open';
+
+  return {
+    value: isOpen,
+  };
+}
+
 function parsePointerEvent(event: PointerEvent): PointerEventArgs {
   return {
     ...parseMouseEvent(event),

src/Components/Web/src/Web/BindAttributes.cs

@@ -45,6 +45,10 @@ namespace Microsoft.AspNetCore.Components.Web;
 
 [BindElement("select", null, "value", "onchange")]
 [BindElement("textarea", null, "value", "onchange")]
+
+// <details> element binds to the 'open' attribute using the 'ontoggle' event
+[BindElement("details", null, "open", "ontoggle")]
+[BindElement("details", "open", "open", "ontoggle")]
 public static class BindAttributes
 {
 }

src/Components/Web/src/Web/EventHandlers.cs

@@ -122,8 +122,8 @@ namespace Microsoft.AspNetCore.Components.Web;
 [EventHandler("onreadystatechange", typeof(EventArgs), true, true)]
 [EventHandler("onscroll", typeof(EventArgs), true, true)]
 
-// <details>
-[EventHandler("ontoggle", typeof(EventArgs), true, true)]
+// <details> and elements with popover attribute
+[EventHandler("ontoggle", typeof(ChangeEventArgs), true, true)]
 
 // <dialog>
 [EventHandler("oncancel", typeof(EventArgs), false, true)]

src/Components/Web/src/WebEventData/WebEventData.cs

@@ -187,10 +187,14 @@ private static bool TryDeserializeStandardWebEventArgs(
 
             case "cancel":
             case "close":
-            case "toggle":
                 eventArgs = EventArgs.Empty;
                 return true;
 
+            case "toggle":
+                // Toggle events return ChangeEventArgs with value=boolean to support @bind-open
+                eventArgs = ChangeEventArgsReader.Read(eventArgsJson);
+                return true;
+
             default:
                 // For custom event types, there are no built-in rules, so the deserialization type is
                 // determined by the parameter declared on the delegate.

src/Components/test/E2ETest/Tests/BindTest.cs

@@ -194,6 +194,56 @@ public void CanBindCheckbox_InitiallyChecked()
         Browser.Equal("True", () => boundValue.Text);
     }
 
+    [Fact]
+    public void CanBindDetailsElement_InitiallyClosed()
+    {
+        var target = Browser.Exists(By.Id("details-initially-closed"));
+        var boundValue = Browser.Exists(By.Id("details-initially-closed-value"));
+        var toggleButton = Browser.Exists(By.Id("details-initially-closed-toggle"));
+        Assert.Null(target.GetDomAttribute("open"));
+        Assert.Equal("False", boundValue.Text);
+
+        // Click to expand; verify value is updated
+        target.FindElement(By.TagName("summary")).Click();
+        Browser.NotEqual(null, () => target.GetDomAttribute("open"));
+        Browser.Equal("True", () => boundValue.Text);
+
+        // Click to collapse; verify value is updated
+        target.FindElement(By.TagName("summary")).Click();
+        Browser.Equal(null, () => target.GetDomAttribute("open"));
+        Browser.Equal("False", () => boundValue.Text);
+
+        // Modify data programmatically; verify details is updated
+        toggleButton.Click();
+        Browser.NotEqual(null, () => target.GetDomAttribute("open"));
+        Browser.Equal("True", () => boundValue.Text);
+    }
+
+    [Fact]
+    public void CanBindDetailsElement_InitiallyOpen()
+    {
+        var target = Browser.Exists(By.Id("details-initially-open"));
+        var boundValue = Browser.Exists(By.Id("details-initially-open-value"));
+        var toggleButton = Browser.Exists(By.Id("details-initially-open-toggle"));
+        Assert.NotNull(target.GetDomAttribute("open"));
+        Assert.Equal("True", boundValue.Text);
+
+        // Click to collapse; verify value is updated
+        target.FindElement(By.TagName("summary")).Click();
+        Browser.Equal(null, () => target.GetDomAttribute("open"));
+        Browser.Equal("False", () => boundValue.Text);
+
+        // Click to expand; verify value is updated
+        target.FindElement(By.TagName("summary")).Click();
+        Browser.NotEqual(null, () => target.GetDomAttribute("open"));
+        Browser.Equal("True", () => boundValue.Text);
+
+        // Modify data programmatically; verify details is updated
+        toggleButton.Click();
+        Browser.Equal(null, () => target.GetDomAttribute("open"));
+        Browser.Equal("False", () => boundValue.Text);
+    }
+
     [Fact]
     public void CanBindSelect()
     {

src/Components/test/testassets/BasicTestApp/BindCasesComponent.razor

@@ -302,6 +302,26 @@
     <button id="checkbox-initially-checked-invert" @onclick="@(() => { checkboxInitiallyCheckedValue = !checkboxInitiallyCheckedValue; })">Invert</button>
 </p>
 
+<h2>Details element</h2>
+<p>
+    Initially closed:
+    <details id="details-initially-closed" @bind-open="detailsInitiallyClosedValue">
+        <summary>Click to expand</summary>
+        <p>Details content</p>
+    </details>
+    <span id="details-initially-closed-value">@detailsInitiallyClosedValue</span>
+    <button id="details-initially-closed-toggle" @onclick="@(() => { detailsInitiallyClosedValue = !detailsInitiallyClosedValue; })">Toggle</button>
+</p>
+<p>
+    Initially open:
+    <details id="details-initially-open" @bind-open="detailsInitiallyOpenValue">
+        <summary>Click to collapse</summary>
+        <p>Details content</p>
+    </details>
+    <span id="details-initially-open-value">@detailsInitiallyOpenValue</span>
+    <button id="details-initially-open-toggle" @onclick="@(() => { detailsInitiallyOpenValue = !detailsInitiallyOpenValue; })">Toggle</button>
+</p>
+
 <h2>Select</h2>
 <p>
     <select id="select-box" @bind="selectValue">
@@ -483,6 +503,9 @@
     bool checkboxInitiallyUncheckedValue = false;
     bool checkboxInitiallyCheckedValue = true;
 
+    bool detailsInitiallyClosedValue = false;
+    bool detailsInitiallyOpenValue = true;
+
     int textboxIntValue = -42;
     int? textboxNullableIntValue = null;
     long textboxLongValue = 3_000_000_000;