fix(Dropdown): not show dropdown menu after toggle IsDisabled paramet…

…er (#4848) * fix: 修复切换禁用状态后无法弹出下拉框问题 * chore: bump version 9.1.3 * feat: 增加 Item 禁用样式 * test: 增加单元测试 * refactor: 更改禁用样式 * test: 更新单元测试 * refactor: 同步代码 * test: 更新单元测试 * test: 更新单元测试 --------- Signed-off-by: Argo Zhang <argo@live.ca>
dotnetcore · Dec 14, 2024 · c673833 · c673833
1 parent 24fc677
commit c673833
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 37 deletions.
diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.1.3-beta08</Version>
+    <Version>9.1.3</Version>
   </PropertyGroup>
 
   <ItemGroup>

diff --git a/src/BootstrapBlazor/Components/Dropdown/Dropdown.razor.cs b/src/BootstrapBlazor/Components/Dropdown/Dropdown.razor.cs
@@ -68,7 +68,7 @@ public partial class Dropdown<TValue>
     /// <param name="item"></param>
     /// <returns></returns>
     protected string? DisableItem(SelectedItem item) => CssBuilder.Default("dropdown-item")
-        .AddClass("is-disabled", item.IsDisabled)
+        .AddClass("disabled", item.IsDisabled)
         .Build();
 
     /// <summary>

diff --git a/src/BootstrapBlazor/Components/SelectGeneric/SelectGeneric.razor b/src/BootstrapBlazor/Components/SelectGeneric/SelectGeneric.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))

diff --git a/src/BootstrapBlazor/Components/SelectGeneric/SelectGeneric.razor.cs b/src/BootstrapBlazor/Components/SelectGeneric/SelectGeneric.razor.cs
@@ -391,7 +391,7 @@ private async Task SearchTextChanged(string val)
     /// <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>
     /// 客户端回车回调方法
@@ -408,6 +408,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>

diff --git a/test/UnitTest/Components/DropdownTest.cs b/test/UnitTest/Components/DropdownTest.cs
@@ -233,7 +233,7 @@ public void Disabled_Ok()
                 new("2", "Test2")
             });
         });
-        cut.Contains("<div class=\"dropdown-item is-disabled\">Test1</div>");
+        cut.Contains("<div class=\"dropdown-item disabled\">Test1</div>");
     }
 
     [Fact]

diff --git a/test/UnitTest/Components/SelectGenericTest.cs b/test/UnitTest/Components/SelectGenericTest.cs
@@ -13,13 +13,6 @@ namespace UnitTest.Components;
 
 public class SelectGenericTest : BootstrapBlazorTestBase
 {
-    [Fact]
-    public void SeletectedItem_Ok()
-    {
-        var item = new SelectedItem(null!, "Text");
-        Assert.Equal(item.Value, string.Empty);
-    }
-
     [Fact]
     public async Task OnSearchTextChanged_Null()
     {
@@ -42,7 +35,7 @@ await ctx.InvokeAsync(async () =>
             await ctx.Instance.ConfirmSelectedItem(0);
 
             // 搜索 T
-            ctx.Find(".search-text").Input("T");
+            await ctx.Instance.TriggerOnSearch("T");
             await ctx.Instance.ConfirmSelectedItem(0);
         });
 
@@ -68,9 +61,9 @@ await ctx.InvokeAsync(async () =>
             });
         });
 
-        await ctx.InvokeAsync(() =>
+        await ctx.InvokeAsync(async () =>
         {
-            ctx.Find(".search-text").Input("T");
+            await ctx.Instance.TriggerOnSearch("T");
         });
         cut.DoesNotContain("Test2");
     }
@@ -672,8 +665,7 @@ public async Task IsVirtualize_Items_Clearable_Ok()
         // 覆盖有搜索条件时，点击清空按钮
         // 期望 UI 显示值为默认值
         // 期望 下拉框为全数据
-        var input = cut.Find(".search-text");
-        await cut.InvokeAsync(() => input.Input("2"));
+        await cut.InvokeAsync(() => cut.Instance.TriggerOnSearch("2"));
 
         // 下拉框仅显示一个选项 Test2
         var items = cut.FindAll(".dropdown-item");
@@ -730,8 +722,7 @@ public async Task IsVirtualize_OnQueryAsync_Clearable_Ok()
         // 覆盖有搜索条件时，点击清空按钮
         // 期望 UI 显示值为默认值
         // 期望 下拉框为全数据
-        var input = cut.Find(".search-text");
-        await cut.InvokeAsync(() => input.Input("2"));
+        await cut.InvokeAsync(() => cut.Instance.TriggerOnSearch("2"));
 
         // 下拉框仅显示一个选项 Test2
         var items = cut.FindAll(".dropdown-item");

diff --git a/test/UnitTest/Components/SelectTest.cs b/test/UnitTest/Components/SelectTest.cs
@@ -35,7 +35,7 @@ await ctx.InvokeAsync(async () =>
             await ctx.Instance.ConfirmSelectedItem(0);
 
             // 搜索 T
-            ctx.Find(".search-text").Input("T");
+            await ctx.Instance.TriggerOnSearch("T");
             await ctx.Instance.ConfirmSelectedItem(0);
         });
 
@@ -61,9 +61,9 @@ await ctx.InvokeAsync(async () =>
             });
         });
 
-        await ctx.InvokeAsync(() =>
+        await ctx.InvokeAsync(async () =>
         {
-            ctx.Find(".search-text").Input("T");
+            await ctx.Instance.TriggerOnSearch("T");
         });
         cut.DoesNotContain("Test2");
     }
@@ -663,7 +663,7 @@ public async Task IsVirtualize_Items_Clearable_Ok()
         // 期望 UI 显示值为默认值
         // 期望 下拉框为全数据
         var input = cut.Find(".search-text");
-        await cut.InvokeAsync(() => input.Input("2"));
+        await cut.InvokeAsync(() => cut.Instance.TriggerOnSearch("2"));
 
         // 下拉框仅显示一个选项 Test2
         var items = cut.FindAll(".dropdown-item");
@@ -721,7 +721,7 @@ public async Task IsVirtualize_OnQueryAsync_Clearable_Ok()
         // 期望 UI 显示值为默认值
         // 期望 下拉框为全数据
         var input = cut.Find(".search-text");
-        await cut.InvokeAsync(() => input.Input("2"));
+        await cut.InvokeAsync(() => cut.Instance.TriggerOnSearch("2"));
 
         // 下拉框仅显示一个选项 Test2
         var items = cut.FindAll(".dropdown-item");
-Original file line number
+Diff line change
@@ Expand Up / @@ -233,7 +233,7 @@ public void Disabled_Ok() @@
                     new("2", "Test2")
                 });
             });
-            cut.Contains("<div class=\"dropdown-item is-disabled\">Test1</div>");
+            cut.Contains("<div class=\"dropdown-item disabled\">Test1</div>");
         }
         [Fact]
@@ Expand Down @@