Problem with FluentNumberField and value change handler?

[ZnowuJa]

Hi,
I have a problem with FluentNumberField and value changes handler.
I tried many attempts to call a method after property gets assigned to to FluentNumberField, but every time the issue persist earlier or later.
The problem is that something changes a value of property even when it is set and method shall stop. And it works continuously. Handler method is being run again and again.
This is one of the examples of field definition in component and its method:
<FluentNumberField
Min="0"
Max="@meal.Duration.ToString()"
@bind-Value:get="@meal.CoveredDinners"
@bind-Value:set="(e => HandleMealPropertyChange2(meal, nameof(meal.CoveredDinners)))" />

private async Task HandleMealPropertyChange2(DailyMeal meal, string propertyName)
{
    var property = meal.GetType().GetProperty(propertyName);
    if (property != null && property.CanWrite)
    {
        var currentValue = property.GetValue(meal);
        var newValue = property.GetValue(meal); // Get the updated value directly from the property

        if (!currentValue.Equals(newValue))
        {
            Console.WriteLine($"Updated value of {propertyName}: {newValue}");
            await OnDailyMealChanged.InvokeAsync(_content);
        }
    }
}                                             

You can find working example here: [https://github.com/ZnowuJa/TestFluentBlazorWebApp/tree/master/Components/Pages/FluentNumber] (github repo and folder)

But I tested this also with @onchange, @bind-Value:after, always getting the same result you can see on video. After change a value it it is still changing randomly within some set for instance 1-2-3-1-2-3-1-2-3 and so on and so on. Even if I comment-out my handler method the same happens.

2025-02-27_21h18_44.mp4

Sometimes I have to click just 2-3 times, sometimes I click 5 minutes before issue appears. The best method to see it quickly is to setup CPU throttling (in browsers dev tools Performance tab) to at least 6x or even 20x slowdown.

Regards

PS. I'm not 100% sure, but it looks like everything is working fine if we set HideStep="true" so user has to input number manualy.

[rpodevns]

In the breakfast field, the ValueExpression is bound to meal.CoveredLunches instead of meal.CoveredBreakfasts, while the Value itself is bound to meal.CoveredBreakfasts and this mismatch is likely causing the control’s binding to update the wrong property so those number fields appear to have a mind of their own.

Also, StateHasChanged is called is places where it isn't needed such as in OnInitializedAsync, and that's causing more renders than needed. Have a read through this link below for info on when to call StateHasChanged, when not to call it, and when to use InvokeAsync with StateHasChanged.

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/rendering?view=aspnetcore-9.0

Expect the renders to be slower when using Reflection rather than default bindings.

[ZnowuJa]

Thank you Roland for your quick reply.
You're right there was a mistake with bindings which is fixed now. StateHasChanged was called so frequently to stress this small page a bit more - also removed them.
Please find the updated code. I expanded it with two alternatives. So we have 3 examples (components) on one page.
First one is using FluentNumberField as I wanted at the very beginning. To see the effect please use CPU throttling option set to 20x slower and click steps arrows fast.
Second example is FluentNumberField but with HideStep option set to true. Then we test it with super fast tab-number sequences.
Third one is classic Input number.
Additionally I added counter to count mouse clicks, method runs, key downs and present them in example.
Also added Total summary for exemplary list so change is easier visible.
As I mentioned previously the best method to see result of issue quickly is to setup CPU throttling to 20x slowdown.
In my opinion we can say that it is a bug in the component.

Link to folder

[vnbaaij]

We have had so many discussions about and issues with the FluentNumberField. The underlying web component is severely broken and will not be fixed anymore.

Please see the other issues and my replies to those. In general a number field is not a good solution. See the reference I linked to in the other issues.

[rpodevns]

I'm also a library user and wanted to add that the documentation does not mention using Reflection in @bind:set handlers. My guess is that doing so bypasses the normal invocation of the property setter -- meaning that internal logic like change notifications may not be triggered as expected. This could be leading to timing issues and possibly race conditions. You may need to check with the Blazor team about using reflection to get/set property values.