The OnChanged event isn't firing for InputNumber

Hi @Falanga, Rod, DOH ,

The issue here isnt that Blazor isnt raising the event, its that youre wiring @bind-Value and @onchange to the same event on the same component. For InputNumber, @bind-Value already hooks into the onchange event under the hood, so when you add @onchange="OnAgeChanged" on top, your handler ends up colliding with the binding logic and effectively never runs.

Thats also why your InputText works: there you use @oninput, so @bind-Value is still using onchange, and your custom handler is on a different DOM event (oninput), no conflict. With InputNumber the binding is always tied to onchange, you cant just switch it to oninput, so @bind-Value + @onchange on the same tag is honestly a bad combo.

The easiest way to fix this is to drop the explicit @onchange and use @bind-Value:after or the Value / ValueChanged pattern. For your case, something like this is usually enough:

<InputNumber id="age"
             @bind-Value="model.Age"
             @bind-Value:after="OnAgeChanged" />

@code {
    private void OnAgeChanged()
    {
        Console.WriteLine($"Age updated to: {model.Age}");
    }
}

Here Blazor handles the onchange event, updates model.Age, and then calls OnAgeChanged, so you can just read the already-updated value instead of dealing with ChangeEventArgs. If you want more control you can switch to the explicit Value / ValueChanged pattern, but tbh for most scenarios @bind-Value:after does the job.

Also keep in mind that onchange only fires when the control loses focus or the user hits Enter, not on every keystroke. So if youre expecting your code to run while the user is still typing, thats just the default onchange behavior of InputNumber, not Blazor misbehaving.

@onchange does not work with <InputText> either. Try using @oninput in both cases.

Hi Falanga, Rod, DOH,

Aside from the methods above, here's another approach that works well and keeps things simple:

Instead of trying to combine @bind-Value with @onchange (which causes the collision), you can put your change logic directly in the property setter:

private int _age;

public int Age 

{ 

    get => _age; 

    set 

    { 

        if (_age != value)

        {

            _age = value;

            OnAgeChanged(); // Your custom logic here

        }

    }

}

 

private void OnAgeChanged()

{

    Console.WriteLine($"Age changed to: {_age}");

    // Add your validation, logging, etc.

}

Then in your razor file, just use the normal binding:

<InputNumber @bind-Value="Age" />

This way you still get change notifications but avoid the event collision entirely. The property setter automatically fires whenever the input changes, so you don't need the @onchange at all.

I've been using this pattern for a while and it's worked reliably across different .NET versions. Hope this helps!