refactor: 重构固定搜索栏样式

Author: ArgoZhang

src/BootstrapBlazor/Components/Select/Select.razor

@@ -30,12 +30,15 @@
         {
             <span class="@ClearClassString" @onclick="OnClearValue"><i class="@ClearIcon"></i></span>
         }
-        <div class="dropdown-menu">
-            <div class="@SearchClassString">
-                <input type="text" class="search-text form-control" autocomplete="off" value="@SearchText" aria-label="search">
-                <i class="@SearchIconString"></i>
-                <i class="@SearchLoadingIconString"></i>
-            </div>
+        <div class="@DropdownMenuClassString">
+            @if (ShowSearch)
+            {
+                <div class="dropdown-menu-search">
+                    <input type="text" class="search-text form-control" autocomplete="off" value="@SearchText" aria-label="search">
+                    <i class="@SearchIconString"></i>
+                    <i class="@SearchLoadingIconString"></i>
+                </div>
+            }
             @if (IsVirtualize)
             {
                 <div class="dropdown-virtual">
@@ -49,30 +52,32 @@
                     }
                 </div>
             }
+            else if (Rows.Count == 0)
+            {
+                <div class="dropdown-item">@NoSearchDataText</div>
+            }
             else
             {
-                @foreach (var itemGroup in Rows.GroupBy(i => i.GroupName))
-                {
-                    if (!string.IsNullOrEmpty(itemGroup.Key))
+                <div class="dropdown-menu-body">
+                    @foreach (var itemGroup in Rows.GroupBy(i => i.GroupName))
                     {
-                        if (GroupItemTemplate != null)
+                        if (!string.IsNullOrEmpty(itemGroup.Key))
                         {
-                            @GroupItemTemplate(itemGroup.Key)
+                            if (GroupItemTemplate != null)
+                            {
+                                @GroupItemTemplate(itemGroup.Key)
+                            }
+                            else
+                            {
+                                <Divider Text="@itemGroup.Key" />
+                            }
                         }
-                        else
+                        @foreach (var item in itemGroup)
                         {
-                            <Divider Text="@itemGroup.Key" />
+                            @RenderRow(item)
                         }
                     }
-                    @foreach (var item in itemGroup)
-                    {
-                        @RenderRow(item)
-                    }
-                }
-                @if (Rows.Count == 0)
-                {
-                    <div class="dropdown-item">@NoSearchDataText</div>
-                }
+                </div>
             }
         </div>
         @if (!IsPopover)

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

@@ -43,15 +43,14 @@ public partial class Select<TValue> : ISelect, ILookup
         .AddClass("disabled", item.IsDisabled)
         .Build();
 
-    private string? SearchClassString => CssBuilder.Default("search")
-        .AddClass("show", ShowSearch)
-        .AddClass("is-fixed", IsFixedSearch)
-        .Build();
-
     private string? SearchLoadingIconString => CssBuilder.Default("icon searching-icon")
         .AddClass(SearchLoadingIcon)
         .Build();
 
+    private string? DropdownMenuClassString => CssBuilder.Default("dropdown-menu")
+        .AddClass("is-fixed-search", IsFixedSearch)
+        .Build();
+
     private readonly List<SelectedItem> _children = [];
 
     private string? ScrollIntoViewBehaviorString => ScrollIntoViewBehavior == ScrollIntoViewBehavior.Smooth ? null : ScrollIntoViewBehavior.ToDescriptionString();

src/BootstrapBlazor/Components/Select/Select.razor.scss

@@ -209,46 +209,45 @@
     border-color: transparent transparent var(--bs-info);
 }
 
-.dropdown-menu .search {
-    padding: var(--bb-select-search-padding);
-    position: relative;
-    border-block-end: var(--bs-border-width) solid var(--bb-select-search-border-color);
-    margin-block-end: var(--bb-select-search-margin-bottom);
-
-    &:not(.show) {
-        display: none;
-    }
-
-    &.l {
-        .search-icon {
-            display: none;
+.dropdown-menu {
+    .dropdown-menu-search {
+        padding: var(--bb-select-search-padding);
+        position: relative;
+        border-block-end: var(--bs-border-width) solid var(--bb-select-search-border-color);
+        margin-block-end: var(--bb-select-search-margin-bottom);
+
+        &.l {
+            .search-icon {
+                display: none;
+            }
+
+            .searching-icon {
+                display: block;
+            }
         }
 
         .searching-icon {
-            display: block;
+            display: none;
         }
     }
 
-    .searching-icon {
-        display: none;
+    .search-text {
+        padding-inline-end: var(--bb-select-search-padding-right);
     }
-}
-
-.dropdown-menu .search.is-fixed {
-    position: sticky;
-    top: calc(-1 * var(--bs-dropdown-padding-y));
-    background-color: var(--bs-dropdown-bg);
-}
 
-.dropdown-menu .search .search-text {
-    padding-inline-end: var(--bb-select-search-padding-right);
-}
+    .icon {
+        position: absolute;
+        right: var(--bb-select-search-icon-right);
+        top: var(--bb-select-search-icon-top);
+        color: var(--bb-select-search-icon-color);
+    }
 
-.dropdown-menu .search .icon {
-    position: absolute;
-    right: var(--bb-select-search-icon-right);
-    top: var(--bb-select-search-icon-top);
-    color: var(--bb-select-search-icon-color);
+    &.is-fixed-search {
+        .dropdown-menu-body {
+            max-height: calc(var(--bb-dropdown-max-height) - 76px);
+            overflow: auto;
+        }
+    }
 }
 
 .select:not(.multi-select) .dropdown-toggle {