Blazor: add support for onclose event

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

@@ -11,6 +11,7 @@ const nonBubblingEvents = toLookup([
   'canplay',
   'canplaythrough',
   'change',
+  'close',
   'cuechange',
   'durationchange',
   'emptied',

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

@@ -160,7 +160,7 @@ registerBuiltInEventType(['wheel', 'mousewheel'], {
   createEventArgs: e => parseWheelEvent(e as WheelEvent),
 });
 
-registerBuiltInEventType(['toggle'], createBlankEventArgsOptions);
+registerBuiltInEventType(['close', 'toggle'], createBlankEventArgsOptions);
 
 function parseChangeEvent(event: Event): ChangeEventArgs {
   const element = event.target as Element;

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

@@ -122,7 +122,11 @@ namespace Microsoft.AspNetCore.Components.Web;
 [EventHandler("onreadystatechange", typeof(EventArgs), true, true)]
 [EventHandler("onscroll", typeof(EventArgs), true, true)]
 
+// <details>
 [EventHandler("ontoggle", typeof(EventArgs), true, true)]
+
+// <dialog>
+[EventHandler("onclose", typeof(EventArgs), true, true)]
 public static class EventHandlers
 {
 }

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

@@ -185,6 +185,7 @@ private static bool TryDeserializeStandardWebEventArgs(
                 eventArgs = WheelEventArgsReader.Read(eventArgsJson);
                 return true;
 
+            case "close":
             case "toggle":
                 eventArgs = EventArgs.Empty;
                 return true;

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

@@ -185,6 +185,23 @@ public void Toggle_CanTrigger()
         Browser.Equal("ontoggle,", () => output.Text);
     }
 
+    [Fact]
+    public void Close_CanTrigger()
+    {
+        Browser.MountTestComponent<CloseEventComponent>();
+
+        var dialogClose = Browser.Exists(By.Id("dialog-close"));
+
+        var output = Browser.Exists(By.Id("output"));
+        Assert.Equal(string.Empty, output.Text);
+
+        // Click
+        var actions = new Actions(Browser).Click(dialogClose);
+
+        actions.Perform();
+        Browser.Equal("onclose,", () => output.Text);
+    }
+
     [Fact]
     public void PointerDown_CanTrigger()
     {

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

@@ -0,0 +1,24 @@
+<div>
+    <p>
+        Output: <span id="output">@message</span>
+    </p>
+
+
+    <p>Close the dialog.</p>
+
+    <dialog @onclose="OnClose" open>
+        <form method="dialog">
+            <button id="dialog-close">Close</button>
+        </form>
+    </dialog>
+
+</div>
+
+@code {
+    string message { get; set; }
+
+    void OnClose(EventArgs e)
+    {
+        message += "onclose,";
+    }
+}

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

@@ -102,6 +102,7 @@
         <option value="BasicTestApp.SvgFocusComponent">SVG Focus component</option>
         <option value="BasicTestApp.TextOnlyComponent">Plain text</option>
         <option value="BasicTestApp.ToggleEventComponent">Toggle Event</option>
+        <option value="BasicTestApp.CloseEventComponent">Close Event</option>
         <option value="BasicTestApp.TouchEventComponent">Touch events</option>
         <option value="BasicTestApp.VirtualizationComponent">Virtualization</option>
         <option value="BasicTestApp.VirtualizationDataChanges">Virtualization data changes</option>