Textfield swallowing chars when typing rapidly (only on server, not on wasm)

[henon]

Describe the bug
This can be seen on mudblazor.com, type in the debounce example, type FAST! it will drop some chars.

related issues: #897

[Garderoben]

Seems to only happen on ServerSide Blazor or?
Is it possible to somehow only run the debouce after a certain amount of time after last key pressed? little hackiys maybe but seems to be a general blazor problem?

[henon]

Yes, doesn't happen on WASM.
It is not the problem of the debounce. It happens also with non-debounced textfields if you type really fast. I'll try to find a solution once I find the time. We might have to make some changes in MudBaseInput

[bm-evn]

To see it easily, just drop a chunk of text into any autocomplete field on https://mudblazor.com/components/autocomplete and just hold backspace. The cursor goes crazy.

[henon]

Textfield the same. It is NOT an autocomplete problem because autocomplete uses the textfield

[marcmognol]

@henon I just try on mudblazor.com and I have the issue on Autocomplete only.

[mikes-gh]

@Garderoben This is a really annoying widely reported bug which I don't think should be pushed too far into the Future IMO. We should try and fix this as soon as we can.

[henon]

Since Mike switched our docs server to hybrid (hosted wasm) I can't reproduce it any more, neither for textfield nor for autocomplete.

EDIT: Wrong, I set back to before the change to hybrid and tried with pure server. Can't reproduce it locally!!

[henon]

But it still happens on mudblazor.com so this is a bug that is impossible to fix for me. If I can't reproduce locally I can't test whether my changes fix the bug.

EDIT: spoke too soon. It can be reproduced locally by switching to low-tier device in chrome's debugger tools

[henon]

I am proud to announce that after 5 hours of tinkering I fixed this with a most elegant solution. The problem was that on slow computers or with high network latency a two-way bound value update coming from a MudInput travelled to the bound partner and came back to the original input which of course had already a newer value due to continued typing. The old value which was travelling and coming back to the sender due to two-way sync, however, then overwrites the new value from the user input. That resulted in seemingly swallowed characters. They were overwritten by a render update of the input.

The solution is simple. I track the focused state of an input by keeping a flag _isFocused which will be set true on input and false if OnBlur fires. While the input is focused it refuses to re-render. That solves the problem and allows the input to be updated by two-way binding in other situations where it is not focused.

[henon]

see #1228

[mynkow]

Still an issue in 2023.

Just paste the following text to try.mudblazor.com

        <MudAutocomplete T="string" Label="Search" @bind-Value="value1" SearchFunc="@Search1"
                         OnKeyUp="test"/>  

@code {
    private string value1;
    private string[] states =
    {
        "Alabama", "Alaska", "American Samoa", "Arizona",
        "Arkansas", "California", "Colorado", "Connecticut",
        "Delaware", "District of Columbia", "Federated States of Micronesia",
        "Florida", "Georgia", "Guam", "Hawaii", "Idaho",
        "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky",
        "Louisiana", "Maine", "Marshall Islands", "Maryland",
        "Massachusetts", "Michigan", "Minnesota", "Mississippi",
        "Missouri", "Montana", "Nebraska", "Nevada",
        "New Hampshire", "New Jersey", "New Mexico", "New York",
        "North Carolina", "North Dakota", "Northern Mariana Islands", "Ohio",
        "Oklahoma", "Oregon", "Palau", "Pennsylvania", "Puerto Rico",
        "Rhode Island", "South Carolina", "South Dakota", "Tennessee",
        "Texas", "Utah", "Vermont", "Virgin Island", "Virginia",
        "Washington", "West Virginia", "Wisconsin", "Wyoming",
    };

    private void test(KeyboardEventArgs e)
    {
        
    }

    private async Task<IEnumerable<string>> Search1(string value)
    {
        // In real life use an asynchronous function for fetching data from an api.
        await Task.Delay(5);

        // if text is null or empty, show complete list
        if (string.IsNullOrEmpty(value))
            return states;
        return states.Where(x => x.Contains(value, StringComparison.InvariantCultureIgnoreCase));
    }
}

[henon]

@mynkow no, this is an autocomplete issue not a textfield issue and also it does not happen if you remove the keyup handler so this is an entirely different thing from the original post. Proof: https://try.mudblazor.com/snippet/QumdadbEpZEotNvD