feat(AutoFill): add IsAutoClearWhenInvalid parameter (#6950)

* AutoFill组件变动

input输入Enter时，如候选项唯一，直接选中
当焦点从AutoFill移出时，如GetDisplayText(Value)对应的内容与input中的内容不符则清空Value和Input

* Modify Enter key handling in AutoComplete component

Signed-off-by: braia123 <[email protected]>

* refactor: 代码重构

* refactor: 移除 onblur 回调

* revert: 撤销清空逻辑

* revert: 撤销 js 方法

* refactor: TriggerBlurString 移动到组件内

* feat: 增加 IsAutoClearWhenInvalid 参数实现逻辑

* doc: 更新示例

* refactor: 更改方法为 TriggerChange

* test: 增加单元测试

* doc: 代码格式化

* chore: bump version 9.11.-3-beta04

---------

Signed-off-by: braia123 <[email protected]>
Co-authored-by: braia123 <[email protected]>
Co-authored-by: Argo Zhang <[email protected]>

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/AutoFills.razor

@@ -9,7 +9,7 @@
     <section ignore>
         @((MarkupString)@Localizer["NormalDesc"].Value)
     </section>
-    <AutoFill @bind-Value="Model1" Items="Items1"
+    <AutoFill @bind-Value="Model1" Items="Items1" IsAutoClearWhenInvalid="true"
               IsLikeMatch="true" OnGetDisplayText="OnGetDisplayText" IsSelectAllTextOnFocus="true">
         <ItemTemplate>
             <div class="d-flex">

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.11.3-beta03</Version>
+    <Version>9.11.3-beta04</Version>
   </PropertyGroup>
 
   <ItemGroup>

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

@@ -100,6 +100,8 @@ public partial class AutoComplete
         .AddClass($"text-danger", IsValid.HasValue && !IsValid.Value)
         .Build();
 
+    private string? TriggerBlurString => OnBlurAsync != null ? "true" : null;
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>

src/BootstrapBlazor/Components/AutoComplete/PopoverCompleteBase.cs

@@ -121,11 +121,6 @@ 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>
@@ -181,12 +176,20 @@ protected override void OnParametersSet()
         IsPopover |= BootstrapBlazorOptions.Value.IsPopover;
     }
 
+    /// <summary>
+    /// 触发 OnBlurAsync 回调前回调方法
+    /// </summary>
+    /// <returns></returns>
+    protected virtual Task OnBeforeBlurAsync() => Task.CompletedTask;
+
     /// <summary>
     /// 触发 OnBlur 回调方法 由 Javascript 触发
     /// </summary>
     [JSInvokable]
     public async Task TriggerBlur()
     {
+        await OnBeforeBlurAsync();
+
         if (OnBlurAsync != null)
         {
             await OnBlurAsync(Value);

src/BootstrapBlazor/Components/AutoFill/AutoFill.razor

@@ -12,7 +12,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"
            placeholder="@PlaceHolder" disabled="@Disabled" />
     <span class="form-select-append"><i class="@Icon"></i></span>

src/BootstrapBlazor/Components/AutoFill/AutoFill.razor.cs

@@ -119,12 +119,20 @@ public partial class AutoFill<TValue>
     [Parameter]
     public Func<Task>? OnClearAsync { get; set; }
 
+    /// <summary>
+    /// 获得/设置 输入框内容无效时是否自动清空内容 默认 false
+    /// </summary>
+    [Parameter]
+    public bool IsAutoClearWhenInvalid { get; set; }
+
     [Inject]
     [NotNull]
     private IStringLocalizer<AutoComplete>? Localizer { get; set; }
 
     private string? ShowDropdownListOnFocusString => ShowDropdownListOnFocus ? "true" : null;
 
+    private string? TriggerBlurString => (OnBlurAsync != null || IsAutoClearWhenInvalid) ? "true" : null;
+
     private string? _displayText;
 
     private List<TValue>? _filterItems;
@@ -175,7 +183,20 @@ protected override void OnParametersSet()
     /// <inheritdoc/>
     /// </summary>
     /// <returns></returns>
-    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, _displayText);
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, _displayText, nameof(TriggerChange));
+
+    private string _clientValue = "";
+
+    /// <summary>
+    /// 由客户端 JavaScript 触发
+    /// </summary>
+    /// <param name="v"></param>
+    /// <returns></returns>
+    [JSInvokable]
+    public void TriggerChange(string v)
+    {
+        _clientValue = v;
+    }
 
     private bool IsNullable() => !ValueType.IsValueType || NullableUnderlyingType != null;
 
@@ -275,4 +296,17 @@ public async Task TriggerFilter(string val)
         }
         _dropdown.Render();
     }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <returns></returns>
+    protected override async Task OnBeforeBlurAsync()
+    {
+        if (IsAutoClearWhenInvalid && GetDisplayText(Value) != _clientValue)
+        {
+            CurrentValue = default;
+            await InvokeVoidAsync("setValue", Id, "");
+        }
+    }
 }

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

@@ -142,6 +142,8 @@ public partial class Search<TValue>
     [NotNull]
     private IStringLocalizer<Search<TValue>>? Localizer { get; set; }
 
+    private string? TriggerBlurString => OnBlurAsync != null ? "true" : null;
+
     private string? ClassString => CssBuilder.Default("search auto-complete")
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();

test/UnitTest/Components/AutoFillTest.cs

@@ -513,6 +513,48 @@ await cut.InvokeAsync(() =>
         Assert.True(invalid);
     }
 
+    [Fact]
+    public async Task IsAutoClearWhenInvalid_Ok()
+    {
+        var model = new MockModel() { Value = new Foo() { Name = "Test-Select1" } };
+        var items = new List<Foo>()
+        {
+            new() { Name = "test1" },
+            new() { Name = "test2" }
+        };
+        var cut = Context.RenderComponent<AutoFill<Foo>>(pb =>
+        {
+            pb.Add(a => a.Items, items);
+            pb.Add(a => a.Value, model.Value);
+            pb.Add(a => a.IsAutoClearWhenInvalid, true);
+            pb.Add(a => a.OnGetDisplayText, f => f?.Name);
+        });
+        // 设置一个无效值
+        await cut.InvokeAsync(() => cut.Instance.TriggerChange("Invalid-Value"));
+
+        // 触发 OnBlur 回调
+        await cut.InvokeAsync(() => cut.Instance.TriggerBlur());
+
+        // 值应被清空
+        Assert.Null(cut.Instance.Value);
+
+        // 设定 IsAutoClearWhenInvalid false
+        cut.SetParametersAndRender(pb =>
+        {
+            pb.Add(a => a.IsAutoClearWhenInvalid, false);
+            pb.Add(a => a.Value, model.Value);
+        });
+
+        // 设置一个无效值
+        await cut.InvokeAsync(() => cut.Instance.TriggerChange("Invalid-Value"));
+
+        // 触发 OnBlur 回调
+        await cut.InvokeAsync(() => cut.Instance.TriggerBlur());
+
+        // 值不应被清空
+        Assert.NotNull(cut.Instance.Value);
+    }
+
     class MockModel
     {
         [Required]