Skip to content
This repository has been archived by the owner on Feb 25, 2021. It is now read-only.

Commit

Permalink
Marshal oninput events as UIChangeEventArgs
Browse files Browse the repository at this point in the history
- 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
  • Loading branch information
Sebastian Reinhard authored and SteveSandersonMS committed Nov 13, 2018
1 parent 6a4982f commit 22dbd21
Show file tree
Hide file tree
Showing 5 changed files with 29 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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'];
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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))]
Expand Down
19 changes: 17 additions & 2 deletions test/Microsoft.AspNetCore.Blazor.E2ETest/Tests/EventTest.cs
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@
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;

Expand Down Expand Up @@ -127,5 +125,22 @@ public void PreventDefault_DotNotApplyByDefault()
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);

input.SendKeys("abcdefghijklmnopqrstuvwxyz");
WaitAssert.Equal("abcdefghijklmnopqrstuvwxyz", () => output.Text);

input.SendKeys(Keys.Backspace);
WaitAssert.Equal("abcdefghijklmnopqrstuvwxy", () => output.Text);
}
}
}
1 change: 1 addition & 0 deletions test/testapps/BasicTestApp/Index.cshtml
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
9 changes: 9 additions & 0 deletions test/testapps/BasicTestApp/InputEventComponent.cshtml
Original file line number Diff line number Diff line change
@@ -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; }
}

0 comments on commit 22dbd21

Please sign in to comment.