refactor: 重新设计下拉菜单显示逻辑

Author: ArgoZhang

src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor

@@ -6,7 +6,11 @@
     <BootstrapLabel required="@Required" for="@InputId" ShowLabelTooltip="ShowLabelTooltip" Value="@DisplayText" />
 }
 <div class="@ClassString" id="@Id">
-    <input @attributes="AdditionalAttributes" id="@InputId" class="@ClassName" autocomplete="off" type="text" data-bs-toggle="@ToggleString" data-bs-placement="@PlacementString" data-bs-offset="@OffsetString" data-bs-custom-class="@CustomClassString" placeholder="@PlaceHolder" disabled="@Disabled" data-bb-debounce="@DurationString" @bind-value="@CurrentValueAsString" @bind-value:event="oninput" @onblur="OnBlur" @onfocus="OnFocus" @ref="FocusElement" />
+    <input @attributes="AdditionalAttributes" id="@InputId" class="@ClassName" autocomplete="off" type="text"
+           data-bs-toggle="@ToggleString" data-bs-placement="@PlacementString" data-bb-debounce="@DurationString"
+           data-bs-offset="@OffsetString" data-bs-custom-class="@CustomClassString"
+           data-bb-auto-dropdown-focus="@ShowDropdownListOnFocusString"
+           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>
     <ul class="dropdown-menu">

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

@@ -3,7 +3,6 @@
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
 
-using Microsoft.AspNetCore.Components.Web;
 using Microsoft.Extensions.Localization;
 
 namespace BootstrapBlazor.Components;
@@ -13,19 +12,10 @@ namespace BootstrapBlazor.Components;
 /// </summary>
 public partial class AutoComplete
 {
-    private bool IsLoading { get; set; }
-
-    /// <summary>
-    /// 获得/设置 当前下拉框是否显示
-    /// </summary>
-    private bool _isShown;
-
     /// <summary>
     /// 获得 组件样式
     /// </summary>
     protected virtual string? ClassString => CssBuilder.Default("auto-complete")
-        .AddClass("is-loading", IsLoading)
-        .AddClass("show", _isShown && !IsPopover)
         .Build();
 
     /// <summary>
@@ -143,20 +133,6 @@ protected override void OnParametersSet()
         LoadingIcon ??= IconTheme.GetIconByKey(ComponentIcons.LoadingIcon);
     }
 
-    /// <summary>
-    /// <inheritdoc/>
-    /// </summary>
-    protected override async Task OnBlur()
-    {
-        CurrentSelectedItem = "";
-        _isShown = false;
-
-        if (OnBlurAsync != null)
-        {
-            await OnBlurAsync(Value);
-        }
-    }
-
     /// <summary>
     /// 鼠标点击候选项时回调此方法
     /// </summary>
@@ -169,32 +145,6 @@ protected virtual async Task OnClickItem(string val)
         }
     }
 
-    /// <summary>
-    /// OnFocus 方法
-    /// </summary>
-    /// <param name="args"></param>
-    /// <returns></returns>
-    protected virtual async Task OnFocus(FocusEventArgs args)
-    {
-        if (ShowDropdownListOnFocus)
-        {
-            if (OnFocusFilter)
-            {
-                await OnKeyUp("");
-            }
-            else
-            {
-                FilterItems = DisplayCount == null ? Items.ToList() : Items.Take(DisplayCount.Value).ToList();
-                _isShown = true;
-
-                if (IsPopover)
-                {
-                    await InvokeVoidAsync("triggerFocus", Id);
-                }
-            }
-        }
-    }
-
     /// <summary>
     /// OnKeyUp 方法
     /// </summary>
@@ -203,27 +153,6 @@ protected virtual async Task OnFocus(FocusEventArgs args)
     [JSInvokable]
     public virtual async Task OnKeyUp(string key)
     {
-        if (!IsLoading)
-        {
-            IsLoading = true;
-            if (OnCustomFilter != null)
-            {
-                var items = await OnCustomFilter(CurrentValueAsString);
-                FilterItems = items.ToList();
-            }
-            else
-            {
-                var comparison = IgnoreCase ? StringComparison.OrdinalIgnoreCase : StringComparison.Ordinal;
-                var items = IsLikeMatch ?
-                    Items.Where(s => s.Contains(CurrentValueAsString, comparison)) :
-                    Items.Where(s => s.StartsWith(CurrentValueAsString, comparison));
-                FilterItems = DisplayCount == null ? items.ToList() : items.Take(DisplayCount.Value).ToList();
-            }
-            IsLoading = false;
-        }
-
-        _isShown = true;
-
         var source = FilterItems;
         if (source.Count > 0)
         {
@@ -290,8 +219,44 @@ public virtual async Task OnKeyUp(string key)
     /// </summary>
     /// <param name="val"></param>
     [JSInvokable]
-    public void TriggerOnChange(string val)
+    public async Task TriggerOnChange(string val)
+    {
+        if (OnCustomFilter != null)
+        {
+            var items = await OnCustomFilter(val);
+            FilterItems = items.ToList();
+        }
+        else
+        {
+            var comparison = IgnoreCase ? StringComparison.OrdinalIgnoreCase : StringComparison.Ordinal;
+            var items = IsLikeMatch
+                ? Items.Where(s => s.Contains(val, comparison))
+                : Items.Where(s => s.StartsWith(val, comparison));
+            FilterItems = items.ToList();
+        }
+
+        if (DisplayCount != null)
+        {
+            FilterItems = FilterItems.Take(DisplayCount.Value).ToList();
+        }
+
+        CurrentValue = val;
+        if (!ValueChanged.HasDelegate)
+        {
+            StateHasChanged();
+        }
+    }
+
+    /// <summary>
+    /// 出发 OnBlur 回调方法 由 Javascript 触发
+    /// </summary>
+    /// <returns></returns>
+    [JSInvokable]
+    public async Task TriggerBlur()
     {
-        CurrentValueAsString = val;
+        if (OnBlurAsync != null)
+        {
+            await OnBlurAsync(Value);
+        }
     }
 }

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

@@ -32,11 +32,26 @@ export function init(id, invoke) {
         })
     }
 
+    EventHandler.on(input, 'focus', e => {
+        const showDropdownOnFocus = input.getAttribute('data-bb-auto-dropdown-focus') === 'true';
+        if (showDropdownOnFocus) {
+            if (ac.popover === void 0) {
+                el.classList.add('show');
+            }
+        }
+    });
+
+    EventHandler.on(input, 'blur', e => {
+        el.classList.remove('show');
+        invoke.invokeMethodAsync('TriggerBlur');
+    });
+
     Input.composition(input, async v => {
         el.classList.add('is-loading');
+        el.classList.add('show');
         await invoke.invokeMethodAsync('TriggerOnChange', v);
         el.classList.remove('is-loading');
-    })
+    });
 }
 
 export function autoScroll(id, index) {