Blazor Fix Missing EventArgs.Type (#38792)

* Blazor Fix Missing EventArgs.Type

* E2E Test

* Consolidate E2E Tests

* Quarantine TouchEvent_CanTrigger

* Unquarantine TouchEvent_CanTrigger

* Add support for focus event

* blazor.*.js

* Update EventTest.cs

* ClipboardEventArgs

Author: TanayParikh

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

@@ -60,13 +60,17 @@ registerBuiltInEventType(['input', 'change'], {
   createEventArgs: parseChangeEvent
 });
 
-registerBuiltInEventType(['copy', 'cut', 'paste'], createBlankEventArgsOptions);
+registerBuiltInEventType(['copy', 'cut', 'paste'], {
+  createEventArgs: e => parseClipboardEvent(e as ClipboardEvent)
+});
 
 registerBuiltInEventType(['drag', 'dragend', 'dragenter', 'dragleave', 'dragover', 'dragstart', 'drop'], {
   createEventArgs: e => parseDragEvent(e as DragEvent)
 });
 
-registerBuiltInEventType(['focus', 'blur', 'focusin', 'focusout'], createBlankEventArgsOptions);
+registerBuiltInEventType(['focus', 'blur', 'focusin', 'focusout'], {
+  createEventArgs: e => parseFocusEvent(e as FocusEvent)
+});
 
 registerBuiltInEventType(['keydown', 'keyup', 'keypress'], {
   createEventArgs: e => parseKeyboardEvent(e as KeyboardEvent)
@@ -154,11 +158,24 @@ function parseTouchEvent(event: TouchEvent): TouchEventArgs {
   };
 }
 
+function parseFocusEvent(event: FocusEvent): FocusEventArgs {
+  return {
+    type: event.type
+  };
+}
+
+function parseClipboardEvent(event: ClipboardEvent): ClipboardEventArgs {
+  return {
+    type: event.type
+  };
+}
+
 function parseProgressEvent(event: ProgressEvent<EventTarget>): ProgressEventArgs {
   return {
     lengthComputable: event.lengthComputable,
     loaded: event.loaded,
     total: event.total,
+    type: event.type,
   };
 }
 
@@ -168,6 +185,7 @@ function parseErrorEvent(event: ErrorEvent): ErrorEventArgs {
     filename: event.filename,
     lineno: event.lineno,
     colno: event.colno,
+    type: event.type,
   };
 }
 
@@ -181,6 +199,7 @@ function parseKeyboardEvent(event: KeyboardEvent): KeyboardEventArgs {
     shiftKey: event.shiftKey,
     altKey: event.altKey,
     metaKey: event.metaKey,
+    type: event.type,
   };
 }
 
@@ -232,6 +251,7 @@ function parseMouseEvent(event: MouseEvent): MouseEventArgs {
     shiftKey: event.shiftKey,
     altKey: event.altKey,
     metaKey: event.metaKey,
+    type: event.type,
   };
 }
 
