Blazor: add support for onclose event (#50727)

* Blazor: add support for onclose event

* Remove StateHasChanged call in test

* Also support cancel event

* Update .js

---------

Co-authored-by: campersau <[email protected]>

Author: SteveSandersonMS

src/Components/Web.JS/dist/Release/blazor.server.js

@@ -8,9 +8,11 @@ import { dispatchEvent } from '../WebRendererInteropMethods';
 const nonBubblingEvents = toLookup([
   'abort',
   'blur',
+  'cancel',
   'canplay',
   'canplaythrough',
   'change',
+  'close',
   'cuechange',
   'durationchange',
   'emptied',

src/Components/Web.JS/dist/Release/blazor.web.js

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

src/Components/Web.JS/dist/Release/blazor.webview.js

@@ -122,7 +122,12 @@ 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("oncancel", typeof(EventArgs), false, true)]
+[EventHandler("onclose", typeof(EventArgs), false, true)]
 public static class EventHandlers
 {
 }

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

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

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

@@ -185,6 +185,37 @@ public void Toggle_CanTrigger()
         Browser.Equal("ontoggle,", () => output.Text);
     }
 
+    [Fact]
+    public void Close_CanTrigger()
+    {
+        Browser.MountTestComponent<DialogEventsComponent>();
+
+        Browser.Exists(By.Id("show-dialog")).Click();
+
+        var output = Browser.Exists(By.Id("output"));
+        Assert.Equal(string.Empty, output.Text);
+
+        // Click
+        Browser.Exists(By.Id("dialog-close")).Click();
+        Browser.Equal("onclose,", () => output.Text);
+    }
+
+    [Fact]
+    public void Cancel_CanTrigger()
+    {
+        Browser.MountTestComponent<DialogEventsComponent>();
+
+        Browser.Exists(By.Id("show-dialog")).Click();
+
+        var output = Browser.Exists(By.Id("output"));
+        Assert.Equal(string.Empty, output.Text);
+
+        // Press escape to cancel. This fires both close and cancel, but MDN doesn't document in which order
+        Browser.FindElement(By.Id("my-dialog")).SendKeys(Keys.Escape);
+        Browser.Contains("onclose,", () => output.Text);
+        Browser.Contains("oncancel,", () => output.Text);
+    }
+
     [Fact]
     public void PointerDown_CanTrigger()
     {

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

@@ -0,0 +1,25 @@
+<div>
+    <p>
+        Output: <span id="output">@message</span>
+    </p>
+
+    <button id="show-dialog" onclick="document.getElementById('my-dialog').showModal()">
+        Show modal dialog
+    </button>
+
+    <dialog id="my-dialog" @onclose="OnClose" @oncancel="OnCancel">
+        <form method="dialog">
+            <button id="dialog-close">Close</button>
+        </form>
+    </dialog>
+</div>
+
+@code {
+    string message;
+
+    void OnClose(EventArgs e)
+        => message += "onclose,";
+
+    void OnCancel(EventArgs e)
+        => message += "oncancel,";
+}

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

@@ -103,6 +103,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.DialogEventsComponent">Dialog Events</option>
         <option value="BasicTestApp.TouchEventComponent">Touch events</option>
         <option value="BasicTestApp.VirtualizationComponent">Virtualization</option>
         <option value="BasicTestApp.VirtualizationDataChanges">Virtualization data changes</option>