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

user_2969067 0
Viewed 15919

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?

blazor-server-side blazor events
4 Answers

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;
    }
}
user_29409080

Try using on input (when typing every symbol) or on blur - when navigating away from a field.

<InputText id="name" @bind-Value="Contact.Name" @oninput="NameChanged" @onblur="NameChanged"></InputText>

bind-value is using @onchange to update the component value. So you can't use them together.

From MS documentation:

Using @bind with the CurrentValue property () is essentially equivalent to the following:

<input value="@CurrentValue"
    @onchange="@((ChangeEventArgs __e) => CurrentValue = 
        __e.Value.ToString())" />

@code {
    private string CurrentValue { get; set; }
}
user_25245430

you cannot do bind-value and @onchange same time

user_35122610

I found a much shorter and simpler variant.

<input @bind="searchString" @bind:event="oninput" @onkeyup="SearchChanged" >

Any method can then be called with @onkeyup.

user_122141120
Related