fix(Select): add composition support (#4847)

* refactor: 复用搜索栏

* refactor: 更改搜索回调未客户端

* fix: 修复汉字导致搜索高频触发问题

Author: ArgoZhang

src/BootstrapBlazor/Components/Select/Select.razor

@@ -31,15 +31,15 @@
             <span class="@ClearClassString" @onclick="OnClearValue"><i class="@ClearIcon"></i></span>
         }
         <div class="dropdown-menu">
+            @if (ShowSearch)
+            {
+                <div class="@SearchClassString">
+                    <input type="text" class="search-text form-control" autocomplete="off" value="@SearchText" aria-label="Search">
+                    <i class="@SearchIconString"></i>
+                </div>
+            }
             @if (IsVirtualize)
             {
-                @if (ShowSearch)
-                {
-                    <div class="@SearchClassString">
-                        <input type="text" class="search-text form-control" autocomplete="off" value="@SearchText" @oninput="EventCallback.Factory.CreateBinder<string>(this, async v => await SearchTextChanged(v), SearchText)" aria-label="Search">
-                        <i class="@SearchIconString"></i>
-                    </div>
-                }
                 <div class="dropdown-virtual">
                     @if (OnQueryAsync == null)
                     {
@@ -53,13 +53,6 @@
             }
             else
             {
-                @if (ShowSearch)
-                {
-                    <div class="@SearchClassString">
-                        <input type="text" class="search-text form-control" autocomplete="off" value="@SearchText" @oninput="EventCallback.Factory.CreateBinder<string>(this, async v => await SearchTextChanged(v), SearchText)" aria-label="Search">
-                        <i class="@SearchIconString"></i>
-                    </div>
-                }
                 @foreach (var itemGroup in Rows.GroupBy(i => i.GroupName))
                 {
                     if (!string.IsNullOrEmpty(itemGroup.Key))

src/BootstrapBlazor/Components/Select/Select.razor.cs

@@ -354,9 +354,8 @@ private async ValueTask<ItemsProviderResult<SelectedItem>> LoadItems(ItemsProvid
 
     private async Task SearchTextChanged(string val)
     {
-        SearchText = val;
         _itemsCache = null;
-
+        SearchText = val;
         if (OnQueryAsync != null)
         {
             // 通过 ItemProvider 提供数据
@@ -399,7 +398,7 @@ private bool TryParseSelectItem(string value, [MaybeNullWhen(false)] out TValue
     /// <inheritdoc/>
     /// </summary>
     /// <returns></returns>
-    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, nameof(ConfirmSelectedItem));
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, new { ConfirmMethodCallback = nameof(ConfirmSelectedItem), SearchMethodCallback = nameof(TriggerOnSearch) });
 
     /// <summary>
     /// 客户端回车回调方法
@@ -416,6 +415,18 @@ public async Task ConfirmSelectedItem(int index)
         }
     }
 
+    /// <summary>
+    /// 客户端搜索栏回调方法
+    /// </summary>
+    /// <param name="searchText"></param>
+    /// <returns></returns>
+    [JSInvokable]
+    public async Task TriggerOnSearch(string searchText)
+    {
+        await SearchTextChanged(searchText);
+        StateHasChanged();
+    }
+
     /// <summary>
     /// 下拉框选项点击时调用此方法
     /// </summary>

src/BootstrapBlazor/Components/Select/Select.razor.js

@@ -1,11 +1,11 @@
-import { getHeight, getInnerHeight, getTransitionDelayDurationFromElement } from "../../modules/utility.js"
+import { debounce, getHeight, getInnerHeight, getTransitionDelayDurationFromElement } from "../../modules/utility.js"
 import Data from "../../modules/data.js"
 import EventHandler from "../../modules/event-handler.js"
 import Popover from "../../modules/base-popover.js"
 
-export function init(id, invoke, method) {
+export function init(id, invoke, options) {
     const el = document.getElementById(id)
-
+    const { confirmMethodCallback, searchMethodCallback } = options;
     if (el == null) {
         return
     }
@@ -64,7 +64,7 @@ export function init(id, invoke, method) {
                 if (e.key === "Enter") {
                     popover.toggleMenu.classList.remove('show')
                     let index = indexOf(el, activeItem)
-                    invoke.invokeMethodAsync(method, index)
+                    invoke.invokeMethodAsync(confirmMethodCallback, index)
                 }
             }
         }
@@ -77,7 +77,27 @@ export function init(id, invoke, method) {
         el,
         popover
     }
-    Data.set(id, select)
+    Data.set(id, select);
+
+    const onSearch = debounce(v => invoke.invokeMethodAsync(searchMethodCallback, v));
+    let isComposing = false;
+
+    EventHandler.on(el, 'input', '.search-text', e => {
+        if (isComposing) {
+            return;
+        }
+
+        onSearch(e.delegateTarget.value);
+    });
+
+    EventHandler.on(el, 'compositionstart', '.search-text', e => {
+        isComposing = true;
+    });
+
+    EventHandler.on(el, 'compositionend', '.search-text', e => {
+        isComposing = false;
+        onSearch(e.delegateTarget.value);
+    });
 }
 
 export function show(id) {
@@ -108,7 +128,10 @@ export function dispose(id) {
 
     if (select) {
         EventHandler.off(select.el, 'shown.bs.dropdown')
-        EventHandler.off(select.el, 'keydown')
+        EventHandler.off(select.el, 'keydown');
+        EventHandler.off(select.el, 'input');
+        EventHandler.off(select.el, 'compositionstart');
+        EventHandler.off(select.el, 'compositionend')
         Popover.dispose(select.popover)
     }
 }