fix(AutoComplete): network delay causes input lag

src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor.cs

@@ -128,16 +128,30 @@ private async Task OnClickItem(string val)
 
     private List<string> Rows => _filterItems ?? [.. Items];
 
+    // In AutoComplete.razor.cs, add a tracking variable:
+    private string _userCurrentInput = string.Empty;
+    private SpinLock _spinLock = new SpinLock(false); // false for non-tracking mode
+
     /// <summary>
     /// TriggerFilter method
     /// </summary>
     /// <param name="val"></param>
     [JSInvokable]
     public override async Task TriggerFilter(string val)
     {
-        // Store the current input value to prevent it from being overwritten
-        var currentInputValue = val;
-
+        // Update the current input with SpinLock protection
+        bool lockTaken = false;
+        try
+        {
+            _spinLock.Enter(ref lockTaken);
+            _userCurrentInput = val;
+        }
+        finally
+        {
+            if (lockTaken) _spinLock.Exit();
+        }
+
+        // Process filtering
         if (OnCustomFilter != null)
         {
             var items = await OnCustomFilter(val);
@@ -155,19 +169,34 @@ public override async Task TriggerFilter(string val)
                 : Items.Where(s => s.StartsWith(val, comparison));
             _filterItems = [.. items];
         }
-
+    
         if (DisplayCount != null)
         {
             _filterItems = [.. _filterItems.Take(DisplayCount.Value)];
         }
-
-        // Use currentInputValue here instead of potentially stale val
-        CurrentValue = currentInputValue;
-
-        // Only trigger StateHasChanged if no binding is present
-        if (!ValueChanged.HasDelegate)
+
+        // Check if still the latest input with SpinLock protection
+        string latestInput;
+        lockTaken = false;
+        try
         {
-            StateHasChanged();
+            _spinLock.Enter(ref lockTaken);
+            latestInput = _userCurrentInput;
+        }
+        finally
+        {
+            if (lockTaken) _spinLock.Exit();
+        }
+
+        // Only update CurrentValue if this is still the latest input
+        if (latestInput == val)
+        {
+            CurrentValue = val;
+
+            if (!ValueChanged.HasDelegate)
+            {
+                StateHasChanged();
+            }
         }
     }
 

src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor.js

@@ -63,8 +63,12 @@ export function init(id, invoke) {
         filterDuration = 200;
     }
     const filterCallback = debounce(async v => {
-        await invoke.invokeMethodAsync('TriggerFilter', v);
-        el.classList.remove('is-loading');
+        // Check if the input value is still the same
+        // If not, this is an old operation that should be ignored
+        if (input.dataset.lastValue === v) {
+            await invoke.invokeMethodAsync('TriggerFilter', v);
+            el.classList.remove('is-loading');
+        }
     }, filterDuration);
 
     Input.composition(input, v => {
@@ -73,6 +77,12 @@ export function init(id, invoke) {
         }
 
         el.classList.add('is-loading');
+
+        // Store the current input value on the element
+        // This helps track the latest user input
+        input.dataset.lastValue = v;
+
+        // Modify the filterCallback to check if the input value has changed
         filterCallback(v);
     });