aspnetcore: bind-value-oninput throws

For anyone wondering, since as of right now (at least for me) with version 0.4.0 bind-value-oninput still throws I found another method to update the bound value.

<input placeholder="Search" autofocus autocomplete="on" oninput="(this.dispatchEvent(new CustomEvent('change', { bubbles: true })))" bind="@currentSearchTerm" />

The oninput function being the important part. (Found this here). Took me some time to find so thought I’d share it at the top result when googling “Blazor oninput”.

@ransagy This oninput="(this.dispatchEvent(new CustomEvent('change', { bubbles: true })))" is not C# (Blazor) code. It is pure JavaScript. Look here: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

@springy76 it is probably not documented. I have just added this issue https://github.com/aspnet/Blazor.Docs/issues/368. Standard syntax <input bind="@myVariable" /> is exactly the same as <input bind-value-onchange="@myVariable" /> which means: create two way data binding for value property of input element and update myVariable each time onchange event is fired. By analogy <input bind-value-oninput="@FieldValue" /> means that myVariable will be updated each time oninput event will be fired.

Perfect !! Thanks so much !!

Sure @guardrex.
I created a new Issue as suggested. https://github.com/aspnet/AspNetCore/issues/9974

Hello @PirasannaRavi … Please open product feedback over in the aspnet/AspNetCore issues.

@SteveSandersonMS unfortunately your solution doesn’t work. This code

<input bind-value-oninput="@FieldValue" />
<p>@FieldValue</p>
@functions{
    string FieldValue { get; set; }
}

throws exception visible in console:

 SCRIPT5022: System.InvalidCastException: Specified cast is not valid.
  at Microsoft.AspNetCore.Blazor.Components.BindMethods+<>c__DisplayClass7_0.<SetValueHandler>b__0 (Microsoft.AspNetCore.Blazor.UIEventArgs _) <0x1c0c618 + 0x00014> in <0d9c96ffc9704aa9b088cbbe138126c6>:0 
  at Microsoft.AspNetCore.Blazor.Components.EventHandlerInvoker.Invoke (Microsoft.AspNetCore.Blazor.UIEventArgs e) <0x1c0c288 + 0x0008c> in <0d9c96ffc9704aa9b088cbbe138126c6>:0 
  at Microsoft.AspNetCore.Blazor.Components.BlazorComponent.Microsoft.AspNetCore.Blazor.Components.IHandleEvent.HandleEvent (Microsoft.AspNetCore.Blazor.Components.EventHandlerInvoker binding, Microsoft.AspNetCore.Blazor.UIEventArgs args) <0x1c0be10 + 0x0001a> in <0d9c96ffc9704aa9b088cbbe138126c6>:0 
  at Microsoft.AspNetCore.Blazor.Rendering.ComponentState.DispatchEvent (Microsoft.AspNetCore.Blazor.Components.EventHandlerInvoker binding, Microsoft.AspNetCore.Blazor.UIEventArgs eventArgs) <0x1c0bbb0 + 0x0003c> in <0d9c96ffc9704aa9b088cbbe138126c6>:0 
  at Microsoft.AspNetCore.Blazor.Rendering.Renderer.DispatchEvent (System.Int32 componentId, System.Int32 eventHandlerId, Microsoft.AspNetCore.Blazor.UIEventArgs eventArgs) <0x1c0b5e8 + 0x00054> in <0d9c96ffc9704aa9b088cbbe138126c6>:0 
  at Microsoft.AspNetCore.Blazor.Browser.Rendering.BrowserRenderer.DispatchBrowserEvent (System.Int32 componentId, System.Int32 eventHandlerId, Microsoft.AspNetCore.Blazor.UIEventArgs eventArgs) <0x1c0b480 + 0x00020> in <92ed9c6772a34798bccecc99cc26cbcd>:0 
  at Microsoft.AspNetCore.Blazor.Browser.Rendering.BrowserRendererEventDispatcher.DispatchEvent (System.String eventDescriptorJson, System.String eventArgsJson) <0x1bcb640 + 0x0005a> in <92ed9c6772a34798bccecc99cc26cbcd>:0

I can change oninput to onchange <input bind-value-onchange="@FieldValue" /> and it works as standard binding.