fix(AutoComplete): trigger onBlur when clicking outside (#5476)

* fix(AutoComplete): should trigger onBlur when click body

* chore: bump version 9.4.3-beta02

* perf: 优化性能

* refactor: Esc 优化性能

* refactor: 更新 blur 事件

* refactor: Search 组件更新

* refactor: 精简逻辑代码

* refactor: 移除 menu click 提高性能

Author: ArgoZhang

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.4.3-beta01</Version>
+    <Version>9.4.3-beta02</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor

@@ -10,7 +10,7 @@
            data-bs-toggle="@ToggleString" data-bs-placement="@PlacementString"
            data-bs-offset="@OffsetString" data-bs-custom-class="@CustomClassString"
            data-bb-auto-dropdown-focus="@ShowDropdownListOnFocusString" data-bb-debounce="@DurationString"
-           data-bb-skip-esc="@SkipEscString" data-bb-skip-enter="@SkipEnterString"
+           data-bb-skip-esc="@SkipEscString" data-bb-skip-enter="@SkipEnterString" data-bb-blur="@TriggerBlurString"
            data-bb-scroll-behavior="@ScrollIntoViewBehaviorString"
            value="@CurrentValueAsString"
            placeholder="@PlaceHolder" disabled="@Disabled" @ref="FocusElement"/>

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

@@ -37,6 +37,14 @@ export function init(id, invoke) {
         })
     }
 
+    EventHandler.on(input, 'blur', e => {
+        el.classList.remove('show');
+        const triggerBlur = input.getAttribute('data-bb-blur') === 'true';
+        if (triggerBlur) {
+            invoke.invokeMethodAsync('TriggerBlur');
+        }
+    });
+
     EventHandler.on(input, 'focus', e => {
         const showDropdownOnFocus = input.getAttribute('data-bb-auto-dropdown-focus') === 'true';
         if (showDropdownOnFocus) {
@@ -46,14 +54,6 @@ export function init(id, invoke) {
         }
     });
 
-    EventHandler.on(menu, 'click', e => {
-        el.classList.remove('show');
-        if (el.triggerEnter !== true) {
-            invoke.invokeMethodAsync('TriggerBlur');
-        }
-        delete el.triggerEnter;
-    });
-
     EventHandler.on(input, 'change', e => {
         invoke.invokeMethodAsync('TriggerChange', e.target.value);
     });
@@ -113,17 +113,17 @@ const handlerKeyup = (ac, e) => {
         if (!skipEnter) {
             const current = menu.querySelector('.active');
             if (current !== null) {
-                el.triggerEnter = true;
                 current.click();
+                input.blur();
             }
             invoke.invokeMethodAsync('EnterCallback', input.value);
         }
     }
     else if (key === 'Escape') {
         const skipEsc = el.getAttribute('data-bb-skip-esc') === 'true';
         if (skipEsc === false) {
-            EventHandler.trigger(menu, 'click');
             invoke.invokeMethodAsync('EscCallback');
+            input.blur();
         }
     }
     else if (key === 'ArrowUp' || key === 'ArrowDown') {
@@ -172,7 +172,7 @@ export function dispose(id) {
             }
         }
         EventHandler.off(input, 'keyup');
-        EventHandler.off(menu, 'click');
+        EventHandler.off(input, 'blur');
         Input.dispose(input);
     }
 }

src/BootstrapBlazor/Components/AutoComplete/PopoverCompleteBase.cs

@@ -101,6 +101,11 @@ public abstract class PopoverCompleteBase<TValue> : BootstrapInputBase<TValue>,
     /// </summary>
     protected string? SkipEnterString => SkipEnter ? "true" : null;
 
+    /// <summary>
+    /// 获得 是否跳过 Blur 处理字符串
+    /// </summary>
+    protected string? TriggerBlurString => OnBlurAsync != null ? "true" : null;
+
     /// <summary>
     /// 获得 滚动行为字符串
     /// </summary>

src/BootstrapBlazor/Components/Search/Search.razor

@@ -26,7 +26,7 @@
                    data-bs-toggle="@ToggleString" data-bs-placement="@PlacementString"
                    data-bs-offset="@OffsetString" data-bs-custom-class="@CustomClassString"
                    data-bb-auto-dropdown-focus="@ShowDropdownListOnFocusString" data-bb-debounce="@DurationString"
-                   data-bb-skip-esc="@SkipEscString" data-bb-skip-enter="@SkipEnterString"
+                   data-bb-skip-esc="@SkipEscString" data-bb-skip-enter="@SkipEnterString" data-bb-blur="@TriggerBlurString"
                    data-bb-scroll-behavior="@ScrollIntoViewBehaviorString"
                    data-bb-input="@UseInputString"
                    value="@_displayText"