Search code examples
eventsblazorblazor-server-side

Why would the onChange event of InputText not fire in Blazor?

I have the following razor markup in a blazor component:

<div class="form-group row">
    <label for="name">Contact: </label>
    <InputText id="name" @bind-Value="Contact.Name" @onchange="NameChanged"></InputText>
</div>

When I modify the contact name on the form and tab out of the control the NameChange method is never called. Is there something else that I need to do in order to get the onChange event to trigger?

Solution

  • You cannot do @bind-value and @onchange because bi-directional binding subscribe to the onchange event.

    But you can do it manualy :

    <div class="form-group row">
    <label for="name">Contact: </label>
    <InputText id="name" Value="@Contact.Name" ValueChanged="NameChanged" ValueExpression="() => Contact.Name" ></InputText>
</div>

@code {
    private void NameChanged(string value)
    {
        Contact.Name = value;
    }
}