feat(Table): use Enter/EscCallbck instead of keyup event (#7672)

* doc: 更新注释

* feat(Table): 增加 OnEnterAsync OnEscAsync 回调方法

* doc: 更新注释

* refactor: 复用代码

* refactor: 移除 OnSearchKeyUp 方法

* refactor: 移除冗余代码

* test: 更新单元测试

Author: ArgoZhang

src/BootstrapBlazor/Components/Table/Table.razor

@@ -197,16 +197,17 @@
                                 {
                                     <Tooltip Placement="Placement.Top" Title="@SearchTooltip" Sanitize="false" IsHtml="true">
                                         <BootstrapInput class="table-toolbar-search" placeholder="@SearchPlaceholderText"
-                                                        @onkeyup="OnSearchKeyUp" Value="@SearchText"
-                                                        OnValueChanged="OnSearchTextValueChanged"
+                                                        Value="@SearchText" SkipValidate="true"
+                                                        OnEnterAsync="OnEnterAsync" OnEscAsync="OnEscAsync"
                                                         ShowLabel="false" UseInputEvent="AutoSearchOnInput">
                                         </BootstrapInput>
                                     </Tooltip>
                                 }
                                 else
                                 {
                                     <BootstrapInput class="table-toolbar-search" placeholder="@SearchPlaceholderText"
-                                                    Value="@SearchText" OnValueChanged="OnSearchTextValueChanged"
+                                                    Value="@SearchText" SkipValidate="true"
+                                                    OnEnterAsync="OnEnterAsync" OnEscAsync="OnEscAsync"
                                                     ShowLabel="false" UseInputEvent="AutoSearchOnInput">
                                     </BootstrapInput>
                                 }
@@ -1049,18 +1050,18 @@
                         {
                             <Tooltip Placement="Placement.Top" Title="@SearchTooltip" Sanitize="false" IsHtml="true">
                                 <BootstrapInput class="table-toolbar-search" placeholder="@SearchPlaceholderText"
-                                                @onkeyup="OnSearchKeyUp" Value="@SearchText"
-                                                OnValueChanged="OnSearchTextValueChanged"
+                                                Value="@SearchText"
+                                                OnEnterAsync="OnEnterAsync" OnEscAsync="OnEscAsync"
                                                 ShowLabel="false" SkipValidate="true" UseInputEvent="AutoSearchOnInput">
                                 </BootstrapInput>
                             </Tooltip>
                         }
                         else
                         {
                             <BootstrapInput class="table-toolbar-search" placeholder="@SearchPlaceholderText"
-                                            @onkeyup="OnSearchKeyUp" Value="@SearchText"
-                                            OnValueChanged="OnSearchTextValueChanged"
-                                            SkipValidate="true" UseInputEvent="AutoSearchOnInput">
+                                            Value="@SearchText"
+                                            OnEnterAsync="OnEnterAsync" OnEscAsync="OnEscAsync"
+                                            ShowLabel="false" SkipValidate="true" UseInputEvent="AutoSearchOnInput">
                             </BootstrapInput>
                         }
                     }

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

@@ -3,7 +3,6 @@
 // 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.Web;
 using System.Reflection;
 
 namespace BootstrapBlazor.Components;
@@ -163,11 +162,22 @@ protected async Task ResetSearchClick()
             Utility.Reset(SearchModel, CreateSearchModel());
         }
 
-        PageIndex = 1;
-        await QueryAsync();
+        await SearchClick();
         await ToggleLoading(false);
     }
 
+    private async Task OnEnterAsync(string? v)
+    {
+        SearchText = v;
+        await SearchClick();
+    }
+
+    private async Task OnEscAsync(string? v)
+    {
+        SearchText = null;
+        await ResetSearchClick();
+    }
+
     /// <summary>
     /// <para lang="zh">查询方法</para>
     /// <para lang="en">Search Method</para>
@@ -304,28 +314,9 @@ protected List<IFilterAction> GetAdvanceSearches()
     /// </summary>
     protected List<IFilterAction> GetSearches() => Columns.Where(col => col.GetSearchable()).ToSearches(SearchText);
 
-    private async Task OnSearchTextValueChanged(string? value)
-    {
-        SearchText = value;
-
-        await SearchClick();
-    }
-
-    private async Task OnSearchKeyUp(KeyboardEventArgs args)
-    {
-        if (args.Key == "Enter")
-        {
-            await SearchClick();
-        }
-        else if (args.Key == "Escape")
-        {
-            await ClearSearchClick();
-        }
-    }
-
     /// <summary>
-    /// <para lang="zh">重置搜索按钮调用此方法</para>
-    /// <para lang="en">Reset Search Button Click Method</para>
+    /// <para lang="zh">点击重置搜索按钮时调用此方法</para>
+    /// <para lang="en">Method called when the reset search button is clicked</para>
     /// </summary>
     protected async Task ClearSearchClick()
     {

src/BootstrapBlazor/Components/Table/Table.razor.cs

@@ -18,8 +18,8 @@ namespace BootstrapBlazor.Components;
 public partial class Table<TItem> : ITable, IModelEqualityComparer<TItem> where TItem : class
 {
     /// <summary>
-    /// <para lang="zh">获得/设置 a value indicating 是否 automatic search functionality is enabled. 默认 value is false</para>
-    /// <para lang="en">Gets or sets a value indicating whether automatic search functionality is enabled. Default value is false</para>
+    /// <para lang="zh">获得/设置 模糊搜索栏输入时是否自动搜索 默认值 false</para>
+    /// <para lang="en">Gets or sets whether to auto search on fuzzy search bar input. Default false</para>
     /// </summary>
     [Parameter]
     public bool AutoSearchOnInput { get; set; }

test/UnitTest/Components/TableTest.cs

@@ -408,10 +408,10 @@ public async Task OnSearchKeyUp_Ok()
                 });
             });
         });
-        var searchBox = cut.Find(".table-toolbar-search");
-        await cut.InvokeAsync(() => searchBox.KeyUp(new KeyboardEventArgs() { Key = "Enter" }));
-        await cut.InvokeAsync(() => searchBox.KeyUp(new KeyboardEventArgs() { Key = "Escape" }));
-        await cut.InvokeAsync(() => searchBox.Change("0"));
+        var searchBox = cut.FindComponents<BootstrapInput<string?>>().FirstOrDefault(i => i.Markup.Contains("table-toolbar-search"));
+        Assert.NotNull(searchBox);
+        await cut.InvokeAsync(() => searchBox.Instance.EnterCallback());
+        await cut.InvokeAsync(() => searchBox.Instance.EscCallback());
         Assert.True(resetSearch);
     }