feat(AutoFill): consistent with AutoComplete partial refresh of drop-down box (#5831)

* refactor: 增加防抖函数

* refactor: 增加双绑

* refactor: 增加双绑

* test: 更新单元测试

* test: 更新单元测试

* chore: bump version 9.5.7-beta01

* refactor: 重构代码

* refactor: 更新局部刷新逻辑

Author: ArgoZhang

src/BootstrapBlazor/BootstrapBlazor.csproj

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

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

@@ -62,14 +62,23 @@ export function init(id, invoke) {
         }
     });
 
-    Input.composition(input, async v => {
+    let filterDuration = duration;
+    if (filterDuration === 0) {
+        filterDuration = 200;
+    }
+    const filterCallback = debounce(async v => {
+        await invoke.invokeMethodAsync('TriggerFilter', v);
+        el.classList.remove('is-loading');
+    }, filterDuration);
+
+    Input.composition(input, v => {
         if (isPopover === false) {
             ac.show();
         }
 
         el.classList.add('is-loading');
-        await invoke.invokeMethodAsync('TriggerFilter', v);
-        el.classList.remove('is-loading');
+        filterCallback(v);
+
     });
 
     ac.show = () => {

src/BootstrapBlazor/Components/AutoFill/AutoFill.razor

@@ -14,15 +14,22 @@
            data-bb-auto-dropdown-focus="@ShowDropdownListOnFocusString" data-bb-debounce="@DurationString"
            data-bb-skip-esc="@SkipEscString" data-bb-skip-enter="@SkipEnterString"
            data-bb-scroll-behavior="@ScrollIntoViewBehaviorString"
-           value="@_displayText"
+           @bind="@_displayText"
            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>
     @if (GetClearable())
     {
         <span class="@ClearClassString" @onclick="OnClearValue"><i class="@ClearIcon"></i></span>
     }
-    <div class="dropdown-menu">
+    <RenderTemplate @ref="_dropdown">
+        @RenderDropdown
+    </RenderTemplate>
+</div>
+
+@code {
+    RenderFragment RenderDropdown =>
+    @<div class="dropdown-menu">
         @if (IsVirtualize)
         {
             <div class="dropdown-menu-body dropdown-virtual">
@@ -52,10 +59,8 @@
                 }
             </div>
         }
-    </div>
-</div>
+    </div>;
 
-@code {
     RenderFragment<TValue> RenderRow => item =>
     @<div @key="@item" class="dropdown-item" @onclick="() => OnClickItem(item)">
         @if (ItemTemplate != null)

src/BootstrapBlazor/Components/AutoFill/AutoFill.razor.cs

@@ -149,7 +149,10 @@ public partial class AutoFill<TValue>
     private List<TValue>? _filterItems;
 
     [NotNull]
-    private Virtualize<TValue>? _virtualizeElement = default;
+    private Virtualize<TValue>? _virtualizeElement = null;
+
+    [NotNull]
+    private RenderTemplate? _dropdown = null;
 
     /// <summary>
     /// Gets the clear icon class string.
@@ -181,13 +184,6 @@ protected override void OnParametersSet()
         Items ??= [];
     }
 
-    private bool _render = true;
-
-    /// <summary>
-    /// <inheritdoc/>
-    /// </summary>
-    /// <returns></returns>
-    protected override bool ShouldRender() => _render;
 
     private bool IsNullable() => !ValueType.IsValueType || NullableUnderlyingType != null;
 
@@ -239,10 +235,7 @@ private async Task OnClickItem(TValue val)
 
     private async ValueTask<ItemsProviderResult<TValue>> LoadItems(ItemsProviderRequest request)
     {
-        _render = false;
         var data = await OnQueryAsync(new() { StartIndex = request.StartIndex, Count = request.Count, SearchText = _searchText });
-        _render = true;
-
         var _totalCount = data.TotalCount;
         var items = data.Items ?? [];
         return new ItemsProviderResult<TValue>(items, _totalCount);
@@ -261,7 +254,7 @@ public override async Task TriggerFilter(string val)
         {
             _searchText = val;
             await _virtualizeElement.RefreshDataAsync();
-            StateHasChanged();
+            _dropdown.Render();
             return;
         }
 
@@ -276,29 +269,17 @@ public override async Task TriggerFilter(string val)
         }
         else
         {
-            var comparision = IgnoreCase ? StringComparison.OrdinalIgnoreCase : StringComparison.Ordinal;
+            var comparison = IgnoreCase ? StringComparison.OrdinalIgnoreCase : StringComparison.Ordinal;
             var items = IsLikeMatch
-                ? Items.Where(i => OnGetDisplayText?.Invoke(i)?.Contains(val, comparision) ?? false)
-                : Items.Where(i => OnGetDisplayText?.Invoke(i)?.StartsWith(val, comparision) ?? false);
+                ? Items.Where(i => OnGetDisplayText?.Invoke(i)?.Contains(val, comparison) ?? false)
+                : Items.Where(i => OnGetDisplayText?.Invoke(i)?.StartsWith(val, comparison) ?? false);
             _filterItems = [.. items];
         }
 
         if (!IsVirtualize && DisplayCount != null)
         {
             _filterItems = [.. _filterItems.Take(DisplayCount.Value)];
         }
-        StateHasChanged();
-    }
-
-    /// <summary>
-    /// Triggers the change method.
-    /// </summary>
-    /// <param name="val">The value to change to.</param>
-    [JSInvokable]
-    public Task TriggerChange(string val)
-    {
-        _displayText = val;
-        StateHasChanged();
-        return Task.CompletedTask;
+        _dropdown.Render();
     }
 }

src/BootstrapBlazor/Components/Search/Search.razor

@@ -29,7 +29,7 @@
                    data-bb-skip-esc="@SkipEscString" data-bb-skip-enter="@SkipEnterString" data-bb-blur="@TriggerBlurString"
                    data-bb-scroll-behavior="@ScrollIntoViewBehaviorString"
                    data-bb-input="@UseInputString"
-                   value="@_displayText"
+                   @bind="@_displayText"
                    placeholder="@PlaceHolder" disabled="@Disabled" @ref="FocusElement" />
             @if (IsClearable)
             {

src/BootstrapBlazor/Components/Search/Search.razor.cs

@@ -172,7 +172,7 @@ public partial class Search<TValue>
     private SearchContext<TValue> _context = default!;
 
     [NotNull]
-    private RenderTemplate? _dropdown = default;
+    private RenderTemplate? _dropdown = null;
 
     /// <summary>
     /// <inheritdoc/>
@@ -282,14 +282,7 @@ private async Task OnClickItem(TValue val)
     /// </summary>
     /// <param name="val"></param>
     [JSInvokable]
-    public override Task TriggerFilter(string val) => TriggerChange(val);
-
-    /// <summary>
-    /// TriggerOnChange 方法
-    /// </summary>
-    /// <param name="val"></param>
-    [JSInvokable]
-    public async Task TriggerChange(string val)
+    public override async Task TriggerFilter(string val)
     {
         _render = false;
         _displayText = val;

test/UnitTest/Components/AutoFillTest.cs

@@ -164,7 +164,7 @@ public async Task OnSelectedItemChanged_Ok()
     }
 
     [Fact]
-    public async Task OnGetDisplayText_Ok()
+    public void OnGetDisplayText_Ok()
     {
         var cut = Context.RenderComponent<AutoFill<Foo>>(pb =>
         {
@@ -174,18 +174,6 @@ public async Task OnGetDisplayText_Ok()
         });
         var input = cut.Find("input");
         Assert.Equal("张三 1000", input.Attributes["value"]?.Value);
-
-        cut.SetParametersAndRender(pb =>
-        {
-            pb.Add(a => a.OnGetDisplayText, null!);
-        });
-        await cut.InvokeAsync(() => cut.Instance.TriggerChange("t"));
-
-        cut.SetParametersAndRender(pb =>
-        {
-            pb.Add(a => a.IsLikeMatch, true);
-        });
-        await cut.InvokeAsync(() => cut.Instance.TriggerChange("t"));
     }
 
     [Fact]

test/UnitTest/Components/SearchTest.cs

@@ -53,10 +53,7 @@ public async Task OnGetDisplayText_Ok()
             });
             pb.Add(a => a.OnGetDisplayText, foo => foo?.Name);
         });
-
-        await cut.InvokeAsync(() => cut.Instance.TriggerChange("t"));
-        await Task.Delay(20);
-
+        await cut.InvokeAsync(() => cut.Instance.TriggerFilter("t"));
         Assert.Contains("test1", cut.Markup);
         Assert.Contains("test2", cut.Markup);
     }
@@ -143,7 +140,9 @@ public async Task OnSelectedItemChanged_Ok()
                 return items;
             });
         });
-        await cut.InvokeAsync(() => cut.Instance.TriggerChange("t"));
+
+        await cut.InvokeAsync(() => cut.Instance.TriggerFilter("t"));
+        await Task.Delay(20);
 
         var item = cut.Find(".dropdown-item");
         await cut.InvokeAsync(() => item.Click());