fix(AutoComplete): support bind value clear value function (#6936)

* refactor: 增加 Clear 方法用于触发双向绑定

* doc: 更新示例

* test: 增加单元测试

Author: ArgoZhang

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

@@ -37,7 +37,7 @@
     <section ignore>@((MarkupString)Localizer["ShowLabelDescription"].Value)</section>
     <Divider Text="@Localizer["Divider1Text"]" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
     <ValidateForm Model="@Model">
-        <AutoComplete Items="@StaticItems" @bind-Value="@Model.Name" ShowLabel="true" />
+        <AutoComplete Items="@StaticItems" @bind-Value="@Model.Name" ShowLabel="true" IsClearable="true" />
     </ValidateForm>
     <Divider Text="@Localizer["Divider2Text"]" Alignment="Alignment.Left" style="margin: 2rem 0;" />
     <AutoComplete Items="@StaticItems" @bind-Value="@Model.Name" ShowLabel="false" />

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

@@ -192,6 +192,19 @@ private async Task OnClickItem(string val)
 
     private List<string> Rows => _filterItems ?? [.. Items];
 
+    /// <summary>
+    /// 点击清空按钮时调用此方法 由 Javascript 触发
+    /// </summary>
+    /// <returns></returns>
+    [JSInvokable]
+    public async Task TriggerClear()
+    {
+        await TriggerFilter("");
+
+        _clientValue = null;
+        CurrentValueAsString = string.Empty;
+    }
+
     /// <summary>
     /// TriggerFilter method
     /// </summary>
@@ -228,12 +241,10 @@ public async Task TriggerFilter(string val)
     /// <param name="v"></param>
     /// <returns></returns>
     [JSInvokable]
-    public Task TriggerChange(string v)
+    public void TriggerChange(string v)
     {
         _clientValue = v;
         CurrentValueAsString = v;
-
-        return Task.CompletedTask;
     }
 
     private List<string> GetFilterItemsByValue(string val)

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

@@ -143,7 +143,7 @@ export function init(id, invoke, value, changedEventCallback) {
 
     EventHandler.on(el, 'click', '.clear-icon', e => {
         input.value = '';
-        invoke.invokeMethodAsync('TriggerFilter', '');
+        invoke.invokeMethodAsync('TriggerClear');
     });
 }
 

test/UnitTest/Components/AutoCompleteTest.cs

@@ -196,6 +196,27 @@ public async Task IgnoreCase_Ok()
         Assert.Equal(2, menus.Count);
     }
 
+    [Fact]
+    public async Task TriggerClear_Ok()
+    {
+        var val = "task1";
+        var items = new List<string>() { "task1", "Task2" };
+        var cut = Context.RenderComponent<AutoComplete>(builder =>
+        {
+            builder.Add(a => a.Items, items);
+            builder.Add(a => a.IgnoreCase, false);
+            builder.Add(a => a.Value, val);
+            builder.Add(a => a.IsClearable, true);
+            builder.Add(a => a.ValueChanged, EventCallback.Factory.Create<string?>(this, v =>
+            {
+                val = v;
+            }));
+        });
+
+        await cut.InvokeAsync(cut.Instance.TriggerClear);
+        Assert.Empty(val);
+    }
+
     [Fact]
     public async Task DisplayCount_Ok()
     {