fix(AutoComplete): network delay causes input lag

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(argo@live.ca) 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);
+    }
+}