fix(AutoComplete): missing value when click delete item (#5814)

* refactor: 精简代码

* refactor: 移除不使用的样式

* refactor: 增加注释

* refactor: 增加 DeleteCallback 方法

* refactor: 更改回调名称

* test: 更新单元测试

Author: ArgoZhang

src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor

@@ -5,13 +5,13 @@
 {
     <BootstrapLabel required="@Required" for="@InputId" ShowLabelTooltip="ShowLabelTooltip" Value="@DisplayText"/>
 }
-<div class="@ClassString" id="@Id">
+<div class="auto-complete" id="@Id">
     <input @attributes="AdditionalAttributes" id="@InputId" class="@ClassName" autocomplete="off" type="text"
            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-blur="@TriggerBlurString"
-           data-bb-scroll-behavior="@ScrollIntoViewBehaviorString"
+           data-bb-scroll-behavior="@ScrollIntoViewBehaviorString" data-bb-trigger-delete="true"
            value="@CurrentValueAsString"
            placeholder="@PlaceHolder" disabled="@Disabled" @ref="FocusElement"/>
     <span class="form-select-append"><i class="@Icon"></i></span>

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

@@ -12,12 +12,6 @@ namespace BootstrapBlazor.Components;
 /// </summary>
 public partial class AutoComplete
 {
-    /// <summary>
-    /// Gets the component style
-    /// </summary>
-    private string? ClassString => CssBuilder.Default("auto-complete")
-        .Build();
-
     /// <summary>
     /// Gets or sets the collection of matching data obtained by inputting a string
     /// </summary>
@@ -179,14 +173,26 @@ public override async Task TriggerFilter(string val)
     [JSInvokable]
     public override Task TriggerChange(string val)
     {
+        // client input does not need to be re-rendered to prevent jitter when the network is congested 
         _render = false;
+        CurrentValue = val;
+        _render = true;
+        _dropdown.Render();
+        return Task.CompletedTask;
+    }
+
+    /// <summary>
+    /// TriggerChange method
+    /// </summary>
+    /// <param name="val"></param>
+    [JSInvokable]
+    public Task TriggerDeleteCallback(string val)
+    {
         CurrentValue = val;
         if (!ValueChanged.HasDelegate)
         {
             StateHasChanged();
         }
-        _render = true;
-        _dropdown.Render();
         return Task.CompletedTask;
     }
 }

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

@@ -157,6 +157,11 @@ const handlerKeyup = (ac, e) => {
         current.classList.add('active');
         scrollIntoView(el, current);
     }
+    else if (key === 'Backspace' || key === 'Delete') {
+        if (input.getAttribute('data-bb-trigger-delete') === 'true') {
+            invoke.invokeMethodAsync('TriggerDeleteCallback', input.value);
+        }
+    }
 }
 
 export function showList(id) {

test/UnitTest/Components/AutoCompleteTest.cs

@@ -3,21 +3,21 @@
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
 
-using Microsoft.AspNetCore.Components.Web;
-
 namespace UnitTest.Components;
 
 public class AutoCompleteTest : BootstrapBlazorTestBase
 {
     [Fact]
-    public void Items_Ok()
+    public async Task Items_Ok()
     {
         var cut = Context.RenderComponent<AutoComplete>(pb =>
         {
             pb.Add(a => a.IsSelectAllTextOnFocus, true);
             pb.Add(a => a.IsSelectAllTextOnEnter, true);
         });
         Assert.Contains("<div class=\"auto-complete\"", cut.Markup);
+        Assert.Contains("data-bb-trigger-delete=\"true\"", cut.Markup);
+
         var menus = cut.FindAll(".dropdown-item");
         Assert.Single(menus);
 
@@ -35,6 +35,9 @@ public void Items_Ok()
         });
         menus = cut.FindAll(".dropdown-item");
         Assert.Equal(2, menus.Count);
+
+        await cut.InvokeAsync(() => cut.Instance.TriggerDeleteCallback("Test"));
+        Assert.Equal("Test", cut.Instance.Value);
     }
 
     [Fact]