fix(AutoComplete): click event also trigger focus event (#4588)

* fix(AutoComplete): remove focus client event

* feat: 增加 triggerFocus 方法

* refactor: 精简代码

* refactor: 更改为私有变量

* test: 更新单元测试

Author: ArgoZhang

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

@@ -18,14 +18,14 @@ public partial class AutoComplete
     /// <summary>
     /// 获得/设置 当前下拉框是否显示
     /// </summary>
-    private bool IsShown { get; set; }
+    private bool _isShown;
 
     /// <summary>
     /// 获得 组件样式
     /// </summary>
     protected virtual string? ClassString => CssBuilder.Default("auto-complete")
         .AddClass("is-loading", IsLoading)
-        .AddClass("show", IsShown && !IsPopover)
+        .AddClass("show", _isShown && !IsPopover)
         .Build();
 
     /// <summary>
@@ -149,7 +149,7 @@ protected override void OnParametersSet()
     protected override async Task OnBlur()
     {
         CurrentSelectedItem = "";
-        IsShown = false;
+        _isShown = false;
 
         if (OnBlurAsync != null)
         {
@@ -185,7 +185,12 @@ protected virtual async Task OnFocus(FocusEventArgs args)
             else
             {
                 FilterItems = DisplayCount == null ? Items.ToList() : Items.Take(DisplayCount.Value).ToList();
-                IsShown = true;
+                _isShown = true;
+
+                if (IsPopover)
+                {
+                    await InvokeVoidAsync("triggerFocus", Id);
+                }
             }
         }
     }
@@ -217,7 +222,7 @@ public virtual async Task OnKeyUp(string key)
             IsLoading = false;
         }
 
-        IsShown = true;
+        _isShown = true;
 
         var source = FilterItems;
         if (source.Count > 0)

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

@@ -14,9 +14,6 @@ export function init(id, invoke) {
 
     if (el.querySelector('[data-bs-toggle="bb.dropdown"]')) {
         ac.popover = Popover.init(el, { toggleClass: '[data-bs-toggle="bb.dropdown"]' });
-        EventHandler.on(input, 'focus', e => {
-            input.click();
-        });
     }
 
     // debounce
@@ -71,6 +68,11 @@ export function composition(id) {
     }
 }
 
+export function triggerFocus(id) {
+    const ac = Data.get(id)
+    ac.popover?.show();
+}
+
 export function dispose(id) {
     const ac = Data.get(id)
     Data.remove(id)

test/UnitTest/Components/AutoCompleteTest.cs

@@ -4,6 +4,7 @@
 // Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
 
 using Microsoft.AspNetCore.Components.Web;
+using System.Reflection;
 
 namespace UnitTest.Components;
 
@@ -179,7 +180,7 @@ public void Enter_Test()
     }
 
     [Fact]
-    public void ShowDropdownListOnFocus_Ok()
+    public async Task ShowDropdownListOnFocus_Ok()
     {
         IEnumerable<string> items = new List<string>() { "test1", "test2" };
         var cut = Context.RenderComponent<AutoComplete>(pb =>
@@ -189,26 +190,20 @@ public void ShowDropdownListOnFocus_Ok()
         });
 
         // 获得焦点时不会自动弹出下拉框
-        cut.InvokeAsync(() =>
-        {
-            var input = cut.Find("input");
-            input.FocusAsync(new FocusEventArgs());
-            var menu = cut.Find("ul");
-            Assert.Equal("dropdown-menu", menu.ClassList.ToString());
-        });
+        var input = cut.Find("input");
+        await cut.InvokeAsync(() => input.FocusAsync(new FocusEventArgs()));
+        var menu = cut.Find("ul");
+        Assert.Equal("dropdown-menu", menu.ClassList.ToString());
 
         // 获得焦点时自动弹出下拉框
         cut.SetParametersAndRender(pb =>
         {
             pb.Add(a => a.ShowDropdownListOnFocus, true);
         });
-        cut.InvokeAsync(() =>
-        {
-            var input = cut.Find("input");
-            input.FocusAsync(new FocusEventArgs());
-            var menu = cut.Find("ul");
-            Assert.Equal("dropdown-menu show", menu.ClassList.ToString());
-        });
+        input = cut.Find("input");
+        await cut.InvokeAsync(() => input.FocusAsync(new FocusEventArgs()));
+        // IsShown = true
+        Assert.True(GetShownValue(cut.Instance));
 
         var filter = false;
         cut.SetParametersAndRender(pb =>
@@ -222,12 +217,25 @@ public void ShowDropdownListOnFocus_Ok()
         });
 
         // trigger focus
-        cut.InvokeAsync(() =>
+        input = cut.Find("input");
+        await cut.InvokeAsync(() => input.FocusAsync(new FocusEventArgs()));
+        Assert.True(filter);
+
+        cut.SetParametersAndRender(pb =>
         {
-            var input = cut.Find("input");
-            input.FocusAsync(new FocusEventArgs());
-            Assert.True(filter);
+            pb.Add(a => a.IsPopover, true);
+            pb.Add(a => a.OnFocusFilter, false);
         });
+        input = cut.Find("input");
+        await cut.InvokeAsync(() => input.FocusAsync(new FocusEventArgs()));
+        // IsShown = true
+        Assert.True(GetShownValue(cut.Instance));
+    }
+
+    private static bool GetShownValue(AutoComplete instance)
+    {
+        var fieldInfo = instance.GetType().GetField("_isShown", BindingFlags.NonPublic | BindingFlags.Instance);
+        return fieldInfo?.GetValue(instance) is true;
     }
 
     [Fact]