Additional information regarding restrictions of events that can be used with @bind:event is needed

[georgehemmings]

Description

Bind a property or field on other DOM events by including an @bind:event="{EVENT}" attribute with a DOM event for the {EVENT} placeholder. The following example binds the InputValue property to the <input> element's value when the element's oninput event ([input](https://developer.mozilla.org/docs/Web/API/HTMLElement/input_event)) is triggered. Unlike the onchange event ([change](https://developer.mozilla.org/docs/Web/API/HTMLElement/change_event)), which fires when the element loses focus, oninput ([input](https://developer.mozilla.org/docs/Web/API/HTMLElement/input_event)) fires when the value of the text box changes.

This sections makes it seem like you can use any DOM EVENT as the trigger for binding. It only works with oninput and onchange as far as I can tell. onkeydown doesn't work for example. Internally it looks like the DOM EVENT must be mapped to the ChangeEventArgs class for the event to work.

It also doesn't call out that the "on" prefix is needed before the DOM EVENT name.

Thanks
George

Page URL

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/data-binding?view=aspnetcore-10.0&preserve-view=true

Content source URL

https://github.com/dotnet/AspNetCore.Docs/blob/main/aspnetcore/blazor/components/data-binding.md

Document ID

3f912dfc-5ba5-6c6c-ba93-1ae78508a5cc

Platform Id

ad2f661d-d520-a055-4a4e-26b9520e6ce3

Article author

@guardrex

Metadata

• ID: b211df59-e1c9-86c0-c904-31fa3c361e6d
• PlatformId: ad2f661d-d520-a055-4a4e-26b9520e6ce3
• Service: aspnet-core
• Sub-service: blazor

Related Issues

[github-actions]

🏖️🌞 Summertime!! Woot!! 🏐⛵

Stand-by! ... A green dinosaur 🦖 will be along shortly to assist.

[georgehemmings]

Runtime error when using keydown. @bind:event="onkeydown"

Unhandled exception rendering component: Object of type 'Microsoft.AspNetCore.Components.Web.KeyboardEventArgs' cannot be converted to type 'Microsoft.AspNetCore.Components.ChangeEventArgs'.

[guardrex]

From the other issue ...

The confusion for me is that even with @bind:set in place, the @bind:event still works alongside it. It's not an alternative like manually handling the DOM event would be.

<input type="text" @bind:get="text" @bind:set="Set" @bind:event="oninput" />

I don't know if we require a change to the text on the preceding point.

@danroth27 ... We probably need to clarify on the points that @georgehemmings brings up ...

Item 1

This sections makes it seem like you can use any DOM EVENT as the trigger for binding. It only works with oninput and onchange as far as I can tell. onkeydown doesn't work for example. Internally it looks like the DOM EVENT must be mapped to the ChangeEventArgs class for the event to work.

Runtime error when using keydown. @bind:event="onkeydown"

Unhandled exception rendering component: Object of type 'Microsoft.AspNetCore.Components.Web.KeyboardEventArgs' cannot be converted to type 'Microsoft.AspNetCore.Components.ChangeEventArgs'.

Item 2

It also doesn't call out that the "on" prefix is needed before the DOM EVENT name.

[danroth27]

@danroth27 ... We probably need to clarify on the points that @georgehemmings brings up ...

I believe both points are correct and deserve clarification. For binding to work, we need an event that allows us to get the new value. I think this means the event needs to be mapped to the ChangeEventArgs event argument type, but we should probably get @javiercn to confirm.

And yes, the "on" prefix is needed. Might as well state that explicitly.