Lag on fast typing and backspace on input fields in deployed Blazor code-CodePudding

I have created a reusable input field component in Blazor server application. When I run it in local, it is working fine. No issue in fast typing or backspace.

But when the same gets deployed, it is lagging on fast typing and fast backspace. If I type too slow only then it is working. The code I am using for reusable input component

<input placeholder="Input field" Class="form-control" @oninput="InputValueChanged" value="@Text" @onkeydown="Enter"/>
}

@code {    
    [Parameter]
    public EventCallback<string> TextChanged { get; set; }
    
    [Parameter]
    public EventCallback<string> EnterButtonClicked { get; set; }
    
    public void Enter(KeyboardEventArgs keyboardEventArgs)
    {
        if(keyboardEventArgs.Code.Equals("Enter") || keyboardEventArgs.Code.Equals("NumpadEnter"))
        {
            EnterButtonClicked.InvokeAsync(Text);
        }
    }

    public async Task InputValueChanged(ChangeEventArgs args)
    {
        Text = args.Value.ToString();
        await TextChanged.InvokeAsync(Text);
        StateHasChanged();
    }
}

CodePudding user response：

You are using @oninput on Blazor Server Side. Which means everytime you type a character, InputValueChanged will be executed and through it you are gonna have some network time ( execution time, probably negligible in your case, but would be an issue). If you are typing too fast, the process of the previously typed characters may not be finished.

Locally, there is no network time, this is why it works fine.

You have two possibilities:

Use another event
Try debouncing your event

This addresses this matter.

CodePudding user response：

Maybe the StateHasChanged(); isn't needed, and is causing the lag.