Events not firing when FluentNumberField is used

72 Views Asked by At

I am using two input fields to calculate a sum. When I use regular input fields, the code works. When I use FluentNumberField, however, the sum is not updated after the user has inputted values.

Here is the code snippet:

@page "/calculationpage"
@rendermode InteractiveServer

@* This code works@
<input type="number" @bind-value="ValueOne" @bind-value:event="oninput" @onchange="@UpdateTotal" />
<input type="number" @bind-value="ValueTwo" @bind-value:event="oninput" @onchange="@UpdateTotal" />
<label>Total: @Total</label>

@* This code does not work *@
<FluentNumberField @bind-Value="ValueOne" Label="Value One" Size="2" onChange="@UpdateTotal" />
<FluentNumberField @bind-Value="ValueTwo" Label="Value One" Size="2" onChange="@UpdateTotal" />
<FluentLabel> Total: @Total </FluentLabel>

@code {

    private int ValueOne = 0;
    private int ValueTwo = 0;

    private int Total = 0;

    private void UpdateTotal()
    {
        Total = ValueOne + ValueTwo;
    }

}

I was expecting the FluentLabel to show the sum similar to the standard HTML label. Instead, it keeps showing zero.

0

There are 0 best solutions below