re-design

This should work better under bad network conditions

Author: celadaris

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

@@ -4,7 +4,6 @@
 // Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
 
 using Microsoft.Extensions.Localization;
-using System.Threading;
 
 namespace BootstrapBlazor.Components;
 
@@ -90,6 +89,16 @@ public partial class AutoComplete
 
     private List<string>? _filterItems;
 
+    /// <summary>
+    /// Tracks the current user input to prevent it from being overwritten
+    /// </summary>
+    private string _currentUserInput = string.Empty;
+
+    /// <summary>
+    /// Flag to track whether we're handling debounced filtering
+    /// </summary>
+    private bool _isFiltering = false;
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -113,14 +122,23 @@ protected override void OnParametersSet()
         LoadingIcon ??= IconTheme.GetIconByKey(ComponentIcons.LoadingIcon);
 
         Items ??= [];
+
+        // Initialize _currentUserInput with current value if it hasn't been set yet
+        if (string.IsNullOrEmpty(_currentUserInput) && !string.IsNullOrEmpty(CurrentValueAsString))
+        {
+            _currentUserInput = CurrentValueAsString;
+        }
     }
 
     /// <summary>
     /// Callback method when a candidate item is clicked
     /// </summary>
     private async Task OnClickItem(string val)
     {
+        // Update both the CurrentValue and _currentUserInput when an item is clicked
+        _currentUserInput = val;
         CurrentValue = val;
+
         if (OnSelectedItemChanged != null)
         {
             await OnSelectedItemChanged(val);
@@ -129,73 +147,53 @@ private async Task OnClickItem(string val)
 
     private List<string> Rows => _filterItems ?? [.. Items];
 
-    // Thread-safe tracking using SemaphoreSlim for async compatibility
-    private string _userCurrentInput = string.Empty;
-    private readonly SemaphoreSlim _semaphore = new SemaphoreSlim(1, 1);
-
     /// <summary>
     /// TriggerFilter method
     /// </summary>
     /// <param name="val"></param>
     [JSInvokable]
     public override async Task TriggerFilter(string val)
     {
-        // Thread-safe update using SemaphoreSlim
-        await _semaphore.WaitAsync();
         try
         {
-            _userCurrentInput = val;
-        }
-        finally
-        {
-            _semaphore.Release();
-        }
+            _isFiltering = true;
+            // Update our tracking variable
+            _currentUserInput = val;
 
-        // Process filtering
-        if (OnCustomFilter != null)
-        {
-            var items = await OnCustomFilter(val);
-            _filterItems = [.. items];
-        }
-        else if (string.IsNullOrEmpty(val))
-        {
-            _filterItems = [.. Items];
-        }
-        else
-        {
-            var comparison = IgnoreCase ? StringComparison.OrdinalIgnoreCase : StringComparison.Ordinal;
-            var items = IsLikeMatch
-                ? Items.Where(s => s.Contains(val, comparison))
-                : Items.Where(s => s.StartsWith(val, comparison));
-            _filterItems = [.. items];
-        }
+            // Filter items as usual
+            if (OnCustomFilter != null)
+            {
+                var items = await OnCustomFilter(val);
+                _filterItems = [.. items];
+            }
+            else if (string.IsNullOrEmpty(val))
+            {
+                _filterItems = [.. Items];
+            }
+            else
+            {
+                var comparison = IgnoreCase ? StringComparison.OrdinalIgnoreCase : StringComparison.Ordinal;
+                var items = IsLikeMatch
+                    ? Items.Where(s => s.Contains(val, comparison))
+                    : Items.Where(s => s.StartsWith(val, comparison));
+                _filterItems = [.. items];
+            }
 
-        if (DisplayCount != null)
-        {
-            _filterItems = [.. _filterItems.Take(DisplayCount.Value)];
-        }
+            if (DisplayCount != null)
+            {
+                _filterItems = [.. _filterItems.Take(DisplayCount.Value)];
+            }
 
-        // Thread-safe read using SemaphoreSlim
-        await _semaphore.WaitAsync();
-        string latestInput;
-        try
-        {
-            latestInput = _userCurrentInput;
+            // Update the bound value to match the user input, triggering proper value change notifications
+            // This ensures OnValueChanged is triggered while preventing visual disruption
+            CurrentValue = val;
+
+            // Refresh UI
+            StateHasChanged();
         }
         finally
         {
-            _semaphore.Release();
-        }
-
-        // Only update CurrentValue if this is still the latest input
-        if (latestInput == val)
-        {
-            CurrentValue = val;
-
-            if (!ValueChanged.HasDelegate)
-            {
-                StateHasChanged();
-            }
+            _isFiltering = false;
         }
     }
 
@@ -206,8 +204,10 @@ public override async Task TriggerFilter(string val)
     [JSInvokable]
     public override Task TriggerChange(string val)
     {
-        // Only update CurrentValue if the value has actually changed
-        // This prevents overwriting the user's input
+        // Update our tracking variable
+        _currentUserInput = val;
+
+        // Update component value and trigger change notifications
         if (CurrentValue != val)
         {
             CurrentValue = val;
@@ -218,4 +218,24 @@ public override Task TriggerChange(string val)
         }
         return Task.CompletedTask;
     }
+
+    /// <summary>
+    /// Override CurrentValueAsString to return the current user input
+    /// </summary>
+    protected override string? FormatValueAsString(string? value)
+    {
+        // During filtering operations, use what the user is actually typing
+        if (_isFiltering)
+        {
+            return _currentUserInput;
+        }
+
+        // In non-filtering scenarios, sync our tracked value with the component value
+        if (!string.IsNullOrEmpty(value) && _currentUserInput != value)
+        {
+            _currentUserInput = value;
+        }
+
+        return base.FormatValueAsString(value);
+    }
 }

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

@@ -17,18 +17,37 @@ export function init(id, invoke) {
         ac.popover = Popover.init(el, { toggleClass: '[data-bs-toggle="bb.dropdown"]' });
     }
 
+    // Track the current user input to prevent it from being overwritten
+    ac.currentUserInput = input.value;
+
+    // Save original input value
+    const updateCurrentInput = (e) => {
+        if (e && e.target) {
+            ac.currentUserInput = e.target.value;
+        }
+    };
+
+    // Add an input event listener to track user typing in real-time
+    EventHandler.on(input, 'input', updateCurrentInput);
+
     // debounce
     const duration = parseInt(input.getAttribute('data-bb-debounce') || '0');
     if (duration > 0) {
         ac.debounce = true
         EventHandler.on(input, 'keyup', debounce(e => {
+            // Don't let the debounce overwrite what the user is currently typing
+            if (input.value !== ac.currentUserInput) {
+                input.value = ac.currentUserInput;
+            }
             handlerKeyup(ac, e);
         }, duration, e => {
             return ['ArrowUp', 'ArrowDown', 'Escape', 'Enter', 'NumpadEnter'].indexOf(e.key) > -1
         }))
     }
     else {
         EventHandler.on(input, 'keyup', e => {
+            // Make sure we're using the most current input value
+            updateCurrentInput(e);
             handlerKeyup(ac, e);
         })
     }
@@ -55,6 +74,7 @@ export function init(id, invoke) {
     });
 
     EventHandler.on(input, 'change', e => {
+        updateCurrentInput(e);
         invoke.invokeMethodAsync('TriggerChange', e.target.value);
     });
 
@@ -63,26 +83,29 @@ export function init(id, invoke) {
         filterDuration = 200;
     }
     const filterCallback = debounce(async v => {
-        // 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');
+        // Keep track of what was filtered vs what might be currently typed
+        const currentTypedValue = input.value;
+
+        await invoke.invokeMethodAsync('TriggerFilter', v);
+
+        // Only reset input value if the user hasn't typed something new
+        // during the async operation
+        if (input.value === v) {
+            input.value = ac.currentUserInput;
         }
+
+        el.classList.remove('is-loading');
     }, filterDuration);
 
     Input.composition(input, v => {
+        // Update our tracked input value
+        ac.currentUserInput = v;
+
         if (isPopover === false) {
             el.classList.add('show');
         }
 
         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);
     });
 
@@ -176,6 +199,7 @@ export function dispose(id) {
         }
         EventHandler.off(input, 'change');
         EventHandler.off(input, 'keyup');
+        EventHandler.off(input, 'input'); // Remove the input event listener we added
         EventHandler.off(menu, 'click');
         Input.dispose(input);