@@ -313,6 +333,7 @@ interface ErrorEventArgs {
   filename: string;
   lineno: number;
   colno: number;
+  type: string;
 
   // omitting 'error' here since we'd have to serialize it, and it's not clear we will want to
   // do that. https://developer.mozilla.org/en-US/docs/Web/API/ErrorEvent
@@ -327,6 +348,7 @@ interface KeyboardEventArgs {
   shiftKey: boolean;
   altKey: boolean;
   metaKey: boolean;
+  type: string;
 }
 
 interface MouseEventArgs {
@@ -345,6 +367,7 @@ interface MouseEventArgs {
   shiftKey: boolean;
   altKey: boolean;
   metaKey: boolean;
+  type: string;
 }
 
 interface PointerEventArgs extends MouseEventArgs {
@@ -362,6 +385,7 @@ interface ProgressEventArgs {
   lengthComputable: boolean;
   loaded: number;
   total: number;
+  type: string;
 }
 
 interface TouchEventArgs {
@@ -392,3 +416,11 @@ interface WheelEventArgs extends MouseEventArgs {
   deltaZ: number;
   deltaMode: number;
 }
+
+interface FocusEventArgs {
+  type: string;
+}
+
+interface ClipboardEventArgs {
+  type: string;
+}

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

@@ -29,6 +29,7 @@ public void Read_Works()
                 ScreenX = 0.1,
                 ScreenY = 4.4,
                 ShiftKey = false,
+                Type = "type",
             };
             var jsonElement = GetJsonElement(args);
 

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

@@ -41,13 +41,13 @@ public void FocusEvents_CanTrigger()
             // Focus the target, verify onfocusin is fired
             input.Click();
 
-            Browser.Equal("onfocus,onfocusin,", () => output.Text);
+            Browser.Equal("focus,focusin,", () => output.Text);
 
             // Focus something else, verify onfocusout is also fired
             var other = Browser.Exists(By.Id("other"));
             other.Click();
 
-            Browser.Equal("onfocus,onfocusin,onblur,onfocusout,", () => output.Text);
+            Browser.Equal("focus,focusin,blur,focusout,", () => output.Text);
         }
 
         [Fact]
@@ -79,7 +79,7 @@ public void MouseOverAndMouseOut_CanTrigger()
                 .MoveToElement(other);
 
             actions.Perform();
-            Browser.Equal("onmouseover,onmouseout,", () => output.Text);
+            Browser.Equal("mouseover,mouseout,", () => output.Text);
         }
 
         [Fact]
@@ -98,7 +98,7 @@ public void MouseMove_CanTrigger()
                 .MoveToElement(input, 10, 10);
 
             actions.Perform();
-            Browser.Contains("onmousemove,", () => output.Text);
+            Browser.Contains("mousemove,", () => output.Text);
         }
 
         [Fact]
@@ -117,12 +117,12 @@ public void MouseDownAndMouseUp_CanTrigger()
             var actions = new Actions(Browser).ClickAndHold(input);
 
             actions.Perform();
-            Browser.Equal("onmousedown,", () => output.Text);
+            Browser.Equal("mousedown,", () => output.Text);
 
             actions = new Actions(Browser).Release(input);
 
             actions.Perform();
-            Browser.Equal("onmousedown,onmouseup,", () => output.Text);
+            Browser.Equal("mousedown,mouseup,", () => output.Text);
         }
 
 
@@ -156,7 +156,7 @@ public void PointerDown_CanTrigger()
             var actions = new Actions(Browser).ClickAndHold(input);
 
             actions.Perform();
-            Browser.Equal("onpointerdown", () => output.Text);
+            Browser.Equal("pointerdown,", () => output.Text);
         }
 
         [Fact]
@@ -174,10 +174,11 @@ public void DragDrop_CanTrigger()
 
             actions.Perform();
             // drop doesn't seem to trigger in Selenium. But it's sufficient to determine "any" drag event works
-            Browser.Equal("ondragstart,", () => output.Text);
+            Browser.Equal("dragstart,", () => output.Text);
         }
 
-        [Fact(Skip = "https://github.com/dotnet/aspnetcore/issues/32373")]
+        [Fact]
+        [QuarantinedTest("https://github.com/dotnet/aspnetcore/issues/32373")]
         public void TouchEvent_CanTrigger()
         {
             Browser.MountTestComponent<TouchEventComponent>();
@@ -190,7 +191,7 @@ public void TouchEvent_CanTrigger()
             var actions = new TouchActions(Browser).SingleTap(input);
 
             actions.Perform();
-            Browser.Equal("touchstarttouchend,", () => output.Text);
+            Browser.Equal("touchstart,touchend,", () => output.Text);
         }
 
         [Fact]

src/Components/Web/test/WebEventData/MouseEventArgsReaderTest.cs

@@ -2,8 +2,8 @@
 
 <h2>Focus and activation</h2>
 
-<p @onfocusin="OnFocusIn" @onfocusout="OnFocusOut">
-    Input: <input id="input" type="text" @onfocus="OnFocus" @onblur="OnBlur" />
+<p @onfocusin="OnFocusEvent" @onfocusout="OnFocusEvent">
+    Input: <input id="input" type="text" @onfocus="OnFocusEvent" @onblur="OnFocusEvent" />
 </p>
 <p>
     Output: <span id="output">@message</span>
@@ -33,24 +33,9 @@
     bool buttonReceivedFocusOut;
     string message;
 
