fix(Search): network delay causes input lag (#5576)

* refactor: 提炼 BootstrapBlazorRender 组件

* refactor: 适配网络卡顿

* refactor: 移除 BootstrapBlazorRender 组件使用 RenderTemplate 代替

* refactor: 代码格式化

* doc: 增加 Clear 处理逻辑

* chore: bump version 9.4.9-beta02

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Pages/Coms.razor

@@ -4,7 +4,8 @@
 <div class="coms-search">
     <div class="row">
         <div class="col-12">
-            <Search @bind-Value="@SearchText" PlaceHolder="@Localizer["Search"]" OnSearch="@OnSearch" ShowClearButton="true"></Search>
+            <Search @bind-Value="@SearchText" PlaceHolder="@Localizer["Search"]"
+                    OnSearch="@OnSearch" OnClear="OnClear" ShowClearButton="true"></Search>
         </div>
     </div>
     <div class="coms-search-filter">

src/BootstrapBlazor.Server/Components/Pages/Coms.razor.cs

@@ -19,4 +19,11 @@ public sealed partial class Coms
         SearchText = searchText;
         return Task.FromResult<IEnumerable<string?>>(ComponentItems.Where(i => i.Contains(searchText, StringComparison.OrdinalIgnoreCase)).ToList());
     }
+
+    private Task OnClear(string searchText)
+    {
+        SearchText = "";
+        StateHasChanged();
+        return Task.CompletedTask;
+    }
 }

src/BootstrapBlazor/BootstrapBlazor.csproj

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

src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor

@@ -16,7 +16,9 @@
            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>
-    <RenderTemplate ChildContent="RenderItems"></RenderTemplate>
+    <RenderTemplate @ref="_dropdown">
+        @RenderDropdown
+    </RenderTemplate>
 </div>
 
 @code {

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

@@ -90,7 +90,7 @@ public partial class AutoComplete
     private List<string>? _filterItems;
 
     [NotNull]
-    private AutoCompleteItems? _dropdown = default;
+    private RenderTemplate? _dropdown = default;
 
     /// <summary>
     /// <inheritdoc/>
@@ -187,15 +187,7 @@ public override Task TriggerChange(string val)
             StateHasChanged();
         }
         _render = true;
-        _dropdown.RenderContent();
+        _dropdown.Render();
         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

@@ -6,18 +6,18 @@
 namespace BootstrapBlazor.Components;
 
 /// <summary>
-/// RenderTemplate 组件
+/// RenderTemplate component
 /// </summary>
 public partial class RenderTemplate
 {
     /// <summary>
-    /// 获得/设置 子组件
+    /// Gets or sets the child component
     /// </summary>
     [Parameter]
     public RenderFragment? ChildContent { get; set; }
 
     /// <summary>
-    /// 获得/设置 首次加载回调委托
+    /// Gets or sets the callback delegate for the first load
     /// </summary>
     [Parameter]
     public Func<bool, Task>? OnRenderAsync { get; set; }
@@ -36,4 +36,12 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             await OnRenderAsync(firstRender);
         }
     }
+
+    /// <summary>
+    /// Render method
+    /// </summary>
+    public void Render()
+    {
+        StateHasChanged();
+    }
 }

src/BootstrapBlazor/Components/BaseComponents/RenderTemplate.razor.cs

@@ -55,7 +55,14 @@
             <Button Color="SearchButtonColor" Text="@SearchButtonText" Icon="@ButtonIcon" OnClick="OnSearchClick" aria-label="Search"></Button>
         }
     </div>
-    <ul class="dropdown-menu">
+    <RenderTemplate @ref="_dropdown">
+        @RenderDropdown
+    </RenderTemplate>
+</div>
+
+@code {
+    RenderFragment RenderDropdown =>
+    @<ul class="dropdown-menu">
         @foreach (var item in _filterItems)
         {
             <li class="dropdown-item" @onclick="() => OnClickItem(item)">
@@ -73,5 +80,5 @@
         {
             <li class="dropdown-item">@NoDataTip</li>
         }
-    </ul>
-</div>
+    </ul>;
+}

src/BootstrapBlazor/Components/Search/Search.razor

@@ -171,6 +171,9 @@ public partial class Search<TValue>
 
     private SearchContext<TValue> _context = default!;
 
+    [NotNull]
+    private RenderTemplate? _dropdown = default;
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -205,6 +208,14 @@ protected override void OnParametersSet()
         }
     }
 
+    private bool _render = true;
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <returns></returns>
+    protected override bool ShouldRender() => _render;
+
     private string _displayText = "";
     /// <summary>
     /// 点击搜索按钮时触发此方法
@@ -218,7 +229,7 @@ private async Task OnSearchClick()
             await Task.Yield();
 
             var items = await OnSearch(_displayText);
-            _filterItems = items.ToList();
+            _filterItems = [.. items];
             ButtonIcon = SearchButtonIcon;
             if (IsTriggerSearchByInput == false)
             {
@@ -280,11 +291,13 @@ private async Task OnClickItem(TValue val)
     [JSInvokable]
     public override async Task TriggerChange(string val)
     {
+        _render = false;
         _displayText = val;
-
         if (IsTriggerSearchByInput)
         {
             await OnSearchClick();
         }
+        _render = true;
+        _dropdown.Render();
     }
 }