feat(AutoComplete): use javascript update input value (#6709)

* refactor: 移除 dropdown-item 点击逻辑

* test: 更新单元测试

* feat: 增加无数据处理逻辑

* Revert "feat: 增加无数据处理逻辑"

This reverts commit b2cbd76.

* Revert "test: 更新单元测试"

This reverts commit 057ad97.

* Revert "refactor: 移除 dropdown-item 点击逻辑"

This reverts commit d62cbe5.

* refactor: 增加客户端设置值逻辑

* refactor: 更新清空逻辑

* refactor: 更新赋值逻辑

* test: 更新单元测试

* refactor: 更新 Search 组件

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>

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

@@ -119,6 +119,12 @@ 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>
@@ -137,6 +143,9 @@ private async Task OnClickItem(string val)
         }
 
         await TriggerFilter(val);
+
+        // 使用脚本更新 input 值
+        await InvokeVoidAsync("setValue", Id, val);
     }
 
     private List<string> Rows => _filterItems ?? [.. Items];

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

@@ -175,6 +175,14 @@ const handlerKeyup = (ac, e) => {
     }
 }
 
+export function setValue(id, value) {
+    const ac = Data.get(id)
+    const { input } = ac;
+    if (input) {
+        input.value = value;
+    }
+}
+
 export function dispose(id) {
     const ac = Data.get(id)
     Data.remove(id)

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>

src/BootstrapBlazor/Components/AutoFill/AutoFill.razor

@@ -14,7 +14,6 @@
            data-bb-auto-dropdown-focus="@ShowDropdownListOnFocusString" data-bb-debounce="@DurationString"
            data-bb-skip-esc="@SkipEscString" data-bb-skip-enter="@SkipEnterString"
            data-bb-scroll-behavior="@ScrollIntoViewBehaviorString"
-           @bind="@_displayText"
            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/AutoFill/AutoFill.razor.cs

@@ -184,6 +184,12 @@ protected override void OnParametersSet()
         Items ??= [];
     }
 
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <returns></returns>
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, _displayText);
+
 
     private bool IsNullable() => !ValueType.IsValueType || NullableUnderlyingType != null;
 
@@ -199,6 +205,9 @@ protected override void OnParametersSet()
     /// <returns></returns>
     private async Task OnClearValue()
     {
+        // 使用脚本更新 input 值
+        await InvokeVoidAsync("setValue", Id, "");
+
         if (OnClearAsync != null)
         {
             await OnClearAsync();
@@ -223,6 +232,9 @@ private async Task OnClickItem(TValue val)
         CurrentValue = val;
         _displayText = GetDisplayText(val);
 
+        // 使用脚本更新 input 值
+        await InvokeVoidAsync("setValue", Id, _displayText);
+
         if (OnSelectedItemChanged != null)
         {
             await OnSelectedItemChanged(val);

src/BootstrapBlazor/Components/Search/Search.razor

@@ -29,7 +29,6 @@
                    data-bb-skip-esc="@SkipEscString" data-bb-skip-enter="@SkipEnterString" data-bb-blur="@TriggerBlurString"
                    data-bb-scroll-behavior="@ScrollIntoViewBehaviorString"
                    data-bb-input="@UseInputString"
-                   @bind="@_displayText"
                    placeholder="@PlaceHolder" disabled="@Disabled" @ref="FocusElement" />
             @if (IsClearable)
             {

src/BootstrapBlazor/Components/Search/Search.razor.cs

@@ -209,6 +209,12 @@ protected override void OnParametersSet()
         }
     }
 
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <returns></returns>
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, _displayText);
+
     private string? _displayText;
     private async Task OnSearchClick()
     {
@@ -229,6 +235,9 @@ private async Task OnSearchClick()
 
     private async Task OnClearClick()
     {
+        // 使用脚本更新 input 值
+        await InvokeVoidAsync("setValue", Id, "");
+
         _displayText = null;
         if (OnClear != null)
         {
@@ -252,6 +261,9 @@ private async Task OnClickItem(TValue val)
         CurrentValue = val;
         _displayText = GetDisplayText(val);
 
+        // 使用脚本更新 input 值
+        await InvokeVoidAsync("setValue", Id, _displayText);
+
         if (OnSelectedItemChanged != null)
         {
             await OnSelectedItemChanged(val);

test/UnitTest/Components/AutoFillTest.cs

@@ -194,7 +194,7 @@ public void OnGetDisplayText_Ok()
             pb.Add(a => a.OnGetDisplayText, foo => foo?.Name);
         });
         var input = cut.Find("input");
-        Assert.Equal("张三 1000", input.Attributes["value"]?.Value);
+        Assert.Null(input.Attributes["value"]?.Value);
     }
 
     [Fact]