ServerSide Blazor Input onchange issue Core 3.0

[chrdlx]

Given this slighty modified Counter.razor component (from the default blazor server side template)

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

<input value="@currentCount" @onchange="chg" />

@code {
    int currentCount = 0;
   
    void IncrementCount()
    {
        currentCount++;
    }

    void chg(ChangeEventArgs e)
    {
        currentCount = 999;
    }
}

I would expect that every time the input is changed (by user input), the value goes back to 999, but this doesn't happen.... It works for just one change, after that... you can keep changing the input entering any number, and it doesn't change anymore.

Regards!

[javiercn]

@chrdlx thanks for contacting us.

On change only gets triggered when the element looses focus. In this case you can click on the component as much as you want while the textbox doesn't have the focus.

At that point the value on the textbox gets updated.

Then if you go into the textbox, modify the contents and remove the focus (press tab) the onchange event gets triggered.

This behaves the same way in plain HTML.

[chrdlx]

Hi Javier, the problem is that the event gets triggered but the value in the UI doesn't get updated.
It works for the first time you trigger the event, after that... the UI doesn't get updated anymore...

I attach the gif for you to see the behaviour

See, when I change the contents of the input field and then click outside, the value goes back to 999 as expected, but this only works for one time only.

Regards

[javiercn]

@chrdlx Thanks for the clarification, let me take another look.

[javiercn]

It's simpler than that, it changes the first time but it doesn't trigger a re-render because after you change the counter you unconditionally re-assign the same value.

[chrdlx]

And how do I trigger a re-render? Because I want to rollback the input entered if for example... the user enters a value > 10. StateHasChanged doesn't change this situation.

My goal is this... let the user enter numbers, and if the number > 10, then rollback to the last number entered. Is this doable with the onchange event?

Regards!

[javiercn]

@chrdlx thanks for insisting and sorry about the back and forth, it's very rare we find bugs in this area and we tend to dismiss them.

I think this is a bug in the compiler. I believe the compiler is missing
__builder.SetUpdatesAttributeName("value")

namespace BlazorServerApp.Pages
{
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Threading.Tasks;
    using Microsoft.AspNetCore.Components;
    using System.Net.Http;
    using Microsoft.AspNetCore.Authorization;
    using Microsoft.AspNetCore.Components.Authorization;
    using Microsoft.AspNetCore.Components.Forms;
    using Microsoft.AspNetCore.Components.Routing;
    using Microsoft.AspNetCore.Components.Web;
    using Microsoft.JSInterop;
    using BlazorServerApp;
    using BlazorServerApp.Shared;

    [Microsoft.AspNetCore.Components.RouteAttribute("/counter")]
    public partial class Counter : Microsoft.AspNetCore.Components.ComponentBase
    {
        protected override void BuildRenderTree(Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder)
        {
            __builder.OpenElement(0, "p");
            __builder.AddContent(1, "Current count: ");
            __builder.AddContent(2, 
                   currentCount

            );
            __builder.CloseElement();
            __builder.AddMarkupContent(3, "\r\n\r\n");
            __builder.OpenElement(4, "button");
            __builder.AddAttribute(5, "class", "btn btn-primary");
            __builder.AddAttribute(6, "onclick", Microsoft.AspNetCore.Components.EventCallback.Factory.Create<Microsoft.AspNetCore.Components.Web.MouseEventArgs>(
              this, 
              IncrementCount
            ));
            __builder.AddContent(7, "Click me");
            __builder.CloseElement();
            __builder.AddMarkupContent(8, "\r\n\r\n");
            __builder.OpenElement(9, "input");
            __builder.AddAttribute(10, "value", 
               currentCount

            );
            __builder.AddAttribute(11, "onchange", Microsoft.AspNetCore.Components.EventCallback.Factory.Create<Microsoft.AspNetCore.Components.ChangeEventArgs>(
              this, 
              chg
            ));
            __builder.CloseElement();
        }
       
    int currentCount = 0;

    void IncrementCount()
    {
        currentCount++;
    }

    void chg(ChangeEventArgs e)
    {
        currentCount = 999;
    }

    }
}

after the

            __builder.AddAttribute(11, "onchange", Microsoft.AspNetCore.Components.EventCallback.Factory.Create<Microsoft.AspNetCore.Components.ChangeEventArgs>(
              this, 
              chg
            ));

[willdean]

By a strange coincidence I struggled with a very similar issue this week - we wanted to overwrite the contents of a input control (clearing it, in our case), but it only works the first time, because re-writing the class member/property to the same value as it already has doesn't cause a re-render (and, as @chrdlx says, calling StateHasChanged doesn't help, because Blazor appears to be looking at whether the value of the class member has changed and seeing that it hasn't.)

Fortunately in our case we were only trying to clear the input, so we just alternate between assigning null and assigning "", and that tricks Blazor into doing the right thing - but that's not a general solution, though one might be able to alternate between writing (int)999 and "999" to an object property to achieve something similar.

I wasn't particularly sure it was a bug, I just thought it was some inherent limitation of the change-tracking stuff, and couldn't be bothered to wade through a million irrelevant suggestions about using StateHasChanged to see if there was a 'really really force an update' technique. I would have just written to the DOM if I was that desperate.