From dd72c7c38a7cb070659affc38dfe808ed64ad61d Mon Sep 17 00:00:00 2001
From: Steve Sanderson <SteveSandersonMS@users.noreply.github.com>
Date: Tue, 13 Nov 2018 13:40:13 +0000
Subject: [PATCH] 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/Rendering/EventForDotNet.ts           |  1 +
 .../Components/EventHandlers.cs               |  2 +-
 .../Tests/EventTest.cs                        | 29 +++++++++++++++++--
 test/testapps/BasicTestApp/Index.cshtml       |  1 +
 .../BasicTestApp/InputEventComponent.cshtml   |  9 ++++++
 5 files changed, 39 insertions(+), 3 deletions(-)
 create mode 100644 test/testapps/BasicTestApp/InputEventComponent.cshtml

diff --git a/src/Microsoft.AspNetCore.Blazor.Browser.JS/src/Rendering/EventForDotNet.ts b/src/Microsoft.AspNetCore.Blazor.Browser.JS/src/Rendering/EventForDotNet.ts
index fde7fdc1a2..6024d71808 100644
--- a/src/Microsoft.AspNetCore.Blazor.Browser.JS/src/Rendering/EventForDotNet.ts
+++ b/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'];
diff --git a/src/Microsoft.AspNetCore.Blazor/Components/EventHandlers.cs b/src/Microsoft.AspNetCore.Blazor/Components/EventHandlers.cs
index 22f873fd8e..150c7331f0 100644
--- a/src/Microsoft.AspNetCore.Blazor/Components/EventHandlers.cs
+++ b/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))]
diff --git a/test/Microsoft.AspNetCore.Blazor.E2ETest/Tests/EventTest.cs b/test/Microsoft.AspNetCore.Blazor.E2ETest/Tests/EventTest.cs
index db719228bb..2358957dae 100644
--- a/test/Microsoft.AspNetCore.Blazor.E2ETest/Tests/EventTest.cs
+++ b/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());
+            }
+        }
     }
 }
diff --git a/test/testapps/BasicTestApp/Index.cshtml b/test/testapps/BasicTestApp/Index.cshtml
index 4dd265d4be..6d101e51f7 100644
--- a/test/testapps/BasicTestApp/Index.cshtml
+++ b/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>
diff --git a/test/testapps/BasicTestApp/InputEventComponent.cshtml b/test/testapps/BasicTestApp/InputEventComponent.cshtml
new file mode 100644
index 0000000000..f6b5a003f8
--- /dev/null
+++ b/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; }
+}