bug(AutoComplete): network delay causes input lag #5574
Description
Is there an existing issue for this?
- I have searched the existing issues
Describe the bug
This problem is the same as from #5110 and is a response to my PR #5555
When introducing any kind of lag to the network, the component replaces the current text with old text, keep in mind I did accidently press the wrong characters, but that clearly wasn't the main problem as you can see.
Untitled.design.mp4
The bug happens because the value that the autocomplete uses for debounce is the same variable for the component so when it gets re-applied after the debounce happens it will then cause this effect
Expected Behavior
The component shouldn't overwrite text because its safe to assume there will probably be some kind of network delay and so it makes for a bad user experience.
So what im thinking was we need to create a separate variable to use for attributes like OnBlurAsync, OnValueChanged, debouce, etc and respect the component value without modifying it to keep the user experience feeling good.
Interactive render mode
Interactive Server (Interactive server-side rendering (interactive SSR) using Blazor Server)
Steps To Reproduce
all I did was download the source, and use clumsy to test it, as you saw in the video. I live in the united states, when I access blazor.zone I can see the bug appear too because of the network delay, its very noticeable.
Exceptions (if any)
No response
.NET Version
NET8.0
Anything else?
In AutoComplete.razor.cs:
Added a _currentUserInput variable to track what the user is typing
Added an _isFiltering flag to track when filtering operations are in progress
Modified OnParametersSet() to initialize _currentUserInput with the current value
Updated OnClickItem() to set both _currentUserInput and CurrentValue
Modified TriggerFilter() to track the user input and properly handle UI updates
Added an override for FormatValueAsString() to prioritize the user's input during filtering
In AutoComplete.razor.js:
Added tracking for the current user input with ac.currentUserInput
Added an input event listener to track what the user is typing in real-time
Modified the debounced keyup handler to prevent overwriting user input
Added input event cleanup in the dispose function
Enhanced the filter callback to maintain the user's current input
This solution addresses a issue with autocomplete components where the user input gets overwritten during asynchronous filtering operations.
I've testing with adding a async delay in onblurasync/OnvalueChanged to simulate a heavy method and adding network delay and everything was working as expected, to be completely honest it could always use more testing, but I haven't seen problems.
Could you let us know what problem you encountered
I initially thought I could use the same variable for both the UI and the backend but I realized logistically that isn't possible, we can't know if what the server has is the most current value because we dont know if the user is typing as we confirm the latest value. so if there is a 1 second delay and we have the latest value, we dont know if the user typed a character .5 seconds later, so if we overwrite what the component has then we cause the bug, its safer to not do anything but then attributes like OnValueChanged wont work.
why you changed it this way
we have to separate concerns so that we dont have the earlier mentioned logistical problem
whether there is a better solution
Not that I can think of.
whether this change will affect other components
It shouldn't, the only 2 files changed are files specific to AutoComplete and should not be used in other components