refactor: 移除 dropdown-item 点击逻辑

Author: ArgoZhang

src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor

@@ -12,7 +12,6 @@
            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"
            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>
@@ -27,7 +26,7 @@
         <div class="dropdown-menu-body">
             @foreach (var item in Rows)
             {
-                <div @key="item" class="dropdown-item" @onclick="() => OnClickItem(item)">
+                <div @key="item" class="dropdown-item" data-bb-val="@item">
                     @if (ItemTemplate == null)
                     {
                         <div>@item</div>

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

@@ -119,24 +119,37 @@ protected override void OnParametersSet()
         LoadingIcon ??= IconTheme.GetIconByKey(ComponentIcons.LoadingIcon);
     }
 
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <returns></returns>
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, Value);
+
     /// <summary>
     /// Callback method when a candidate item is clicked
     /// </summary>
-    private async Task OnClickItem(string val)
+    [JSInvokable]
+    public async Task TriggerClick(int index)
     {
-        CurrentValue = val;
+        if (index < 0 || index >= Rows.Count)
+        {
+            return;
+        }
+
+        var item = Rows[index];
+        CurrentValueAsString = item;
 
         if (OnSelectedItemChanged != null)
         {
-            await OnSelectedItemChanged(val);
+            await OnSelectedItemChanged(Value);
         }
 
         if (OnBlurAsync != null)
         {
             await OnBlurAsync(Value);
         }
 
-        await TriggerFilter(val);
+        await TriggerFilter(Value);
     }
 
     private List<string> Rows => _filterItems ?? [.. Items];

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

@@ -5,13 +5,15 @@ import EventHandler from "../../modules/event-handler.js"
 import Input from "../../modules/input.js"
 import Popover from "../../modules/base-popover.js"
 
-export function init(id, invoke) {
+export function init(id, invoke, value) {
     const el = document.getElementById(id)
     const menu = el.querySelector('.dropdown-menu')
     const input = document.getElementById(`${id}_input`)
     const ac = { el, invoke, menu, input }
     Data.set(id, ac)
 
+    input.value = value;
+
     const isPopover = input.getAttribute('data-bs-toggle') === 'bb.dropdown';
     if (isPopover) {
         ac.popover = Popover.init(el, { toggleClass: '[data-bs-toggle="bb.dropdown"]' });
@@ -50,7 +52,14 @@ export function init(id, invoke) {
     }
 
     EventHandler.on(menu, 'click', '.dropdown-item', e => {
+        const item = e.delegateTarget;
+        const val = item.getAttribute('data-bb-val');
+        input.value = val;
         ac.close();
+
+        const items = [...item.parentElement.children];
+        const index = items.indexOf(item);
+        invoke.invokeMethodAsync('TriggerClick', index);
     });
 
     EventHandler.on(input, 'focus', e => {
@@ -78,7 +87,6 @@ export function init(id, invoke) {
 
         el.classList.add('is-loading');
         filterCallback(v);
-
     });
 
     ac.show = () => {

src/BootstrapBlazor/Components/AutoComplete/PopoverCompleteBase.cs

@@ -158,12 +158,6 @@ protected override void OnParametersSet()
         Offset ??= "[0, 6]";
     }
 
-    /// <summary>
-    /// <inheritdoc/>
-    /// </summary>
-    /// <returns></returns>
-    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop);
-
     /// <summary>
     /// 触发 OnBlur 回调方法 由 Javascript 触发
     /// </summary>