Marshal oninput events as UIChangeEventArgs (#1673)

* Marshal oninput events as UIChangeEventArgs

- Blazor does handle the oninput event, but it is marshalled as a regular UIEventArgs
- This means that we cannot access the new value of the input element from inside our oninput handler

Addresses #821

src/Microsoft.AspNetCore.Blazor.Browser.JS/src/Rendering/EventForDotNet.ts

@@ -6,6 +6,7 @@ export class EventForDotNet<TData extends UIEventArgs> {
     const element = event.target as Element;
     switch (event.type) {
 
+      case 'input':
       case 'change': {
         const targetIsCheckbox = isCheckbox(element);
         const newValue = targetIsCheckbox ? !!element['checked'] : element['value'];

src/Microsoft.AspNetCore.Blazor/Components/EventHandlers.cs

@@ -44,7 +44,7 @@ namespace Microsoft.AspNetCore.Blazor.Components
 
     // Input events
     [EventHandler("onchange", typeof(UIChangeEventArgs))]
-    [EventHandler("oninput", typeof(UIEventArgs))]
+    [EventHandler("oninput", typeof(UIChangeEventArgs))]
     [EventHandler("oninvalid", typeof(UIEventArgs))]
     [EventHandler("onreset", typeof(UIEventArgs))]
     [EventHandler("onselect", typeof(UIEventArgs))]

test/Microsoft.AspNetCore.Blazor.E2ETest/Tests/EventTest.cs

@@ -6,8 +6,6 @@ using Microsoft.AspNetCore.Blazor.E2ETest.Infrastructure;
 using Microsoft.AspNetCore.Blazor.E2ETest.Infrastructure.ServerFixtures;
 using OpenQA.Selenium;
 using OpenQA.Selenium.Interactions;
-using OpenQA.Selenium.Support.UI;
-using System;
 using Xunit;
 using Xunit.Abstractions;
 
@@ -127,5 +125,32 @@ namespace Microsoft.AspNetCore.Blazor.E2ETest.Tests
             appElement.FindElement(By.Id("form-2-button")).Click();
             Assert.Contains("about:blank", Browser.Url);
         }
+
+        [Fact]
+        public void InputEvent_RespondsOnKeystrokes()
+        {
+            MountTestComponent<InputEventComponent>();
+
+            var input = Browser.FindElement(By.TagName("input"));
+            var output = Browser.FindElement(By.Id("test-result"));
+
+            WaitAssert.Equal(string.Empty, () => output.Text);
+
+            SendKeysSequentially(input, "abcdefghijklmnopqrstuvwxyz");
+            WaitAssert.Equal("abcdefghijklmnopqrstuvwxyz", () => output.Text);
+
+            input.SendKeys(Keys.Backspace);
+            WaitAssert.Equal("abcdefghijklmnopqrstuvwxy", () => output.Text);
+        }
+
+        void SendKeysSequentially(IWebElement target, string text)
+        {
+            // Calling it for each character works around some chars being skipped
+            // https://stackoverflow.com/a/40986041
+            foreach (var c in text)
+            {
+                target.SendKeys(c.ToString());
+            }
+        }
     }
 }

test/testapps/BasicTestApp/Index.cshtml

@@ -13,6 +13,7 @@
         <option value="BasicTestApp.KeyPressEventComponent">Key press event</option>
         <option value="BasicTestApp.MouseEventComponent">Mouse events</option>
         <option value="BasicTestApp.TouchEventComponent">Touch events</option>
+        <option value="BasicTestApp.InputEventComponent">Input events</option>
         <option value="BasicTestApp.ParentChildComponent">Parent component with child</option>
         <option value="BasicTestApp.PropertiesChangedHandlerParent">Parent component that changes parameters on child</option>
         <option value="BasicTestApp.RedTextComponent">Red text</option>

test/testapps/BasicTestApp/InputEventComponent.cshtml

@@ -0,0 +1,9 @@
+<input bind-value-oninput=@inputText />
+
+<p>The text below should update automatically as you type in the text field above</p>
+
+<p id="test-result">@inputText</p>
+
+@functions {
+    string inputText { get; set; }
+}