Blazor: add support for ontoggle event (#24036)

Summary of the changes
- Implemented `@ontoggle` event
- Added test component to BasicTestApp

Fix Issue: #20859

src/Components/Shared/src/WebEventData.cs

@@ -71,6 +71,7 @@ namespace Microsoft.AspNetCore.Components.Web
                     "touch" => Deserialize<TouchEventArgs>(eventArgsJson),
                     "unknown" => EventArgs.Empty,
                     "wheel" => Deserialize<WheelEventArgs>(eventArgsJson),
+                    "toggle" => Deserialize<EventArgs>(eventArgsJson),
                     _ => throw new InvalidOperationException($"Unsupported event type '{eventArgsType}'. EventId: '{eventHandlerId}'."),
                 };
             }

src/Components/Web.JS/src/Rendering/EventDelegator.ts

@@ -17,6 +17,7 @@ const nonBubblingEvents = toLookup([
   'scroll',
   'submit',
   'unload',
+  'toggle',
   'DOMNodeInsertedIntoDocument',
   'DOMNodeRemovedFromDocument',
 ]);

src/Components/Web.JS/src/Rendering/EventForDotNet.ts

@@ -89,6 +89,9 @@ export class EventForDotNet<TData extends UIEventArgs> {
       case 'mousewheel':
         return new EventForDotNet<UIWheelEventArgs>('wheel', parseWheelEvent(event as WheelEvent));
 
+      case 'toggle':
+        return new EventForDotNet<UIEventArgs>('toggle', { type: event.type });
+
       default:
         return new EventForDotNet<UIEventArgs>('unknown', { type: event.type });
     }
@@ -248,7 +251,7 @@ function normalizeTimeBasedValue(element: HTMLInputElement): string {
 
 // The following interfaces must be kept in sync with the UIEventArgs C# classes
 
-export type EventArgsType = 'change' | 'clipboard' | 'drag' | 'error' | 'focus' | 'keyboard' | 'mouse' | 'pointer' | 'progress' | 'touch' | 'unknown' | 'wheel';
+export type EventArgsType = 'change' | 'clipboard' | 'drag' | 'error' | 'focus' | 'keyboard' | 'mouse' | 'pointer' | 'progress' | 'touch' | 'unknown' | 'wheel' | 'toggle';
 
 export interface UIEventArgs {
   type: string;

src/Components/Web/ref/Microsoft.AspNetCore.Components.Web.netcoreapp.cs

@@ -345,6 +345,7 @@ namespace Microsoft.AspNetCore.Components.Web
     [Microsoft.AspNetCore.Components.EventHandlerAttribute("onsuspend", typeof(System.EventArgs), true, true)]
     [Microsoft.AspNetCore.Components.EventHandlerAttribute("ontimeout", typeof(Microsoft.AspNetCore.Components.Web.ProgressEventArgs), true, true)]
     [Microsoft.AspNetCore.Components.EventHandlerAttribute("ontimeupdate", typeof(System.EventArgs), true, true)]
+    [Microsoft.AspNetCore.Components.EventHandlerAttribute("ontoggle", typeof(System.EventArgs), true, true)]
     [Microsoft.AspNetCore.Components.EventHandlerAttribute("ontouchcancel", typeof(Microsoft.AspNetCore.Components.Web.TouchEventArgs), true, true)]
     [Microsoft.AspNetCore.Components.EventHandlerAttribute("ontouchend", typeof(Microsoft.AspNetCore.Components.Web.TouchEventArgs), true, true)]
     [Microsoft.AspNetCore.Components.EventHandlerAttribute("ontouchenter", typeof(Microsoft.AspNetCore.Components.Web.TouchEventArgs), true, true)]

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

@@ -122,6 +122,8 @@ namespace Microsoft.AspNetCore.Components.Web
     [EventHandler("onpointerlockerror", typeof(EventArgs), true, true)]
     [EventHandler("onreadystatechange", typeof(EventArgs), true, true)]
     [EventHandler("onscroll", typeof(EventArgs), true, true)]
+
+    [EventHandler("ontoggle", typeof(EventArgs), true, true)]
     public static class EventHandlers
     {
     }

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

@@ -115,6 +115,24 @@ namespace Microsoft.AspNetCore.Components.E2ETest.Tests
             Browser.Equal("onmousedown,onmouseup,", () => output.Text);
         }
 
+
+        [Fact]
+        public void Toggle_CanTrigger()
+        {
+            Browser.MountTestComponent<ToggleEventComponent>();
+
+            var detailsToggle = Browser.FindElement(By.Id("details-toggle"));
+
+            var output = Browser.FindElement(By.Id("output"));
+            Assert.Equal(string.Empty, output.Text);
+
+            // Click
+            var actions = new Actions(Browser).Click(detailsToggle);
+
+            actions.Perform();
+            Browser.Equal("ontoggle,", () => output.Text);
+        }
+
         [Fact]
         public void PointerDown_CanTrigger()
         {

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

@@ -82,6 +82,7 @@
         <option value="BasicTestApp.TextOnlyComponent">Plain text</option>
         <option value="BasicTestApp.TouchEventComponent">Touch events</option>
         <option value="BasicTestApp.SelectVariantsComponent">Select with component options</option>
+        <option value="BasicTestApp.ToggleEventComponent">Toggle Event</option>
     </select>
 
     <span id="runtime-info"><code><tt>@System.Runtime.InteropServices.RuntimeInformation.FrameworkDescription</tt></code></span>

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

@@ -0,0 +1,25 @@
+<div>
+    <p>
+        Output: <span id="output">@message</span>
+    </p>
+
+
+    <p>Open the details.</p>
+
+    <details id="details-toggle" @ontoggle="OnToggle">
+        <summary>Summary</summary>
+        <p></p>
+        <p>Detailed content</p>
+    </details>
+
+</div>
+
+@code {
+    string message { get; set; }
+
+    void OnToggle(EventArgs e)
+    {
+        message += "ontoggle,";
+        StateHasChanged();
+    }
+}