refactor(Select): not trigger SelectedItemChanged callback when click Empty item (#1436)

* refactor: 更新脚本

* fix: 修复切换到空值选项不触发 SelectedItemChanged 回调问题

* test: 增加单元测试

* refactor: 增加变量默认值

* test: 更新单元测试

* chore: bump version 7.7.5

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>7.7.4</Version>
+    <Version>7.7.5</Version>
   </PropertyGroup>
 
   <ItemGroup Condition="'$(TargetFramework)' == 'net5.0'">

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

@@ -145,7 +145,7 @@ public partial class Select<TValue> : ISelect
     /// </summary>
     private string? InputId => $"{Id}_input";
 
-    private string? _lastSelectedValueString;
+    private string _lastSelectedValueString = string.Empty;
 
     /// <summary>
     /// <inheritdoc/>
@@ -207,8 +207,6 @@ public partial class Select<TValue> : ISelect
                 ?? DataSource.FirstOrDefault(i => i.Active)
                 ?? DataSource.FirstOrDefault();
 
-            // 检查 Value 值是否在候选项中存在
-            // Value 不等于 选中值即不存在
             if (SelectedItem != null)
             {
                 _ = SelectedItemChanged(SelectedItem);
@@ -224,10 +222,7 @@ public partial class Select<TValue> : ISelect
     /// <inheritdoc/>
     /// </summary>
     /// <returns></returns>
-    protected override async Task InvokeInitAsync()
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, nameof(ConfirmSelectedItem));
-    {
-        await InvokeVoidAsync("init", Id, nameof(ConfirmSelectedItem), Interop);
-    }
 
     /// <summary>
     /// 客户端回车回调方法
@@ -284,7 +279,7 @@ public partial class Select<TValue> : ISelect
 
     private async Task SelectedItemChanged(SelectedItem item)
     {
-        if (!string.IsNullOrEmpty(item.Value) && _lastSelectedValueString != item.Value)
+        if (_lastSelectedValueString != item.Value)
         {
             _lastSelectedValueString = item.Value;
 

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

@@ -3,7 +3,7 @@ import Data from "../../modules/data.js?v=$version"
 import EventHandler from "../../modules/event-handler.js?v=$version"
 import Popover from "../../modules/base-popover.js?v=$version"
 
-export function init(id, method, obj) {
+export function init(id, invoke, method) {
     const el = document.getElementById(id)
 
     if (el == null) {
@@ -12,13 +12,6 @@ export function init(id, method, obj) {
 
     const search = el.querySelector("input.search-text")
     const popover = Popover.init(el)
-    const select = {
-        el,
-        search,
-        method,
-        obj,
-        popover
-    }
 
     const shown = () => {
         if (search) {
@@ -71,7 +64,7 @@ export function init(id, method, obj) {
                 if (e.key === "Enter") {
                     popover.toggleMenu.classList.remove('show')
                     let index = indexOf(el, activeItem)
-                    obj.invokeMethodAsync(method, index)
+                    invoke.invokeMethodAsync(method, index)
                 }
             }
         }
@@ -80,18 +73,23 @@ export function init(id, method, obj) {
     EventHandler.on(el, 'shown.bs.dropdown', shown);
     EventHandler.on(el, 'keydown', keydown)
 
+    const select = {
+        el,
+        popover
+    }
     Data.set(id, select)
 }
 
 
 export function dispose(id) {
-    const data = Data.get(id)
+    const select = Data.get(id)
-    if (data) {
-        EventHandler.off(data.el, 'shown.bs.dropdown')
-        EventHandler.off(data.el, 'keydown')
-        Popover.dispose(data.popover)
-    }
     Data.remove(id)
+
+    if (select) {
+        EventHandler.off(select.el, 'shown.bs.dropdown')
+        EventHandler.off(select.el, 'keydown')
+        Popover.dispose(select.popover)
+    }
 }
 
 

test/UnitTest/Components/SelectTest.cs

@@ -157,21 +157,70 @@ public class SelectTest : BootstrapBlazorTestBase
     public void OnSelectedItemChanged_OK()
     {
         var triggered = false;
-        // 首次加载触发 OnSelectedItemChanged 回调测试
+
+        // 空值时，不触发 OnSelectedItemChanged 回调
         var cut = Context.RenderComponent<Select<string>>(pb =>
         {
             pb.Add(a => a.Items, new SelectedItem[]
             {
-                new SelectedItem("1", "Test1"),
+                new SelectedItem("", "Test"),
-                new SelectedItem("2", "Test2")
+                new SelectedItem("1", "Test2")
             });
-            pb.Add(a => a.Value, "2");
+            pb.Add(a => a.Value, "");
             pb.Add(a => a.OnSelectedItemChanged, item =>
             {
                 triggered = true;
                 return Task.CompletedTask;
             });
         });
+        Assert.False(triggered);
+
+        // 切换候选项时触发 OnSelectedItemChanged 回调测试
+        cut.InvokeAsync(() =>
+        {
+            var items = cut.FindAll(".dropdown-item");
+            var count = items.Count;
+            Assert.Equal(2, count);
+
+            var item = items[1];
+            item.Click();
+        });
+        Assert.True(triggered);
+
+        // 切换回 空值 触发 OnSelectedItemChanged 回调测试
+        triggered = false;
+        cut.InvokeAsync(() =>
+        {
+            var items = cut.FindAll(".dropdown-item");
+            var item = items[0];
+            item.Click();
+        });
+        Assert.True(triggered);
+
+        // 首次加载值不为空时触发 OnSelectedItemChanged 回调测试
+        triggered = false;
+        cut.SetParametersAndRender(pb =>
+        {
+            pb.Add(a => a.Items, new SelectedItem[]
+            {
+                new SelectedItem("", "Test"),
+                new SelectedItem("1", "Test1"),
+                new SelectedItem("2", "Test2")
+            });
+            pb.Add(a => a.Value, "2");
+        });
+        Assert.True(triggered);
+
+        // 切换回 空值 触发 OnSelectedItemChanged 回调测试
+        triggered = false;
+        cut.InvokeAsync(() =>
+        {
+            var items = cut.FindAll(".dropdown-item");
+            var count = items.Count;
+            Assert.Equal(3, count);
+            var item = items[0];
+            item.Click();
+        });
         Assert.True(triggered);
     }