update

After testing live, i could still see problems, less when using OnBlurAsync but it was more noticeable in OnValueChanged.

These changes address the core issue where the input text was being overwritten by stale data from older asynchronous operations. The dual approach (both C# and JavaScript checks) provides protection against race conditions. Even if one side fails, the other will catch it.

Author: celadaris

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);
     });