refactor(AutoComplete): redesign value change logic (#5130)

* doc: 增加本地化

* doc: 增加验证方法示例代码

* feat: 增加 TriggerChange 方法

* test: 更新单元测试

* doc: 更新示例

* chore: bump version 9.2.8-beta04

* chore: bump version 9.2.8-beta05

Co-Authored-By: celadaris <[email protected]>

---------

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

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/AutoCompletes.razor

@@ -8,7 +8,7 @@
 <DemoBlock Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]" Name="Normal">
     <section ignore>@Localizer["NormalDescription"]</section>
     <div style="width: 200px;">
-        <AutoComplete Items="@StaticItems" IsSelectAllTextOnFocus="true" />
+        <AutoComplete Items="@StaticItems" IsSelectAllTextOnFocus="true" Value="@Value"></AutoComplete>
     </div>
 </DemoBlock>
 

src/BootstrapBlazor.Server/Components/Samples/AutoCompletes.razor.cs

@@ -18,6 +18,8 @@ public sealed partial class AutoCompletes
 
     private IEnumerable<string> Items => _items;
 
+    private string Value { get; set; } = "";
+
     private Task OnValueChanged(string val)
     {
         _items.Clear();

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.2.8-beta03</Version>
+    <Version>9.2.8-beta04</Version>
   </PropertyGroup>
 
   <ItemGroup>

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

@@ -133,11 +133,11 @@ private async Task OnClickItem(string val)
     private List<string> Rows => FilterItems ?? Items.ToList();
 
     /// <summary>
-    /// TriggerOnChange 方法
+    /// TriggerFilter 方法
     /// </summary>
     /// <param name="val"></param>
     [JSInvokable]
-    public async Task TriggerOnChange(string val)
+    public async Task TriggerFilter(string val)
     {
         if (OnCustomFilter != null)
         {
@@ -161,11 +161,21 @@ public async Task TriggerOnChange(string val)
         {
             FilterItems = FilterItems.Take(DisplayCount.Value).ToList();
         }
+        StateHasChanged();
+    }
 
+    /// <summary>
+    /// TriggerChange 方法
+    /// </summary>
+    /// <param name="val"></param>
+    [JSInvokable]
+    public Task TriggerChange(string val)
+    {
         CurrentValue = val;
         if (!ValueChanged.HasDelegate)
         {
             StateHasChanged();
         }
+        return Task.CompletedTask;
     }
 }

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

@@ -54,14 +54,18 @@ export function init(id, invoke) {
         delete el.triggerEnter;
     });
 
+    EventHandler.on(input, 'change', e => {
+        invoke.invokeMethodAsync('TriggerChange', e.target.value);
+    });
+
     Input.composition(input, async v => {
         const useInput = input.getAttribute('data-bb-input') !== 'false';
         if (isPopover === false && useInput) {
             el.classList.add('show');
         }
 
         el.classList.add('is-loading');
-        await invoke.invokeMethodAsync('TriggerOnChange', v);
+        await invoke.invokeMethodAsync('TriggerFilter', v);
         el.classList.remove('is-loading');
     });
 

test/UnitTest/Components/AutoCompleteTest.cs

@@ -53,7 +53,7 @@ public async Task OnCustomFilter_Test()
             builder.Add(a => a.OnCustomFilter, _ => Task.FromResult<IEnumerable<string>>(["test2", "test3", "test4"]));
         });
 
-        await cut.InvokeAsync(() => cut.Instance.TriggerOnChange("t"));
+        await cut.InvokeAsync(() => cut.Instance.TriggerFilter("t"));
         var menus = cut.FindAll(".dropdown-item");
         Assert.Equal(3, menus.Count);
     }
@@ -68,7 +68,7 @@ public async Task IsLikeMatch_Test()
         });
 
         // 正常匹配 无结果显示 NoDataTip
-        await cut.InvokeAsync(() => cut.Instance.TriggerOnChange("a"));
+        await cut.InvokeAsync(() => cut.Instance.TriggerFilter("a"));
         var menus = cut.FindAll(".dropdown-item");
         Assert.Single(menus);
 
@@ -77,15 +77,15 @@ public async Task IsLikeMatch_Test()
         {
             pb.Add(a => a.IsLikeMatch, true);
         });
-        await cut.InvokeAsync(() => cut.Instance.TriggerOnChange("as"));
+        await cut.InvokeAsync(() => cut.Instance.TriggerFilter("as"));
         menus = cut.FindAll(".dropdown-item");
         Assert.Equal(2, menus.Count);
 
-        await cut.InvokeAsync(() => cut.Instance.TriggerOnChange("k1"));
+        await cut.InvokeAsync(() => cut.Instance.TriggerFilter("k1"));
         menus = cut.FindAll(".dropdown-item");
         Assert.Single(menus);
 
-        await cut.InvokeAsync(() => cut.Instance.TriggerOnChange(""));
+        await cut.InvokeAsync(() => cut.Instance.TriggerFilter(""));
         menus = cut.FindAll(".dropdown-item");
         Assert.Equal(2, menus.Count);
     }
@@ -101,7 +101,7 @@ public async Task IgnoreCase_Ok()
         });
 
         // 大小写敏感
-        await cut.InvokeAsync(() => cut.Instance.TriggerOnChange("t"));
+        await cut.InvokeAsync(() => cut.Instance.TriggerFilter("t"));
         var menus = cut.FindAll(".dropdown-item");
         Assert.Single(menus);
 
@@ -110,7 +110,7 @@ public async Task IgnoreCase_Ok()
         {
             pb.Add(a => a.IgnoreCase, true);
         });
-        await cut.InvokeAsync(() => cut.Instance.TriggerOnChange("t"));
+        await cut.InvokeAsync(() => cut.Instance.TriggerFilter("t"));
         menus = cut.FindAll(".dropdown-item");
         Assert.Equal(2, menus.Count);
     }
@@ -125,7 +125,7 @@ public async Task DisplayCount_Ok()
             builder.Add(a => a.DisplayCount, 2);
         });
 
-        await cut.InvokeAsync(() => cut.Instance.TriggerOnChange("t"));
+        await cut.InvokeAsync(() => cut.Instance.TriggerFilter("t"));
         var menus = cut.FindAll(".dropdown-item");
         Assert.Equal(2, menus.Count);
     }
@@ -140,7 +140,7 @@ public async Task OnCustomFilter_Ok()
             pb.Add(a => a.OnCustomFilter, _ => Task.FromResult<IEnumerable<string>>(["test3", "test4", "test5"]));
         });
 
-        await cut.InvokeAsync(() => cut.Instance.TriggerOnChange("t"));
+        await cut.InvokeAsync(() => cut.Instance.TriggerFilter("t"));
         var menus = cut.FindAll(".dropdown-item");
         Assert.Equal(3, menus.Count);
     }
@@ -210,7 +210,7 @@ public async Task ValidateForm_Ok()
 
         // Trigger js invoke
         var comp = cut.FindComponent<AutoComplete>().Instance;
-        await cut.InvokeAsync(() => comp.TriggerOnChange("v"));
+        await cut.InvokeAsync(() => comp.TriggerChange("v"));
 
         Assert.Equal("v", comp.Value);
     }