refactor(AutoComplete): redesign blur logic (#5499)

* refactor: 重构销毁方法位置

* refactor: 增加 triggerBlur 方法

* refactor: 增加 menu 点击事件

Author: ArgoZhang

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

@@ -33,12 +33,16 @@ export function init(id, invoke) {
         })
     }
 
-    EventHandler.on(input, 'blur', e => {
+    ac.triggerBlur = () => {
         el.classList.remove('show');
         const triggerBlur = input.getAttribute('data-bb-blur') === 'true';
         if (triggerBlur) {
             invoke.invokeMethodAsync('TriggerBlur');
         }
+    }
+
+    EventHandler.on(menu, 'click', '.dropdown-item', e => {
+        ac.triggerBlur();
     });
 
     EventHandler.on(input, 'focus', e => {
@@ -81,7 +85,11 @@ export function init(id, invoke) {
 
             const el = a.querySelector('[data-bs-toggle="bb.dropdown"]');
             if (el === null) {
-                a.classList.remove('show');
+                const id = a.getAttribute('id');
+                const d = Data.get(id);
+                if (d) {
+                    d.triggerBlur();
+                }
             }
         });
     }
@@ -99,7 +107,7 @@ const handlerKeyup = (ac, e) => {
             const current = menu.querySelector('.active');
             if (current !== null) {
                 current.click();
-                input.blur();
+                ac.triggerBlur();
             }
             invoke.invokeMethodAsync('EnterCallback', input.value);
         }
@@ -108,7 +116,7 @@ const handlerKeyup = (ac, e) => {
         const skipEsc = el.getAttribute('data-bb-skip-esc') === 'true';
         if (skipEsc === false) {
             invoke.invokeMethodAsync('EscCallback');
-            input.blur();
+            ac.triggerBlur();
         }
     }
     else if (key === 'ArrowUp' || key === 'ArrowDown') {
@@ -149,7 +157,7 @@ export function dispose(id) {
     Data.remove(id)
 
     if (ac) {
-        const { popover, input } = ac;
+        const { popover, input, menu } = ac;
         if (popover) {
             Popover.dispose(popover)
             if (input) {
@@ -158,14 +166,14 @@ export function dispose(id) {
         }
         EventHandler.off(input, 'change');
         EventHandler.off(input, 'keyup');
-        EventHandler.off(input, 'blur');
+        EventHandler.off(menu, 'click');
         Input.dispose(input);
-    }
 
-    const { AutoComplete } = window.BootstrapBlazor;
-    AutoComplete.dispose(id, () => {
-        EventHandler.off(document, 'click', ac.closePopover);
-    });
+        const { AutoComplete } = window.BootstrapBlazor;
+        AutoComplete.dispose(id, () => {
+            EventHandler.off(document, 'click', ac.closePopover);
+        });
+    }
 }
 
 const scrollIntoView = (el, item) => {