fix(AutoComplete): network delay causes input lag (#5555)

* 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.

* update

switched SpinLock to SemaphoreSlim

* re-design

This should work better under bad network conditions

* refactor: 增加 DropdownMenu 组件

* refactor: 更新下拉框组件

* refactor: 重构代码封装 AutoCompleteItem 组件

* chore: bump version 9.4.9-beta01

* revert: 移除更改

* revert: 重构代码

* revert: 撤销更改

* doc: 更新注释

---------

Co-authored-by: Argo Zhang <[email protected]>

Author: celadaris

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.4.8</Version>
+    <Version>9.4.9-beta01</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor

@@ -16,7 +16,12 @@
            placeholder="@PlaceHolder" disabled="@Disabled" @ref="FocusElement"/>
     <span class="form-select-append"><i class="@Icon"></i></span>
     <span class="form-select-append ac-loading"><i class="@LoadingIcon"></i></span>
-    <ul class="dropdown-menu">
+    <RenderTemplate ChildContent="RenderItems"></RenderTemplate>
+</div>
+
+@code {
+    RenderFragment RenderDropdown =>
+    @<ul class="dropdown-menu">
         @foreach (var item in Rows)
         {
             <li @key="item" class="dropdown-item" @onclick="() => OnClickItem(item)">
@@ -34,5 +39,5 @@
         {
             <li class="dropdown-item">@NoDataTip</li>
         }
-    </ul>
-</div>
+    </ul>;
+}

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

@@ -89,6 +89,9 @@ public partial class AutoComplete
 
     private List<string>? _filterItems;
 
+    [NotNull]
+    private AutoCompleteItems? _dropdown = default;
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -114,12 +117,21 @@ protected override void OnParametersSet()
         Items ??= [];
     }
 
+    private bool _render = true;
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <returns></returns>
+    protected override bool ShouldRender() => _render;
+
     /// <summary>
     /// Callback method when a candidate item is clicked
     /// </summary>
     private async Task OnClickItem(string val)
     {
         CurrentValue = val;
+
         if (OnSelectedItemChanged != null)
         {
             await OnSelectedItemChanged(val);
@@ -135,9 +147,6 @@ private async Task OnClickItem(string val)
     [JSInvokable]
     public override async Task TriggerFilter(string val)
     {
-        // Store the current input value to prevent it from being overwritten
-        var currentInputValue = val;
-
         if (OnCustomFilter != null)
         {
             var items = await OnCustomFilter(val);
@@ -161,14 +170,7 @@ public override async Task TriggerFilter(string val)
             _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)
-        {
-            StateHasChanged();
-        }
+        await TriggerChange(val);
     }
 
     /// <summary>
@@ -178,16 +180,22 @@ 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
-        if (CurrentValue != val)
+        _render = false;
+        CurrentValue = val;
+        if (!ValueChanged.HasDelegate)
         {
-            CurrentValue = val;
-            if (!ValueChanged.HasDelegate)
-            {
-                StateHasChanged();
-            }
+            StateHasChanged();
         }
+        _render = true;
+        _dropdown.RenderContent();
         return Task.CompletedTask;
     }
+
+    private RenderFragment RenderItems => builder =>
+    {
+        builder.OpenComponent<AutoCompleteItems>(0);
+        builder.AddAttribute(10, "ChildContent", RenderDropdown);
+        builder.AddComponentReferenceCapture(20, dropdown => _dropdown = (AutoCompleteItems)dropdown);
+        builder.CloseComponent();
+    };
 }

src/BootstrapBlazor/Components/AutoComplete/AutoCompleteItems.cs

@@ -0,0 +1,60 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
+
+using Microsoft.AspNetCore.Components.Rendering;
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// AutoCompleteItems component
+/// </summary>
+class AutoCompleteItems : IComponent
+{
+    /// <summary>
+    /// Gets or sets the child content
+    /// </summary>
+    [Parameter, NotNull]
+    public RenderFragment? ChildContent { get; set; }
+
+    private RenderHandle _renderHandle;
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <param name="renderHandle"></param>
+    public void Attach(RenderHandle renderHandle)
+    {
+        _renderHandle = renderHandle;
+    }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <param name="parameters"></param>
+    /// <returns></returns>
+    public Task SetParametersAsync(ParameterView parameters)
+    {
+        parameters.SetParameterProperties(this);
+
+        RenderContent();
+        return Task.CompletedTask;
+    }
+    /// <summary>
+    /// Render method
+    /// </summary>
+    public void RenderContent()
+    {
+        _renderHandle.Render(BuildRenderTree);
+    }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <param name="builder"></param>
+    private void BuildRenderTree(RenderTreeBuilder builder)
+    {
+        builder.AddContent(0, ChildContent);
+    }
+}