refactor(AutoComplete): update blur logic (#5838)

* refactor: update blur event callback

* refactor: 更新脚本

* test: 更新单元测试

* refactor: 增加 Blur 支持

* test: 增加单元测试

Author: ArgoZhang

src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor

@@ -12,7 +12,7 @@
            data-bb-auto-dropdown-focus="@ShowDropdownListOnFocusString" data-bb-debounce="@DurationString"
            data-bb-skip-esc="@SkipEscString" data-bb-skip-enter="@SkipEnterString" data-bb-blur="@TriggerBlurString"
            data-bb-scroll-behavior="@ScrollIntoViewBehaviorString" data-bb-trigger-delete="true"
-           @bind="@CurrentValueAsString" @onblur="@OnBlur"
+           @bind="@CurrentValueAsString"
            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>

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

@@ -130,6 +130,11 @@ private async Task OnClickItem(string val)
         {
             await OnSelectedItemChanged(val);
         }
+
+        if (OnBlurAsync != null)
+        {
+            await OnBlurAsync(Value);
+        }
     }
 
     private List<string> Rows => _filterItems ?? [.. Items];

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

@@ -9,7 +9,7 @@ export function init(id, invoke) {
     const el = document.getElementById(id)
     const menu = el.querySelector('.dropdown-menu')
     const input = document.getElementById(`${id}_input`)
-    const ac = { el, invoke, menu }
+    const ac = { el, invoke, menu, input }
     Data.set(id, ac)
 
     const isPopover = input.getAttribute('data-bs-toggle') === 'bb.dropdown';
@@ -102,24 +102,36 @@ export function init(id, invoke) {
                 const d = Data.get(id);
                 if (d) {
                     d.close();
+                    d.blur();
                 }
             }
         });
     }
-    ac.blur = e => {
+
+    ac.keyup = e => {
         if (e.key === 'Tab') {
             [...document.querySelectorAll('.auto-complete.show')].forEach(a => {
                 const id = a.getAttribute('id');
                 const d = Data.get(id);
                 if (d) {
                     d.close();
+                    d.blur();
                 }
             });
         }
     }
+
+    ac.blur = function () {
+        const { input, invoke } = this;
+        const triggerBlur = input.getAttribute('data-bb-blur') === 'true';
+        if (triggerBlur) {
+            invoke.invokeMethodAsync('TriggerBlur');
+        }
+    }
+
     registerBootstrapBlazorModule('AutoComplete', id, () => {
         EventHandler.on(document, 'click', ac.closePopover);
-        EventHandler.on(document, 'keyup', ac.blur);
+        EventHandler.on(document, 'keyup', ac.keyup);
     });
 }
 
@@ -183,7 +195,7 @@ export function dispose(id) {
     const { AutoComplete } = window.BootstrapBlazor;
     AutoComplete.dispose(id, () => {
         EventHandler.off(document, 'click', ac.closePopover);
-        EventHandler.off(document, 'keyup', ac.blur);
+        EventHandler.off(document, 'keyup', ac.keyup);
     });
 }
 

src/BootstrapBlazor/Components/AutoComplete/PopoverCompleteBase.cs

@@ -163,4 +163,16 @@ protected override void OnParametersSet()
     /// </summary>
     /// <returns></returns>
     protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop);
+
+    /// <summary>
+    /// 触发 OnBlur 回调方法 由 Javascript 触发
+    /// </summary>
+    [JSInvokable]
+    public async Task TriggerBlur()
+    {
+        if (OnBlurAsync != null)
+        {
+            await OnBlurAsync(Value);
+        }
+    }
 }

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

@@ -227,6 +227,11 @@ private async Task OnClickItem(TValue val)
         {
             await OnSelectedItemChanged(val);
         }
+
+        if (OnBlurAsync != null)
+        {
+            await OnBlurAsync(Value);
+        }
     }
 
     private string? GetDisplayText(TValue item) => OnGetDisplayText?.Invoke(item) ?? item?.ToString();

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

@@ -169,7 +169,8 @@ public partial class Search<TValue>
     [NotNull]
     private List<TValue>? _filterItems = null;
 
-    private SearchContext<TValue> _context = default!;
+    [NotNull]
+    private SearchContext<TValue>? _context = null;
 
     [NotNull]
     private RenderTemplate? _dropdown = null;
@@ -267,6 +268,11 @@ private async Task OnClickItem(TValue val)
         {
             await OnSelectedItemChanged(val);
         }
+
+        if (OnBlurAsync != null)
+        {
+            await OnBlurAsync(Value);
+        }
     }
 
     /// <summary>

test/UnitTest/Components/AutoCompleteTest.cs

@@ -258,16 +258,18 @@ public async Task OnBlurAsync_Ok()
         var cut = Context.RenderComponent<AutoComplete>(pb =>
         {
             pb.Add(a => a.Items, items);
-            pb.Add(a => a.Value, "test1");
+            pb.Add(a => a.Value, "test2");
             pb.Add(a => a.OnBlurAsync, v =>
             {
                 val = v;
                 return Task.CompletedTask;
             });
         });
-        var input = cut.Find(".form-control");
-        await cut.InvokeAsync(() => input.Blur());
-        Assert.Equal("test1", val);
+        await cut.InvokeAsync(() => cut.Instance.TriggerBlur());
+        Assert.Equal("test2", val);
+
+        var item = cut.Find(".dropdown-item");
+        await cut.InvokeAsync(() => item.Click());
     }
 
     [Fact]

test/UnitTest/Components/AutoFillTest.cs

@@ -69,6 +69,27 @@ public void ItemTemplate_Ok()
         Assert.Contains("Template-test2", cut.Markup);
     }
 
+    [Fact]
+    public async Task OnBlurAsync_Ok()
+    {
+        Foo? val = null;
+        var items = new List<Foo>() { new() { Name = "test1" }, new() { Name = "test2" } };
+        var cut = Context.RenderComponent<AutoFill<Foo>>(pb =>
+        {
+            pb.Add(a => a.Items, items);
+            pb.Add(a => a.OnBlurAsync, v =>
+            {
+                val = v;
+                return Task.CompletedTask;
+            });
+        });
+
+        var item = cut.Find(".dropdown-item");
+        await cut.InvokeAsync(() => item.Click());
+        Assert.NotNull(val);
+        Assert.Equal("test1", val.Name);
+    }
+
     [Fact]
     public async Task OnCustomFilter_Ok()
     {

test/UnitTest/Components/SearchTest.cs

@@ -7,6 +7,32 @@ namespace UnitTest.Components;
 
 public class SearchTest : BootstrapBlazorTestBase
 {
+    [Fact]
+    public async Task OnBlurAsync_Ok()
+    {
+        string? val = null;
+        var items = new List<string>() { "test1", "test2" };
+        var cut = Context.RenderComponent<Search<string>>(pb =>
+        {
+            pb.Add(a => a.OnSearch, v =>
+            {
+                return Task.FromResult(items.AsEnumerable());
+            });
+            pb.Add(a => a.OnBlurAsync, v =>
+            {
+                val = v;
+                return Task.CompletedTask;
+            });
+        });
+        await cut.InvokeAsync(() => cut.Instance.TriggerFilter("t"));
+        await Task.Delay(20);
+
+        var item = cut.Find(".dropdown-item");
+        await cut.InvokeAsync(() => item.Click());
+        Assert.NotNull(val);
+        Assert.Equal("test1", val);
+    }
+
     [Fact]
     public void Items_Ok()
     {