Avoid user typing delay in input textfield box mudblazor blazor c#

Question

I have a mud blazor grid with pagination/global search. The search functionality works as expected when I test it in my local i.e it filters out the grid as soon as the user types in something and it seems to be really fast. The problem occurs when I host it to dev/stage server. The user input is delayed. Also, it works fine if the input is entered slowly. For instance, if I try to enter "test" into the searchbox quite fast then it always misses 1 or 2 characters and prints it as "tst" even though I've typed all the characters carefully. The pointer flickers very frequently on pressing backspace.

I tried to clear the cache but still doesn't work after hosting whereas no such problem occurs when doing the above in my local env.

I can't figure out what have I done wrong as in why the performance is affected. Note: I'm loading the dataset at once from db (inside onInitialized())

The code:

Index.razor


                        
                            
                                
                                
                                    
                                
                            
                            

                        
                        
                            Customer Id
                            Customer Name
                             ....
                            Actions
                        
                        
                                                 
                            @context.CustomerId
                            @context.CustomerName
                             ....
                            @context.IsActive
                            
                            
                               ...

IndexBase.cs

 protected void FilterChanged(ChangeEventArgs args)
        {
            searchString = args.Value.ToString();
            table.ReloadServerData();
        }
protected async Task> LoadCustomers(TableState tableState)
        {
            IEnumerable data = CustomersWithOrderInfo.OrderByDescending(q => q.CustomerId);
            data = data.Where(p =>
            {
                if (string.IsNullOrWhiteSpace(searchString))
                    return true;
               
                if (!string.IsNullOrEmpty(p.CustomerName) && p.CustomerName.Contains(searchString, StringComparison.OrdinalIgnoreCase))
                    return true;
               
                if ($"{p.CustomerId}".Contains(searchString))
                    return true;
                return false;

            }).ToArray();
            totalItems = data.Count();
            pagedData = data.Skip(tableState.Page * tableState.PageSize).Take(tableState.PageSize).ToArray();
            return new TableData() { TotalItems = totalItems, Items = pagedData };
        }

user_10989407 · Answer

I think this is because you used @oninput="@FilterChanged", this means this will execute FilterChanged every time you type a character. Since FilterChanged is a function that takes some time, this creates some lags to the UI while it executes.

Try replacing @oninput="@FilterChanged" by @onchange="@FilterChanged". This will execute FilterChanged when the element loses focus.

Another possibility would be to add a button or to execute when Enter key is pressed.

See the doc.

user_19386398 · Answer

I had exactly the same issue on Ant Blazor. Typing is fine if slow, but if I type quickly characters start getting dropped. The fix is super easy: add DebounceMilliseconds="1000" to your input component.

For example

Explanation on why it works (credit to https://github.com/ant-design-blazor/ant-design-blazor/issues/1283#issuecomment-810108270):

Due to the way inputs work, the string that is 2 way-bounded from the input form gets updated from the string to the text box.

In a Blazor Server scenario, with latency being a thing (imagine 200ms for an average request), if you send multiple updates to the server, they will respond back to you with state, but you already typed more.

One way to fix this is to set the debounce time to be 1 or 2+ seconds

such that with slow internet no request will be sent while typing is happening.

If you are using an enter key or button to submit/search etc - you may use an absurdly large debounce time, as the onblur event will cause an update (think tabbing out, clicking somewhere else).

Avoid user typing delay in input textfield box mudblazor blazor c#

2 Answers