refactor(AutoComplete): update blur logic

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);
+        }
+    }
 }