bug(AutoComplete): studder on long running OnValueChanged function call

[celadaris]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

When typing on an AutoComplete Component that has a long running function attached to the OnValueChanged attribute, the value of the component is overwritten by an older value of the component causing a unpleasant studder/bad user experience.

A good example of this happening is when running queries.

Expected Behavior

There shouldnt be any studders and text should never overwrite what the user typed, unless an item was selected in the dropdown or after the blur event.

Interactive render mode

Interactive Server (Interactive server-side rendering (interactive SSR) using Blazor Server)

Steps To Reproduce

<h1>@testValue</h1>

<AutoComplete OnValueChanged="hello" OnEnterAsync="hello"></AutoComplete>

<Button Text="TestBtn" OnClick="@(() => hello("hi"))"></Button>

@code {
    int testValue = 0;

    async Task hello(string value)
    {
        await Task.Delay(500);
        testValue++;

        await InvokeAsync(StateHasChanged);
    }
}

Exceptions (if any)

No response

.NET Version

NET9.0

Anything else?

2025-04-11.12-43-38.mp4

[bb-auto]

@celadaris Thank you for filing this issue. In order for us to investigate this issue, please provide a minimalistic repro project that illustrates the problem.

[celadaris]

I should note, i'm trying to figure out a fix for this, i'll keep trying over the weekend, but if you figure it out before me that would be a relief!

[celadaris]

i made a branch called studder i have to do more testing on it later

[celadaris]

i made it a PR actually...

[ArgoZhang]

@celadaris Thank you very much for your PR. However, there are too many unnecessary formatting-related changes, which makes code review very difficult. Would you like to reorganize the code to remove any unnecessary changes?

[celadaris]

Take another looks at it, I used AI for pretty much all of it, so if its hard to read we can scrap it, no worries!

[celadaris]

from my own personal testing its functioning well, here is my explanation

[ArgoZhang]

@celadaris looks good. could you help me merge the main into studder branch and resolve the conflicts?

[ArgoZhang]

@celadaris, I tried to merge the branches but found some problems during the code review. Such changes are not appropriate.

/// <summary>
/// Handles the Escape key press. Resets visual input.
/// Hides base implementation because base is not virtual.
/// Removed [JSInvokable] to prevent conflicts with base JSInvokable.
/// </summary>
public new async Task EscCallback() // Use 'new'
{
    // STUTTER FIX: Reset visual input to last committed C# value via JS
    await JSSetInputValue(Value);
}

/// <summary>
/// Handles the Delete/Backspace key press trigger from original JS.
/// Removed [JSInvokable] to prevent conflicts. Body is cleared because
/// value changes from delete/backspace are now handled by the debounced
/// PerformFilteringAndCommitValue method triggered by Input.composition.
/// </summary>
public Task TriggerDeleteCallback(string val)
{
    return Task.CompletedTask;
}

A lot of the logic is completely wrong. Can I try to fix this problem with my thinking?

[ArgoZhang]

@celadaris Please test it with the main branch. I think there is no problem. If there is a problem, please let me know what the expected value is and what the actual value is, and I will investigate it. 😄

[celadaris]

• I signed off on the merge conflicts
• I tried to match your changes as best as I could when you solved bug(AutoComplete): if field has an initial value, list that appears on initial focus contains non-matching entries #5821.

You can change any part of it, To be completely honest these PR changes aren't in the mindset of writing good code, the PR was more about making something that worked, so I'd be happy to see it change, or if there's a better way to fix the studder feel free to implement your own solution, I'd make it better myself if I knew how 😅

If I had to speculate I think it involves something like making the UI so that the...

• UI pieces render independently without reassigning user input
• UI pieces can be 100% controlled from c#

and so then if those two things are true then...

we could keep value="@CurrentValueAsString" and then we wouldnt have to have 2 variables, one for the user input, and one for the UI.

the problem I have with implementing this kind of design myself is that my javascript is not good at all!