-    void OnFocus(FocusEventArgs e)
+    void OnFocusEvent(FocusEventArgs e)
     {
-        message += "onfocus,";
-    }
-
-    void OnBlur(FocusEventArgs e)
-    {
-        message += "onblur,";
-    }
-
-    void OnFocusIn(FocusEventArgs e)
-    {
-        message += "onfocusin,";
-    }
-
-    void OnFocusOut(FocusEventArgs e)
-    {
-        message += "onfocusout,";
+        message += $"{e.Type},";
     }
 
     void Clear()

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

@@ -15,5 +15,10 @@ Type here: <input @onkeypress=OnKeyPressed />
     {
         Console.WriteLine(JsonSerializer.Serialize(eventArgs));
         keysPressed.Add(eventArgs.Key);
+
+        if (eventArgs.Type != "keypress")
+        {
+            throw new ArgumentException($"Expected 'keypress' event type, got {eventArgs.Type}");
+        }
     }
 }

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

@@ -7,20 +7,20 @@
         Output: <span id="output">@message</span>
     </p>
     <p>
-        Mouseover: <input id="mouseover_input" type="text" @onmouseover="OnMouseOver" @onmouseout="OnMouseOut" />
+        Mouseover: <input id="mouseover_input" type="text" @onmouseover="OnMouseEvent" @onmouseout="OnMouseEvent" />
     </p>
     <p>
-        <span id="mousemove_input" @onmousemove="OnMouseMove">Mousemove city!</span>
+        <span id="mousemove_input" @onmousemove="OnMouseEvent">Mousemove city!</span>
     </p>
     <p>
-        Mousedown: <input id="mousedown_input" @onmousedown="OnMouseDown" @onmouseup="OnMouseUp" />
+        Mousedown: <input id="mousedown_input" @onmousedown="OnMouseEvent" @onmouseup="OnMouseEvent" />
     </p>
     <p>
-        Pointerdown: <input id="pointerdown_input" @onpointerdown="OnPointerDown" />
+        Pointerdown: <input id="pointerdown_input" @onpointerdown="OnPointerEvent" />
     </p>
     <p>
-        <div id="drag_input" draggable="true" @ondragstart="OnDragStart">Drag Me</div>
-        <div id="drop" @ondrop="OnDrop" ondragover="event.preventDefault()" style="width: 100px; height: 100px; border: dotted">Drop Target</div>
+        <div id="drag_input" draggable="true" @ondragstart="OnDragEvent">Drag Me</div>
+        <div id="drop" @ondrop="OnDragEvent" ondragover="event.preventDefault()" style="width: 100px; height: 100px; border: dotted">Drop Target</div>
     </p>
     <p>
         <button id="clear_event_log" @onclick="Clear">Clear</button>
@@ -40,52 +40,22 @@
 
     string message;
 
-    void OnMouseOver(MouseEventArgs e)
+    void OnMouseEvent(MouseEventArgs e)
     {
         DumpEvent(e);
-        message += "onmouseover,";
+        message += $"{e.Type},";
     }
 
-    void OnMouseOut(MouseEventArgs e)
+    void OnPointerEvent(PointerEventArgs e)
     {
         DumpEvent(e);
-        message += "onmouseout,";
+        message += $"{e.Type},";
     }
 
-    void OnMouseMove(MouseEventArgs e)
+    void OnDragEvent(DragEventArgs e)
     {
         DumpEvent(e);
-        message += "onmousemove,";
-    }
-
-    void OnMouseDown(MouseEventArgs e)
-    {
-        DumpEvent(e);
-        message += "onmousedown,";
-    }
-
-    void OnMouseUp(MouseEventArgs e)
-    {
-        DumpEvent(e);
-        message += "onmouseup,";
-    }
-
-    void OnPointerDown(PointerEventArgs e)
-    {
-        DumpEvent(e);
-        message += "onpointerdown";
-    }
-
-    void OnDragStart(DragEventArgs e)
-    {
-        DumpEvent(e);
-        message += "ondragstart,";
-    }
-
-    void OnDrop(DragEventArgs e)
-    {
-        DumpEvent(e);
-        message += "ondrop,";
+        message += $"{e.Type},";
     }
 
     void OnPolymorphicEvent(EventArgs e)

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

@@ -28,7 +28,7 @@
 
     void OnTouch(TouchEventArgs e)
     {
-        message += e.Type;
+        message += $"{e.Type},";
         Console.WriteLine(JsonSerializer.Serialize(e));
         StateHasChanged();
     }