From 8446f14126c3347311ecfe15b8218e600daaf4fe Mon Sep 17 00:00:00 2001
From: Tony <6914529@qq.com>
Date: Wed, 4 Feb 2026 22:39:49 +0800
Subject: [PATCH 01/25] =?UTF-8?q?BootstrapInputNumber=E6=A0=BC=E5=BC=8F?=
 =?UTF-8?q?=E5=8C=96=E5=8D=83=E5=88=86=E4=BD=8D=E4=B8=8D=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

BootstrapInputNumber格式化千分位不显示的问题，给组件添加一个class组件特殊标识，然后通过js回调显示，不知道这个合不合适
---
 .../Components/Input/BootstrapInput.razor.js  | 26 +++++++++++++++-
 .../InputNumber/BootstrapInputNumber.razor.cs | 30 +++++++++++++++++++
 2 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/src/BootstrapBlazor/Components/Input/BootstrapInput.razor.js b/src/BootstrapBlazor/Components/Input/BootstrapInput.razor.js
index 7e826da835f..57e925f26c8 100644
--- a/src/BootstrapBlazor/Components/Input/BootstrapInput.razor.js
+++ b/src/BootstrapBlazor/Components/Input/BootstrapInput.razor.js
@@ -1,4 +1,28 @@
-import EventHandler from "../../modules/event-handler.js"
+import EventHandler from "../../modules/event-handler.js"
+
+
+export function init(id, invoke, method) {
+    const el = document.getElementById(id)
+    EventHandler.on(el, 'focus', e => {
+        const isString = e.target.getAttribute('type') === 'text';
+        const isNumber = e.target.classList('class').contains("input-number")
+        if (isString && isNumber) {
+            let value = e.target.value;
+            e.target.setAttribute('type', 'number');
+            e.target.value = value.split(',').join('');
+            invoke.invokeMethodAsync(method, true);
+        }
+    });
+    EventHandler.on(el, 'blur', e => {
+        const isString = e.target.getAttribute('type') === 'number';
+        const isNumber = e.target.classList('class').contains("input-number")
+        if (isString && isNumber) {
+            e.target.setAttribute('type', 'text');
+            invoke.invokeMethodAsync(method, false);
+        }
+
+    });
+}
 
 export function focus(id) {
     const el = document.getElementById(id)
diff --git a/src/BootstrapBlazor/Components/InputNumber/BootstrapInputNumber.razor.cs b/src/BootstrapBlazor/Components/InputNumber/BootstrapInputNumber.razor.cs
index de399f1bba6..337257c24cd 100644
--- a/src/BootstrapBlazor/Components/InputNumber/BootstrapInputNumber.razor.cs
+++ b/src/BootstrapBlazor/Components/InputNumber/BootstrapInputNumber.razor.cs
@@ -12,6 +12,7 @@ namespace BootstrapBlazor.Components;
 /// <para lang="zh">An input component for editing numeric values. Supported numeric 类型s are <see cref="int"/>, <see cref="long"/>, <see cref="short"/>, <see cref="float"/>, <see cref="double"/>, <see cref="decimal"/></para>
 /// <para lang="en">An input component for editing numeric values. Supported numeric types are <see cref="int"/>, <see cref="long"/>, <see cref="short"/>, <see cref="float"/>, <see cref="double"/>, <see cref="decimal"/></para>
 /// </summary>
+[BootstrapModuleAutoLoader("Input/BootstrapInput.razor.js", JSObjectReference = true)]
 public partial class BootstrapInputNumber<TValue>
 {
     /// <summary>
@@ -29,6 +30,7 @@ public partial class BootstrapInputNumber<TValue>
     /// </summary>
     protected string? InputClassString => CssBuilder.Default("form-control")
         .AddClass(CssClass).AddClass(ValidCss)
+        .AddClass("input-number")
         .AddClass("input-number-fix", ShowButton)
         .AddClass($"border-{Color.ToDescriptionString()}", Color != Color.None)
         .AddClassFromAttributes(AdditionalAttributes)
@@ -120,6 +122,34 @@ protected override void OnInitialized()
         {
             _lastInputValueString ??= Value?.ToString();
         }
+
+
+    }
+
+    /// <summary>
+    /// 
+    /// <inheritdoc/>
+    /// </summary>
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, nameof(TriggerFormatValue));
+
+    /// <summary>
+    /// <para lang="zh">Trigger value changed event 回调. Trigger by JavaScript</para>
+    /// <para lang="en">Trigger value changed event callback. Trigger by JavaScript</para>
+    /// </summary>
+    /// <param name="focus"></param>
+    [JSInvokable]
+    public Task TriggerFormatValue(bool focus)
+    {
+        if (focus)
+        {
+            CurrentValueAsString = InternalFormat(Value) ?? "";
+        }
+        else
+        {
+            CurrentValueAsString = GetFormatString(Value) ?? "";
+        }
+        StateHasChanged();
+        return Task.CompletedTask;
     }
 
     /// <summary>

From 16a3de98f9912cb88c38053a3cf7af071440824a Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Fri, 6 Feb 2026 19:13:58 +0800
Subject: [PATCH 02/25] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E9=80=89?=
 =?UTF-8?q?=E9=A1=B9=E5=85=B3=E9=97=AD=E6=8C=89=E9=92=AE=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/Select/SelectTable.razor.cs    | 16 ++++++++++++++
 .../Components/Select/SelectTable.razor.js    | 21 ++++++++++++++++---
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs b/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs
index 60c8f4d5115..afb18b635d6 100644
--- a/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs
+++ b/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs
@@ -302,4 +302,20 @@ private async Task OnClearValue()
     /// <para lang="en">Query Method</para>
     /// </summary>
     public Task QueryAsync() => _table.QueryAsync();
+
+    /// <summary>
+    /// <para lang="zh">触发删除选项方法 由 Javascript 调用</para>
+    /// <para lang="en"></para>
+    /// </summary>
+    /// <param name="index"></param>
+    [JSInvokable]
+    public void TriggerRemoveItem(int index)
+    {
+        if (index >= 0 && index < _selectedItems.Count)
+        {
+            var item = _selectedItems[index];
+            _selectedItems.Remove(item);
+            StateHasChanged();
+        }
+    }
 }
diff --git a/src/BootstrapBlazor/Components/Select/SelectTable.razor.js b/src/BootstrapBlazor/Components/Select/SelectTable.razor.js
index 9ba1689f927..003198c1d4d 100644
--- a/src/BootstrapBlazor/Components/Select/SelectTable.razor.js
+++ b/src/BootstrapBlazor/Components/Select/SelectTable.razor.js
@@ -1,8 +1,9 @@
-import { getWidth } from "../../modules/utility.js"
+import { getWidth } from "../../modules/utility.js"
 import Data from "../../modules/data.js"
+import EventHandler from "../../modules/event-handler.js"
 import Popover from "../../modules/base-popover.js"
 
-export function init(id) {
+export function init(id, invoke) {
     const el = document.getElementById(id)
     if (el == null) {
         return
@@ -50,7 +51,20 @@ export function init(id) {
         observer
     }
 
-    Data.set(id, selectTable)
+    Data.set(id, selectTable);
+
+    EventHandler.on(el, 'click', '.multi-select-close', e => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const index = e.delegateTarget.getAttribute('data-bb-index');
+        if (index) {
+            const value = parseInt(index);
+            if (value > -1) {
+                invoke.invokeMethodAsync("TriggerRemoveItem", value);
+            }
+        }
+    });
 }
 
 export function close(id) {
@@ -66,5 +80,6 @@ export function dispose(id) {
     if (data) {
         data.observer.disconnect();
         Popover.dispose(data.popover)
+        EventHandler.off(data.el, 'click');
     }
 }

From 0a81f3c56c947f3dc251c36bdb3f9ceabff332b3 Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Fri, 6 Feb 2026 19:14:28 +0800
Subject: [PATCH 03/25] feat(SelectTable): add IsMultipleSelect parameter

---
 .../Components/Select/SelectTable.razor       | 32 +++++++++++++++++--
 .../Components/Select/SelectTable.razor.cs    | 20 +++++++++++-
 2 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/src/BootstrapBlazor/Components/Select/SelectTable.razor b/src/BootstrapBlazor/Components/Select/SelectTable.razor
index 6183da0a84c..8d07b561821 100644
--- a/src/BootstrapBlazor/Components/Select/SelectTable.razor
+++ b/src/BootstrapBlazor/Components/Select/SelectTable.razor
@@ -1,4 +1,4 @@
-@namespace BootstrapBlazor.Components
+@namespace BootstrapBlazor.Components
 @typeparam TItem
 @inherits PopoverDropdownBase<TItem>
 @attribute [BootstrapModuleAutoLoader("Select/SelectTable.razor.js", JSObjectReference = true)]
@@ -8,10 +8,35 @@
     <BootstrapLabel required="@Required" for="@InputId" ShowLabelTooltip="ShowLabelTooltip" Value="@DisplayText" />
 }
 <div @attributes="AdditionalAttributes" id="@Id" data-bs-toggle="lgbSelect" data-bb-min-width="@TableMinWidth" class="@ClassName">
-    <div class="dropdown-toggle" data-bs-toggle="bb.dropdown" data-bs-auto-close="outside" data-bs-placement="@PlacementString" data-bs-custom-class="@CustomClassString" aria-expanded="false">
+    <div class="dropdown-toggle" data-bs-toggle="bb.dropdown" aria-expanded="false"
+         data-bs-auto-close="outside" data-bs-placement="@PlacementString" data-bs-custom-class="@CustomClassString">
         @if (Template == null)
         {
-            <input type="text" id="@InputId" readonly disabled="@Disabled" placeholder="@PlaceHolder" class="@InputClassName" value="@GetText()" />
+            @if (IsMultipleSelect)
+            {
+                <div class="@MultiItemsClassString" id="@InputId">
+                    @foreach (var item in _selectedItems)
+                    {
+                        <div class="multi-select-item-group">
+                            <span class="multi-select-close" data-bb-index="@GetIndexString(item)">
+                                <i class="@_closeButtonIcon"></i>
+                            </span>
+                            <span class="multi-select-item">@GetText(item)</span>
+                        </div>
+                    }
+                    @if (_selectedItems.Count == 0)
+                    {
+                        <div class="multi-select-item-ph">
+                            @PlaceHolder
+                        </div>
+                    }
+                </div>
+            }
+            else
+            {
+                <input type="text" id="@InputId" readonly disabled="@Disabled" placeholder="@PlaceHolder"
+                       class="@InputClassName" value="@GetText(Value)" />
+            }
         }
         else
         {
@@ -47,6 +72,7 @@
                    CustomerSearchModel="CustomerSearchModel" CustomerSearchTemplate="CustomerSearchTemplate"
                    IsPagination="IsPagination" PageItemsSource="PageItemsSource" ShowGotoNavigator="false" MaxPageLinkCount="3"
                    OnClickRowCallback="OnClickRowCallback" OnQueryAsync="OnQueryAsync"
+                   IsMultipleSelect="IsMultipleSelect" @bind-SelectedRows="_selectedItems"
                    ShowEmpty="ShowEmpty" EmptyTemplate="EmptyTemplate"></Table>
         </div>
     </RenderTemplate>
diff --git a/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs b/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs
index afb18b635d6..0a379fd8b1e 100644
--- a/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs
+++ b/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs
@@ -15,6 +15,13 @@ namespace BootstrapBlazor.Components;
 [CascadingTypeParameter(nameof(TItem))]
 public partial class SelectTable<TItem> : IColumnCollection where TItem : class, new()
 {
+    /// <summary>
+    /// <para lang="zh">获得/设置 是否为多选模式，默认值为 false</para>
+    /// <para lang="en">Gets or sets Multiple Selection Mode. Default false</para>
+    /// </summary>
+    [Parameter]
+    public bool IsMultipleSelect { get; set; }
+
     /// <summary>
     /// <para lang="zh">获得/设置 TableHeader 实例</para>
     /// <para lang="en">Gets or sets TableHeader Instance</para>
@@ -118,6 +125,10 @@ namespace BootstrapBlazor.Components;
         .AddClass(ValidCss)
         .Build();
 
+    private string? MultiItemsClassString => CssBuilder.Default("multi-select-items")
+        .AddClass(InputClassName)
+        .Build();
+
     private string? AppendClassString => CssBuilder.Default("form-select-append")
         .AddClass($"text-{Color.ToDescriptionString()}", Color != Color.None && !IsDisabled && !IsValid.HasValue)
         .AddClass($"text-success", IsValid.HasValue && IsValid.Value)
@@ -246,6 +257,8 @@ namespace BootstrapBlazor.Components;
         .Build();
 
     private Table<TItem> _table = default!;
+    private string? _closeButtonIcon;
+    private List<TItem> _selectedItems = [];
 
     /// <summary>
     /// <inheritdoc/>
@@ -277,9 +290,12 @@ protected override void OnParametersSet()
         PlaceHolder ??= Localizer[nameof(PlaceHolder)];
         DropdownIcon ??= IconTheme.GetIconByKey(ComponentIcons.SelectDropdownIcon);
         ClearIcon ??= IconTheme.GetIconByKey(ComponentIcons.SelectClearIcon);
+        _closeButtonIcon ??= IconTheme.GetIconByKey(ComponentIcons.MultiSelectCloseIcon);
     }
 
-    private string? GetText() => Value == default ? null : GetTextCallback(Value);
+    private string? GetText(TItem item) => item == default ? null : GetTextCallback(item);
+
+    private string GetIndexString(TItem item) => _selectedItems.IndexOf(item).ToString();
 
     private async Task OnClickRowCallback(TItem item)
     {
@@ -289,6 +305,8 @@ private async Task OnClickRowCallback(TItem item)
 
     private async Task OnClearValue()
     {
+        _selectedItems.Clear();
+
         if (OnClearAsync != null)
         {
             await OnClearAsync();

From 5cb87fe1fb620a3139a0b344906f8c9307894674 Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Fri, 6 Feb 2026 19:14:38 +0800
Subject: [PATCH 04/25] =?UTF-8?q?style:=20=E5=A2=9E=E5=8A=A0=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/Select/SelectTable.razor.scss  | 51 +++++++++++++++++++
 1 file changed, 51 insertions(+)

diff --git a/src/BootstrapBlazor/Components/Select/SelectTable.razor.scss b/src/BootstrapBlazor/Components/Select/SelectTable.razor.scss
index ed6b39a591d..ee550bd1164 100644
--- a/src/BootstrapBlazor/Components/Select/SelectTable.razor.scss
+++ b/src/BootstrapBlazor/Components/Select/SelectTable.razor.scss
@@ -1,4 +1,10 @@
 .select-table {
+    --bb-select-table-item-width: 110px;
+    --bb-select-table-item-bg-color: rgba(var(--bs-body-color-rgb), .15);
+    --bb-select-table-item-hover-bg-color: rgba(var(--bs-body-color-rgb), .3);
+    --bb-select-table-item-padding: 2px 6px;
+    --bb-select-table-item-gap: 3px;
+
     .dropdown-toggle {
         .is-display {
             cursor: pointer;
@@ -11,6 +17,51 @@
             cursor: not-allowed;
         }
     }
+
+    &:not(.disabled) .multi-select-items .multi-select-close:hover {
+        background-color: var(--bb-select-table-item-hover-bg-color);
+    }
+
+    .multi-select-items {
+        --bb-select-padding: 3px 0.375rem;
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--bb-select-table-item-gap);
+        overflow: auto;
+
+        .multi-select-item-group {
+            display: inline-flex;
+            position: relative;
+
+            span {
+                border: solid 1px var(--bs-border-color);
+                border-radius: var(--bs-border-radius);
+                background-color: var(--bb-select-table-item-bg-color);
+                padding: var(--bb-select-table-item-padding);
+            }
+
+            .multi-select-close {
+                border-top-right-radius: 0;
+                border-bottom-right-radius: 0;
+                margin-inline-end: -1px;
+                transition: color .3s linear, background-color .3s linear;
+            }
+
+            .multi-select-item {
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0;
+                white-space: nowrap;
+                max-width: var(--bb-select-table-item-width);
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
+        }
+
+        .multi-select-item-ph {
+            padding: 3px 6px;
+            color: #999;
+        }
+    }
 }
 
 .popover-dropdown {

From 2484a2d41624dffb3bc05250d846953a108fe93d Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Fri, 6 Feb 2026 19:41:25 +0800
Subject: [PATCH 05/25] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E5=8F=8C?=
 =?UTF-8?q?=E5=90=91=E7=BB=91=E5=AE=9A=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/Select/SelectTable.razor       |  8 +--
 .../Components/Select/SelectTable.razor.cs    | 56 ++++++++++++++++---
 .../Components/Select/SelectTable.razor.js    |  3 +
 3 files changed, 55 insertions(+), 12 deletions(-)

diff --git a/src/BootstrapBlazor/Components/Select/SelectTable.razor b/src/BootstrapBlazor/Components/Select/SelectTable.razor
index 8d07b561821..8c1181c18af 100644
--- a/src/BootstrapBlazor/Components/Select/SelectTable.razor
+++ b/src/BootstrapBlazor/Components/Select/SelectTable.razor
@@ -14,8 +14,8 @@
         {
             @if (IsMultipleSelect)
             {
-                <div class="@MultiItemsClassString" id="@InputId">
-                    @foreach (var item in _selectedItems)
+                <div class="@MultiItemsClassString" id="@InputId" style="@MultiItemsStyleString">
+                    @foreach (var item in SelectedItems)
                     {
                         <div class="multi-select-item-group">
                             <span class="multi-select-close" data-bb-index="@GetIndexString(item)">
@@ -24,7 +24,7 @@
                             <span class="multi-select-item">@GetText(item)</span>
                         </div>
                     }
-                    @if (_selectedItems.Count == 0)
+                    @if (SelectedItems.Count == 0)
                     {
                         <div class="multi-select-item-ph">
                             @PlaceHolder
@@ -72,7 +72,7 @@
                    CustomerSearchModel="CustomerSearchModel" CustomerSearchTemplate="CustomerSearchTemplate"
                    IsPagination="IsPagination" PageItemsSource="PageItemsSource" ShowGotoNavigator="false" MaxPageLinkCount="3"
                    OnClickRowCallback="OnClickRowCallback" OnQueryAsync="OnQueryAsync"
-                   IsMultipleSelect="IsMultipleSelect" @bind-SelectedRows="_selectedItems"
+                   IsMultipleSelect="IsMultipleSelect" @bind-SelectedRows="SelectedItems"
                    ShowEmpty="ShowEmpty" EmptyTemplate="EmptyTemplate"></Table>
         </div>
     </RenderTemplate>
diff --git a/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs b/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs
index 0a379fd8b1e..3a7077d8e5a 100644
--- a/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs
+++ b/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs
@@ -22,6 +22,20 @@ namespace BootstrapBlazor.Components;
     [Parameter]
     public bool IsMultipleSelect { get; set; }
 
+    /// <summary>
+    /// <para lang="zh">获得/设置 多选模式下已选择项集合 默认 null</para>
+    /// <para lang="en">Gets or sets the selected items collection in multiple selection mode. Default null</para>
+    /// </summary>
+    [Parameter]
+    public List<TItem> SelectedItems { get; set; } = [];
+
+    /// <summary>
+    /// <para lang="zh">获得/设置 多选模式下已选择项集合变化回调方法</para>
+    /// <para lang="en">Gets or sets the callback method when selected items collection changes in multiple selection mode</para>
+    /// </summary>
+    [Parameter]
+    public EventCallback<List<TItem>> SelectedItemsChanged { get; set; }
+
     /// <summary>
     /// <para lang="zh">获得/设置 TableHeader 实例</para>
     /// <para lang="en">Gets or sets TableHeader Instance</para>
@@ -97,6 +111,13 @@ namespace BootstrapBlazor.Components;
     [Parameter]
     public RenderFragment? EmptyTemplate { get; set; }
 
+    /// <summary>
+    /// <para lang="zh">获得/设置 多选模式下选中项最大宽度 默认 null 未设置使用样式内置默认值 6 个汉字</para>
+    /// <para lang="en">Gets or sets the maximum width of selected item in multiple selection mode. Default null</para>
+    /// </summary>
+    [Parameter]
+    public int? MultiSelectedItemMaxWidth { get; set; }
+
     /// <summary>
     /// <para lang="zh">获得/设置 IIconTheme 服务实例</para>
     /// <para lang="en">Gets or sets IIconTheme Service Instance</para>
@@ -129,6 +150,10 @@ namespace BootstrapBlazor.Components;
         .AddClass(InputClassName)
         .Build();
 
+    private string? MultiItemsStyleString => CssBuilder.Default()
+        .AddClass($"--bb-select-table-item-width: {MultiSelectedItemMaxWidth}", MultiSelectedItemMaxWidth.HasValue)
+        .Build();
+
     private string? AppendClassString => CssBuilder.Default("form-select-append")
         .AddClass($"text-{Color.ToDescriptionString()}", Color != Color.None && !IsDisabled && !IsValid.HasValue)
         .AddClass($"text-success", IsValid.HasValue && IsValid.Value)
@@ -258,7 +283,6 @@ namespace BootstrapBlazor.Components;
 
     private Table<TItem> _table = default!;
     private string? _closeButtonIcon;
-    private List<TItem> _selectedItems = [];
 
     /// <summary>
     /// <inheritdoc/>
@@ -287,6 +311,8 @@ protected override void OnParametersSet()
             throw new InvalidOperationException("Please set GetTextCallback value");
         }
 
+        SelectedItems ??= [];
+
         PlaceHolder ??= Localizer[nameof(PlaceHolder)];
         DropdownIcon ??= IconTheme.GetIconByKey(ComponentIcons.SelectDropdownIcon);
         ClearIcon ??= IconTheme.GetIconByKey(ComponentIcons.SelectClearIcon);
@@ -295,7 +321,7 @@ protected override void OnParametersSet()
 
     private string? GetText(TItem item) => item == default ? null : GetTextCallback(item);
 
-    private string GetIndexString(TItem item) => _selectedItems.IndexOf(item).ToString();
+    private string GetIndexString(TItem item) => SelectedItems.IndexOf(item).ToString();
 
     private async Task OnClickRowCallback(TItem item)
     {
@@ -305,7 +331,7 @@ private async Task OnClickRowCallback(TItem item)
 
     private async Task OnClearValue()
     {
-        _selectedItems.Clear();
+        SelectedItems.Clear();
 
         if (OnClearAsync != null)
         {
@@ -327,13 +353,27 @@ private async Task OnClearValue()
     /// </summary>
     /// <param name="index"></param>
     [JSInvokable]
-    public void TriggerRemoveItem(int index)
+    public async Task TriggerRemoveItem(int index)
+    {
+        if (index >= 0 && index < SelectedItems.Count)
+        {
+            var item = SelectedItems[index];
+            SelectedItems.Remove(item);
+
+            await TriggerUpdateSelecedItems();
+        }
+    }
+
+    /// <summary>
+    /// <para lang="zh">更新 <see cref="SelectedItems"/> 参数方法 由 Javascript 调用</para>
+    /// <para lang="en"></para>
+    /// </summary>
+    [JSInvokable]
+    public async Task TriggerUpdateSelecedItems()
     {
-        if (index >= 0 && index < _selectedItems.Count)
+        if (SelectedItemsChanged.HasDelegate)
         {
-            var item = _selectedItems[index];
-            _selectedItems.Remove(item);
-            StateHasChanged();
+            await SelectedItemsChanged.InvokeAsync(SelectedItems);
         }
     }
 }
diff --git a/src/BootstrapBlazor/Components/Select/SelectTable.razor.js b/src/BootstrapBlazor/Components/Select/SelectTable.razor.js
index 003198c1d4d..46386cc0d6a 100644
--- a/src/BootstrapBlazor/Components/Select/SelectTable.razor.js
+++ b/src/BootstrapBlazor/Components/Select/SelectTable.razor.js
@@ -38,6 +38,9 @@ export function init(id, invoke) {
                 dropdown.style.removeProperty('visibility');
                 dropdown.style.removeProperty('position');
             }
+        },
+        hideCallback: async () => {
+            await invoke.invokeMethodAsync("TriggerUpdateSelecedItems");
         }
     });
 

From 8b06ed8cebc082e51e7ed50da429a79fbc0aee30 Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Fri, 6 Feb 2026 19:42:58 +0800
Subject: [PATCH 06/25] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E6=B3=A8?=
 =?UTF-8?q?=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/Select/SelectTable.razor.cs               | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs b/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs
index 3a7077d8e5a..9945a4314bd 100644
--- a/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs
+++ b/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs
@@ -349,9 +349,12 @@ private async Task OnClearValue()
 
     /// <summary>
     /// <para lang="zh">触发删除选项方法 由 Javascript 调用</para>
-    /// <para lang="en"></para>
+    /// <para lang="en">Trigger remove item method, called by Javascript</para>
     /// </summary>
-    /// <param name="index"></param>
+    /// <param name="index">
+    /// <para lang="zh">要删除的选项索引</para>
+    /// <para lang="en">The index of the item to remove</para>
+    /// </param>
     [JSInvokable]
     public async Task TriggerRemoveItem(int index)
     {
@@ -366,7 +369,7 @@ public async Task TriggerRemoveItem(int index)
 
     /// <summary>
     /// <para lang="zh">更新 <see cref="SelectedItems"/> 参数方法 由 Javascript 调用</para>
-    /// <para lang="en"></para>
+    /// <para lang="en">Update <see cref="SelectedItems"/> parameter method, called by Javascript</para>
     /// </summary>
     [JSInvokable]
     public async Task TriggerUpdateSelecedItems()

From 2faeb74e35a62adb33ec4615414e3d16e9902b87 Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Fri, 6 Feb 2026 19:52:19 +0800
Subject: [PATCH 07/25] =?UTF-8?q?refactor:=20=E5=A2=9E=E5=8A=A0=E6=9C=80?=
 =?UTF-8?q?=E5=A4=A7=E9=AB=98=E5=BA=A6=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/Select/SelectTable.razor        |  3 ++-
 .../Components/Select/SelectTable.razor.cs     | 18 +++++++++++++++---
 .../Components/Select/SelectTable.razor.scss   |  1 +
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/BootstrapBlazor/Components/Select/SelectTable.razor b/src/BootstrapBlazor/Components/Select/SelectTable.razor
index 8c1181c18af..5de8f9155d3 100644
--- a/src/BootstrapBlazor/Components/Select/SelectTable.razor
+++ b/src/BootstrapBlazor/Components/Select/SelectTable.razor
@@ -7,7 +7,8 @@
 {
     <BootstrapLabel required="@Required" for="@InputId" ShowLabelTooltip="ShowLabelTooltip" Value="@DisplayText" />
 }
-<div @attributes="AdditionalAttributes" id="@Id" data-bs-toggle="lgbSelect" data-bb-min-width="@TableMinWidth" class="@ClassName">
+<div @attributes="AdditionalAttributes" id="@Id" data-bs-toggle="lgbSelect" data-bb-min-width="@TableMinWidth"
+     class="@ClassName">
     <div class="dropdown-toggle" data-bs-toggle="bb.dropdown" aria-expanded="false"
          data-bs-auto-close="outside" data-bs-placement="@PlacementString" data-bs-custom-class="@CustomClassString">
         @if (Template == null)
diff --git a/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs b/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs
index 9945a4314bd..edb09f7ccde 100644
--- a/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs
+++ b/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs
@@ -22,6 +22,13 @@ namespace BootstrapBlazor.Components;
     [Parameter]
     public bool IsMultipleSelect { get; set; }
 
+    /// <summary>
+    /// <para lang="zh">获得/设置 多选模式下组件最大高度，默认值为 null 使用样式默认值 65px</para>
+    /// <para lang="en">Gets or sets Maximum height in multiple selection mode. Default null</para>
+    /// </summary>
+    [Parameter]
+    public string? MaxHeight { get; set; }
+
     /// <summary>
     /// <para lang="zh">获得/设置 多选模式下已选择项集合 默认 null</para>
     /// <para lang="en">Gets or sets the selected items collection in multiple selection mode. Default null</para>
@@ -151,7 +158,8 @@ namespace BootstrapBlazor.Components;
         .Build();
 
     private string? MultiItemsStyleString => CssBuilder.Default()
-        .AddClass($"--bb-select-table-item-width: {MultiSelectedItemMaxWidth}", MultiSelectedItemMaxWidth.HasValue)
+        .AddClass($"--bb-select-table-item-width: {MultiSelectedItemMaxWidth};", MultiSelectedItemMaxWidth.HasValue)
+        .AddClass($"--bb-select-max-height: {MaxHeight};", !string.IsNullOrEmpty(MaxHeight))
         .Build();
 
     private string? AppendClassString => CssBuilder.Default("form-select-append")
@@ -332,6 +340,7 @@ private async Task OnClickRowCallback(TItem item)
     private async Task OnClearValue()
     {
         SelectedItems.Clear();
+        await TriggerUpdateSelecedItems();
 
         if (OnClearAsync != null)
         {
@@ -374,9 +383,12 @@ public async Task TriggerRemoveItem(int index)
     [JSInvokable]
     public async Task TriggerUpdateSelecedItems()
     {
-        if (SelectedItemsChanged.HasDelegate)
+        if (IsMultipleSelect)
         {
-            await SelectedItemsChanged.InvokeAsync(SelectedItems);
+            if (SelectedItemsChanged.HasDelegate)
+            {
+                await SelectedItemsChanged.InvokeAsync(SelectedItems);
+            }
         }
     }
 }
diff --git a/src/BootstrapBlazor/Components/Select/SelectTable.razor.scss b/src/BootstrapBlazor/Components/Select/SelectTable.razor.scss
index ee550bd1164..bcde548be37 100644
--- a/src/BootstrapBlazor/Components/Select/SelectTable.razor.scss
+++ b/src/BootstrapBlazor/Components/Select/SelectTable.razor.scss
@@ -24,6 +24,7 @@
 
     .multi-select-items {
         --bb-select-padding: 3px 0.375rem;
+        --bb-select-max-height: 65px;
         display: flex;
         flex-wrap: wrap;
         gap: var(--bb-select-table-item-gap);

From fec81a679d52a24d303c32ec76802024a7ae7ef0 Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Fri, 6 Feb 2026 20:02:36 +0800
Subject: [PATCH 08/25] =?UTF-8?q?refactor:=20=E5=A2=9E=E5=8A=A0=E5=8F=B3?=
 =?UTF-8?q?=E4=BE=A7=E9=97=B4=E9=9A=99=E5=8F=98=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/BootstrapBlazor/Components/Select/Select.razor.scss | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/BootstrapBlazor/Components/Select/Select.razor.scss b/src/BootstrapBlazor/Components/Select/Select.razor.scss
index 50f794df5bf..d0fc99a2117 100644
--- a/src/BootstrapBlazor/Components/Select/Select.razor.scss
+++ b/src/BootstrapBlazor/Components/Select/Select.razor.scss
@@ -1,4 +1,4 @@
-@use "../../wwwroot/scss/variables" as *;
+@use "../../wwwroot/scss/variables" as *;
 
 .select,
 .popover-dropdown {
@@ -11,6 +11,7 @@
     --bb-select-padding: #{$bb-select-padding};
     --bb-select-append-width: #{$bb-select-append-width};
     --bb-select-append-color: #{$bb-select-append-color};
+    --bb-select-append-right: 0;
 }
 
 .select:not(.cascade) .dropdown-menu {
@@ -105,7 +106,7 @@
     position: absolute;
     height: 100%;
     width: var(--bb-select-append-width);
-    right: 0;
+    right: var(--bb-select-append-right);
     top: 0;
     color: var(--bb-select-append-color);
     pointer-events: none;
@@ -129,7 +130,7 @@
         position: absolute;
         height: 100%;
         width: var(--bb-select-append-width);
-        right: 0;
+        right: var(--bb-select-append-right);
         top: 0;
         color: var(--bb-select-append-color);
         align-items: center;

From 566ad63c5fa2b413bd357e6858f8b0cbf33d74e2 Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Fri, 6 Feb 2026 20:17:36 +0800
Subject: [PATCH 09/25] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E5=86=97?=
 =?UTF-8?q?=E4=BD=99=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/Select/SelectTable.razor        |  8 +++++++-
 .../Components/Select/SelectTable.razor.cs     | 13 +++++++++++--
 .../Components/Select/SelectTable.razor.scss   | 18 ++++++++++--------
 3 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/BootstrapBlazor/Components/Select/SelectTable.razor b/src/BootstrapBlazor/Components/Select/SelectTable.razor
index 5de8f9155d3..7edf9ff5d4b 100644
--- a/src/BootstrapBlazor/Components/Select/SelectTable.razor
+++ b/src/BootstrapBlazor/Components/Select/SelectTable.razor
@@ -16,7 +16,13 @@
             @if (IsMultipleSelect)
             {
                 <div class="@MultiItemsClassString" id="@InputId" style="@MultiItemsStyleString">
-                    @foreach (var item in SelectedItems)
+                    @if (SelectedItems.Count > MultiSelectedItemsMaxDisplayCount)
+                    {
+                        <div class="multi-select-item-group-count">
+                            @GetCountText()
+                        </div>
+                    }
+                    @foreach (var item in SelectedItems.Take(MultiSelectedItemsMaxDisplayCount))
                     {
                         <div class="multi-select-item-group">
                             <span class="multi-select-close" data-bb-index="@GetIndexString(item)">
diff --git a/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs b/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs
index edb09f7ccde..6cc43b250c3 100644
--- a/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs
+++ b/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs
@@ -27,7 +27,14 @@ namespace BootstrapBlazor.Components;
     /// <para lang="en">Gets or sets Maximum height in multiple selection mode. Default null</para>
     /// </summary>
     [Parameter]
-    public string? MaxHeight { get; set; }
+    public string? MultiSelectedItemsMaxHeight { get; set; }
+
+    /// <summary>
+    /// <para lang="zh">获得/设置 多选模式下组件显示最大数量，超过数量用数字显示，默认值为 8 </para>
+    /// <para lang="en">Gets or sets the maximum number of components is displayed in multiple selection mode; any quantity exceeding this is displayed as a number. Default value is 8</para>
+    /// </summary>
+    [Parameter]
+    public int MultiSelectedItemsMaxDisplayCount { get; set; } = 8;
 
     /// <summary>
     /// <para lang="zh">获得/设置 多选模式下已选择项集合 默认 null</para>
@@ -159,7 +166,7 @@ namespace BootstrapBlazor.Components;
 
     private string? MultiItemsStyleString => CssBuilder.Default()
         .AddClass($"--bb-select-table-item-width: {MultiSelectedItemMaxWidth};", MultiSelectedItemMaxWidth.HasValue)
-        .AddClass($"--bb-select-max-height: {MaxHeight};", !string.IsNullOrEmpty(MaxHeight))
+        .AddClass($"--bb-select-max-height: {MultiSelectedItemsMaxHeight};", !string.IsNullOrEmpty(MultiSelectedItemsMaxHeight))
         .Build();
 
     private string? AppendClassString => CssBuilder.Default("form-select-append")
@@ -331,6 +338,8 @@ protected override void OnParametersSet()
 
     private string GetIndexString(TItem item) => SelectedItems.IndexOf(item).ToString();
 
+    private string GetCountText() => $"+ {SelectedItems.Count - MultiSelectedItemsMaxDisplayCount}";
+
     private async Task OnClickRowCallback(TItem item)
     {
         CurrentValue = item;
diff --git a/src/BootstrapBlazor/Components/Select/SelectTable.razor.scss b/src/BootstrapBlazor/Components/Select/SelectTable.razor.scss
index bcde548be37..333a822b7f7 100644
--- a/src/BootstrapBlazor/Components/Select/SelectTable.razor.scss
+++ b/src/BootstrapBlazor/Components/Select/SelectTable.razor.scss
@@ -28,19 +28,21 @@
         display: flex;
         flex-wrap: wrap;
         gap: var(--bb-select-table-item-gap);
-        overflow: auto;
+        max-height: var(--bb-select-max-height);
+        overflow: hidden;
+
+        .multi-select-item-group-count,
+        .multi-select-item-group span {
+            border: solid 1px var(--bs-border-color);
+            border-radius: var(--bs-border-radius);
+            background-color: var(--bb-select-table-item-bg-color);
+            padding: var(--bb-select-table-item-padding);
+        }
 
         .multi-select-item-group {
             display: inline-flex;
             position: relative;
 
-            span {
-                border: solid 1px var(--bs-border-color);
-                border-radius: var(--bs-border-radius);
-                background-color: var(--bb-select-table-item-bg-color);
-                padding: var(--bb-select-table-item-padding);
-            }
-
             .multi-select-close {
                 border-top-right-radius: 0;
                 border-bottom-right-radius: 0;

From c89531d23c5d011220e22d2338d4a6cc52fa372a Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Fri, 6 Feb 2026 20:17:50 +0800
Subject: [PATCH 10/25] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E7=A4=BA?=
 =?UTF-8?q?=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/Samples/SelectTables.razor     | 28 +++++++++++++++++--
 .../Components/Samples/SelectTables.razor.cs  |  2 ++
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor b/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor
index bf3260a1fa1..10cb0fd0bd7 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor
+++ b/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor
@@ -9,7 +9,31 @@
     <section ignore>
         @((MarkupString)Localizer["NormalDesc"].Value)
     </section>
-    <SelectTable TItem="Foo" @bind-Value="@_foo" OnQueryAsync="OnQueryAsync" GetTextCallback="@GetTextCallback" TableMinWidth="300" IsClearable>
+    <SelectTable TItem="Foo" @bind-SelectedItems="@_selectedFoos" OnQueryAsync="OnQueryAsync"
+                 GetTextCallback="@GetTextCallback" TableMinWidth="300"
+                 IsMultipleSelect IsClearable>
+        <TableColumns>
+            <TableColumn @bind-Field="@context.Name"></TableColumn>
+            <TableColumn @bind-Field="@context.Address"></TableColumn>
+        </TableColumns>
+    </SelectTable>
+    <section ignore>
+        <div>
+            @foreach (var item in _selectedFoos)
+            {
+                <span>@item.Name</span>
+            }
+        </div>
+    </section>
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal">
+    <section ignore>
+        @((MarkupString)Localizer["NormalDesc"].Value)
+    </section>
+    <SelectTable TItem="Foo" @bind-Value="@_foo" OnQueryAsync="OnQueryAsync"
+                 GetTextCallback="@GetTextCallback" TableMinWidth="300"
+                 IsClearable>
         <TableColumns>
             <TableColumn @bind-Field="@context.Name"></TableColumn>
             <TableColumn @bind-Field="@context.Address"></TableColumn>
@@ -46,7 +70,7 @@
                 <div class="select-custom-header">
                     <div class="id">@context.Id</div>
                     <div class="name">@context.Name</div>
-                    <Light Color="@(context.Complete ? Color.Success : Color.Warning)"></Light>
+                    <Light Color="@(context.Complete? Color.Success: Color.Warning)"></Light>
                 </div>
                 <Divider />
                 <div class="select-custom-body">
diff --git a/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor.cs
index 8b3199e0271..ccfb36772e7 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor.cs
+++ b/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor.cs
@@ -34,6 +34,8 @@ public partial class SelectTables
 
     private readonly SelectTableMode Model = new();
 
+    private List<Foo> _selectedFoos = [];
+
     private static string? GetTextCallback(Foo foo) => foo.Name;
 
     private List<Foo> _items = default!;

From a1f9cd994e0c72805255b10326fec7573bbcdbf3 Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Fri, 6 Feb 2026 20:18:32 +0800
Subject: [PATCH 11/25] =?UTF-8?q?Revert=20"BootstrapInputNumber=E6=A0=BC?=
 =?UTF-8?q?=E5=BC=8F=E5=8C=96=E5=8D=83=E5=88=86=E4=BD=8D=E4=B8=8D=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E7=9A=84=E9=97=AE=E9=A2=98"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit 8446f14126c3347311ecfe15b8218e600daaf4fe.
---
 .../Components/Input/BootstrapInput.razor.js  | 26 +---------------
 .../InputNumber/BootstrapInputNumber.razor.cs | 30 -------------------
 2 files changed, 1 insertion(+), 55 deletions(-)

diff --git a/src/BootstrapBlazor/Components/Input/BootstrapInput.razor.js b/src/BootstrapBlazor/Components/Input/BootstrapInput.razor.js
index 57e925f26c8..7e826da835f 100644
--- a/src/BootstrapBlazor/Components/Input/BootstrapInput.razor.js
+++ b/src/BootstrapBlazor/Components/Input/BootstrapInput.razor.js
@@ -1,28 +1,4 @@
-import EventHandler from "../../modules/event-handler.js"
-
-
-export function init(id, invoke, method) {
-    const el = document.getElementById(id)
-    EventHandler.on(el, 'focus', e => {
-        const isString = e.target.getAttribute('type') === 'text';
-        const isNumber = e.target.classList('class').contains("input-number")
-        if (isString && isNumber) {
-            let value = e.target.value;
-            e.target.setAttribute('type', 'number');
-            e.target.value = value.split(',').join('');
-            invoke.invokeMethodAsync(method, true);
-        }
-    });
-    EventHandler.on(el, 'blur', e => {
-        const isString = e.target.getAttribute('type') === 'number';
-        const isNumber = e.target.classList('class').contains("input-number")
-        if (isString && isNumber) {
-            e.target.setAttribute('type', 'text');
-            invoke.invokeMethodAsync(method, false);
-        }
-
-    });
-}
+import EventHandler from "../../modules/event-handler.js"
 
 export function focus(id) {
     const el = document.getElementById(id)
diff --git a/src/BootstrapBlazor/Components/InputNumber/BootstrapInputNumber.razor.cs b/src/BootstrapBlazor/Components/InputNumber/BootstrapInputNumber.razor.cs
index 337257c24cd..de399f1bba6 100644
--- a/src/BootstrapBlazor/Components/InputNumber/BootstrapInputNumber.razor.cs
+++ b/src/BootstrapBlazor/Components/InputNumber/BootstrapInputNumber.razor.cs
@@ -12,7 +12,6 @@ namespace BootstrapBlazor.Components;
 /// <para lang="zh">An input component for editing numeric values. Supported numeric 类型s are <see cref="int"/>, <see cref="long"/>, <see cref="short"/>, <see cref="float"/>, <see cref="double"/>, <see cref="decimal"/></para>
 /// <para lang="en">An input component for editing numeric values. Supported numeric types are <see cref="int"/>, <see cref="long"/>, <see cref="short"/>, <see cref="float"/>, <see cref="double"/>, <see cref="decimal"/></para>
 /// </summary>
-[BootstrapModuleAutoLoader("Input/BootstrapInput.razor.js", JSObjectReference = true)]
 public partial class BootstrapInputNumber<TValue>
 {
     /// <summary>
@@ -30,7 +29,6 @@ public partial class BootstrapInputNumber<TValue>
     /// </summary>
     protected string? InputClassString => CssBuilder.Default("form-control")
         .AddClass(CssClass).AddClass(ValidCss)
-        .AddClass("input-number")
         .AddClass("input-number-fix", ShowButton)
         .AddClass($"border-{Color.ToDescriptionString()}", Color != Color.None)
         .AddClassFromAttributes(AdditionalAttributes)
@@ -122,34 +120,6 @@ protected override void OnInitialized()
         {
             _lastInputValueString ??= Value?.ToString();
         }
-
-
-    }
-
-    /// <summary>
-    /// 
-    /// <inheritdoc/>
-    /// </summary>
-    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, nameof(TriggerFormatValue));
-
-    /// <summary>
-    /// <para lang="zh">Trigger value changed event 回调. Trigger by JavaScript</para>
-    /// <para lang="en">Trigger value changed event callback. Trigger by JavaScript</para>
-    /// </summary>
-    /// <param name="focus"></param>
-    [JSInvokable]
-    public Task TriggerFormatValue(bool focus)
-    {
-        if (focus)
-        {
-            CurrentValueAsString = InternalFormat(Value) ?? "";
-        }
-        else
-        {
-            CurrentValueAsString = GetFormatString(Value) ?? "";
-        }
-        StateHasChanged();
-        return Task.CompletedTask;
     }
 
     /// <summary>

From 3aea48d737274d1b515cea0cdcdbb34871ca1bb0 Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Fri, 6 Feb 2026 21:36:23 +0800
Subject: [PATCH 12/25] =?UTF-8?q?refactor:=20=E5=A2=9E=E5=8A=A0=20GetDispl?=
 =?UTF-8?q?ayItems=20=E6=96=B9=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/Select/SelectTable.razor            | 14 +++++++-------
 .../Components/Select/SelectTable.razor.cs         | 11 +++++++++++
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/BootstrapBlazor/Components/Select/SelectTable.razor b/src/BootstrapBlazor/Components/Select/SelectTable.razor
index 7edf9ff5d4b..0d12f193c1a 100644
--- a/src/BootstrapBlazor/Components/Select/SelectTable.razor
+++ b/src/BootstrapBlazor/Components/Select/SelectTable.razor
@@ -16,13 +16,7 @@
             @if (IsMultipleSelect)
             {
                 <div class="@MultiItemsClassString" id="@InputId" style="@MultiItemsStyleString">
-                    @if (SelectedItems.Count > MultiSelectedItemsMaxDisplayCount)
-                    {
-                        <div class="multi-select-item-group-count">
-                            @GetCountText()
-                        </div>
-                    }
-                    @foreach (var item in SelectedItems.Take(MultiSelectedItemsMaxDisplayCount))
+                    @foreach (var item in GetDisplayItems())
                     {
                         <div class="multi-select-item-group">
                             <span class="multi-select-close" data-bb-index="@GetIndexString(item)">
@@ -31,6 +25,12 @@
                             <span class="multi-select-item">@GetText(item)</span>
                         </div>
                     }
+                    @if (SelectedItems.Count > MultiSelectedItemsMaxDisplayCount)
+                    {
+                        <div class="multi-select-item-group-count">
+                            @GetCountText()
+                        </div>
+                    }
                     @if (SelectedItems.Count == 0)
                     {
                         <div class="multi-select-item-ph">
diff --git a/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs b/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs
index 6cc43b250c3..5a87d22cf89 100644
--- a/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs
+++ b/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs
@@ -365,6 +365,17 @@ private async Task OnClearValue()
     /// </summary>
     public Task QueryAsync() => _table.QueryAsync();
 
+    private IEnumerable<TItem> GetDisplayItems()
+    {
+        IEnumerable<TItem> items = SelectedItems;
+
+        if (MultiSelectedItemsMaxDisplayCount > 0)
+        {
+            items = SelectedItems.Take(MultiSelectedItemsMaxDisplayCount);
+        }
+        return items;
+    }
+
     /// <summary>
     /// <para lang="zh">触发删除选项方法 由 Javascript 调用</para>
     /// <para lang="en">Trigger remove item method, called by Javascript</para>

From c87aae20e32548ef14309731919029d968fcec2c Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Fri, 6 Feb 2026 21:36:34 +0800
Subject: [PATCH 13/25] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E7=A4=BA?=
 =?UTF-8?q?=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/Samples/SelectTables.razor     | 48 ++++++++++---------
 .../Components/Samples/SelectTables.razor.css | 10 +++-
 2 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor b/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor
index 10cb0fd0bd7..fb8c8a22ce0 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor
+++ b/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor
@@ -5,28 +5,6 @@
 
 <h4>@Localizer["Intro"]</h4>
 
-<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal">
-    <section ignore>
-        @((MarkupString)Localizer["NormalDesc"].Value)
-    </section>
-    <SelectTable TItem="Foo" @bind-SelectedItems="@_selectedFoos" OnQueryAsync="OnQueryAsync"
-                 GetTextCallback="@GetTextCallback" TableMinWidth="300"
-                 IsMultipleSelect IsClearable>
-        <TableColumns>
-            <TableColumn @bind-Field="@context.Name"></TableColumn>
-            <TableColumn @bind-Field="@context.Address"></TableColumn>
-        </TableColumns>
-    </SelectTable>
-    <section ignore>
-        <div>
-            @foreach (var item in _selectedFoos)
-            {
-                <span>@item.Name</span>
-            }
-        </div>
-    </section>
-</DemoBlock>
-
 <DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal">
     <section ignore>
         @((MarkupString)Localizer["NormalDesc"].Value)
@@ -136,4 +114,30 @@
     </div>
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["IsMultipleSelectTitle"]" Introduction="@Localizer["IsMultipleSelectIntro"]" Name="IsMultipleSelect">
+    <section ignore>
+        <ul class="ul-demo">
+            <li>通过 <code>MultiSelectedItemsMaxHeight</code> 参数设置组件最大行高</li>
+            <li>通过 <code>MultiSelectedItemsMaxDisplayCount</code> 参数设置选中项显示总数量</li>
+            <li>通过 <code>@@bind-SelectedItems="SelectedItems"</code> 参数设置选中项集合，多选模式下不要使用 <code>Value</code></li>
+        </ul>
+    </section>
+    <SelectTable TItem="Foo" @bind-SelectedItems="@_selectedFoos" OnQueryAsync="OnQueryAsync"
+                 GetTextCallback="@GetTextCallback" TableMinWidth="300"
+                 IsMultipleSelect IsClearable>
+        <TableColumns>
+            <TableColumn @bind-Field="@context.Name"></TableColumn>
+            <TableColumn @bind-Field="@context.Address"></TableColumn>
+        </TableColumns>
+    </SelectTable>
+    <section ignore>
+        <div class="select-table-list">
+            @foreach (var item in _selectedFoos)
+            {
+                <div>@item.Name</div>
+            }
+        </div>
+    </section>
+</DemoBlock>
+
 <AttributeTable Type="typeof(SelectTable<>)" />
diff --git a/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor.css b/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor.css
index 448fc071fc9..a75a56a2abd 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor.css
+++ b/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor.css
@@ -1,4 +1,4 @@
-::deep .divider {
+::deep .divider {
     --bb-divider-margin: 1rem 0;
     --bb-divider-bg: #c0c4cc;
 }
@@ -54,3 +54,11 @@
     ::deep .select-custom-detail > div {
         margin-bottom: .5rem;
     }
+
+.select-table-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+    overflow: auto;
+    max-height: 120px;
+}

From fb25b2d9c2fc30900ef257dc8d06de68476dff01 Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Fri, 6 Feb 2026 21:45:31 +0800
Subject: [PATCH 14/25] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E8=B5=84?=
 =?UTF-8?q?=E6=BA=90=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/Samples/SelectTables.razor         |  6 +++---
 src/BootstrapBlazor.Server/Locales/en-US.json     | 15 ++++++++++-----
 src/BootstrapBlazor.Server/Locales/zh-CN.json     |  7 ++++++-
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor b/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor
index fb8c8a22ce0..31529a32283 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor
+++ b/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor
@@ -117,9 +117,9 @@
 <DemoBlock Title="@Localizer["IsMultipleSelectTitle"]" Introduction="@Localizer["IsMultipleSelectIntro"]" Name="IsMultipleSelect">
     <section ignore>
         <ul class="ul-demo">
-            <li>通过 <code>MultiSelectedItemsMaxHeight</code> 参数设置组件最大行高</li>
-            <li>通过 <code>MultiSelectedItemsMaxDisplayCount</code> 参数设置选中项显示总数量</li>
-            <li>通过 <code>@@bind-SelectedItems="SelectedItems"</code> 参数设置选中项集合，多选模式下不要使用 <code>Value</code></li>
+            <li>@((MarkupString)Localizer["IsMultipleDesc1"].Value)</li>
+            <li>@((MarkupString)Localizer["IsMultipleDesc2"].Value)</li>
+            <li>@((MarkupString)Localizer["IsMultipleDesc3"].Value)</li>
         </ul>
     </section>
     <SelectTable TItem="Foo" @bind-SelectedItems="@_selectedFoos" OnQueryAsync="OnQueryAsync"
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
index fdcdc59e371..e4feb684539 100644
--- a/src/BootstrapBlazor.Server/Locales/en-US.json
+++ b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -2053,7 +2053,7 @@
     "DropdownCascadeItem6": "Haidian",
     "DropdownCascadeItem7": "Jingan",
     "DropdownCascadeItem8": "Huangpu",
-    "DropdownItemsTemplateIntro": "You can customize all the content of the dropdown list by setting `<itemsTemplate>`. In this example, we use the `<DropdownItem>` component and `<DropdownDivider>` component to customize the dropdown list component.",
+    "DropdownItemsTemplateIntro": "You can customize all the content of the dropdown list by setting <itemsTemplate>`. In this example, we use the <DropdownItem>` component and <DropdownDivider>` component to customize the dropdown list component.",
     "DropdownItemsTemplateTitle": "Items Template",
     "DropdownItemTemplateIntro": "By setting <code>ItemTemplate</code>, you can customize the content displayed in the drop-down item. In this example, the <code>Tooltip</code> component is used to add a tooltip function when the mouse is hovered.",
     "DropdownItemTemplateTitle": "Item Template",
@@ -2766,13 +2766,13 @@
     "LabelsNormalDescription": "When two-way binding is not used",
     "LabelsNormalDescription2": "When using two-way binding",
     "LabelsNormalGroupBox1Tips1": "No settings in the first text box, no label",
-    "LabelsNormalGroupBox1Tips2": "The second text box setting <code>ShowLabel='true' DisplayText=``</code> displays a placeholder label without content",
+    "LabelsNormalGroupBox1Tips2": "The second text box setting <code>ShowLabel='true' DisplayText=`</code> displays a placeholder label without content",
     "LabelsNormalGroupBox1Tips3": "The third text box setting <code>ShowLabel='true' DisplayText='Name'</code> shows the set content label",
     "LabelsNormalGroupBox1Tips4": "The fourth text box setting <code>ShowLabel='true' DisplayText='@null'</code> displays a placeholder label without content",
     "LabelsNormalGroupBox1Title": "No two-way binding",
     "LabelsNormalGroupBox2Tips1": "The first text box is set to <code>@bind-Value='Dummy.Name'</code>, no label is displayed",
     "LabelsNormalGroupBox2Tips2": "The second text box setting <code>@bind-Value='Dummy.Name' ShowLabel='true' DisplayText='@Localizer[nameof(Foo.Address)]'</code> Display the contents of the setting",
-    "LabelsNormalGroupBox2Tips3": "The third text box setting <code>@bind-Value='Dummy.Name' ShowLabel='true' DisplayText=``</code> Show no content placeholder label",
+    "LabelsNormalGroupBox2Tips3": "The third text box setting <code>@bind-Value='Dummy.Name' ShowLabel='true' DisplayText=`</code> Show no content placeholder label",
     "LabelsNormalGroupBox2Tips4": "The fourth text box setting <code>@bind-Value='Dummy.Name' ShowLabel='true' DisplayText='@null'</code> Display the label content under the resource file mechanism<code>Label</code> code>",
     "LabelsNormalGroupBox2Title": "Two-way binding",
     "LabelsNormalIntro": "Suitable for data entry",
@@ -3948,7 +3948,12 @@
     "TemplateTitle": "Value Template",
     "Title": "Table Select",
     "ValidateFormIntro": "Intercept data when the value is empty",
-    "ValidateFormTitle": "ValidateForm"
+    "ValidateFormTitle": "ValidateForm",
+    "IsMultipleSelectTitle": "Multiple Select",
+    "IsMultipleSelectIntro": "Enable multi-selection using the parameter <code>IsMultipleSelect=\"true\"</code>.",
+    "IsMultipleDesc1": "Set the maximum row height of the component using the <code>MultiSelectedItemsMaxHeight</code> parameter.",
+    "IsMultipleDesc2": "The <code>MultiSelectedItemsMaxDisplayCount</code> parameter sets the total number of selected items to be displayed.",
+    "IsMultipleDesc3": "Set the selected item set using the <code>@bind-SelectedItems=\"SelectedItems\"</code> parameter. Do not use <code>Value</code> in multi-select mode."
   },
   "BootstrapBlazor.Server.Components.Samples.SelectTables+SelectTableMode": {
     "Foo.Required": "{0} is required."
@@ -5670,7 +5675,7 @@
   "BootstrapBlazor.Server.Components.Samples.UploadCards": {
     "ButtonUploadIntro": "Use <code>DefaultFileList</code> to set up uploaded content",
     "ButtonUploadTitle": "Basic usage",
-    "UploadActionButtonTemplateIntro": "Customize the action buttons on the card by setting the `<code>ActionButtonTemplate</code>` parameter (appending it to the end of the default button), and customize the action buttons on the card by setting the `<code>BeforeActionButtonTemplate</code>` parameter (insert it before the default button).",
+    "UploadActionButtonTemplateIntro": "Customize the action buttons on the card by setting the <code>ActionButtonTemplate</code>` parameter (appending it to the end of the default button), and customize the action buttons on the card by setting the <code>BeforeActionButtonTemplate</code>` parameter (insert it before the default button).",
     "UploadActionButtonTemplateTitle": "Custom action button",
     "UploadBase64Intro": "By setting the <code>PrevUrl</code> parameter value of the <code>UploadFile</code> instance, use the image content string in the <code>data:image/xxx;base64,XXXXX</code> format as the preview file path",
     "UploadBase64Title": "Base64 format",
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
index cc472b215bf..a4b934bbcf0 100644
--- a/src/BootstrapBlazor.Server/Locales/zh-CN.json
+++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -3948,7 +3948,12 @@
     "TemplateTitle": "显示模板",
     "Title": "TableSelect 表格选择器",
     "ValidateFormIntro": "下拉框未选择时，点击提交按钮时拦截。",
-    "ValidateFormTitle": "客户端验证"
+    "ValidateFormTitle": "客户端验证",
+    "IsMultipleSelectTitle": "多选",
+    "IsMultipleSelectIntro": "通过 <code>IsMultipleSelect=\"true\"</code> 参数开启多选",
+    "IsMultipleDesc1": "通过 <code>MultiSelectedItemsMaxHeight</code> 参数设置组件最大行高",
+    "IsMultipleDesc2": "通过 <code>MultiSelectedItemsMaxDisplayCount</code> 参数设置选中项显示总数量",
+    "IsMultipleDesc3": "通过 <code>@bind-SelectedItems=\"SelectedItems\"</code> 参数设置选中项集合，多选模式下不要使用 <code>Value</code>"
   },
   "BootstrapBlazor.Server.Components.Samples.SelectTables+SelectTableMode": {
     "Foo.Required": "{0} 是必填项"

From 1aa6ec8d6e7c43257a66d5a96956121c363cae18 Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Fri, 6 Feb 2026 22:11:51 +0800
Subject: [PATCH 15/25] =?UTF-8?q?test:=20=E6=9B=B4=E6=96=B0=E5=8D=95?=
 =?UTF-8?q?=E5=85=83=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/Select/SelectTable.razor.cs    |  4 +-
 test/UnitTest/Components/SelectTableTest.cs   | 78 +++++++++++++++++++
 2 files changed, 80 insertions(+), 2 deletions(-)

diff --git a/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs b/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs
index 5a87d22cf89..10814d8c029 100644
--- a/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs
+++ b/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs
@@ -130,7 +130,7 @@ namespace BootstrapBlazor.Components;
     /// <para lang="en">Gets or sets the maximum width of selected item in multiple selection mode. Default null</para>
     /// </summary>
     [Parameter]
-    public int? MultiSelectedItemMaxWidth { get; set; }
+    public string? MultiSelectedItemMaxWidth { get; set; }
 
     /// <summary>
     /// <para lang="zh">获得/设置 IIconTheme 服务实例</para>
@@ -165,7 +165,7 @@ namespace BootstrapBlazor.Components;
         .Build();
 
     private string? MultiItemsStyleString => CssBuilder.Default()
-        .AddClass($"--bb-select-table-item-width: {MultiSelectedItemMaxWidth};", MultiSelectedItemMaxWidth.HasValue)
+        .AddClass($"--bb-select-table-item-width: {MultiSelectedItemMaxWidth};", !string.IsNullOrEmpty(MultiSelectedItemMaxWidth))
         .AddClass($"--bb-select-max-height: {MultiSelectedItemsMaxHeight};", !string.IsNullOrEmpty(MultiSelectedItemsMaxHeight))
         .Build();
 
diff --git a/test/UnitTest/Components/SelectTableTest.cs b/test/UnitTest/Components/SelectTableTest.cs
index df1ab6efe09..475111b9547 100644
--- a/test/UnitTest/Components/SelectTableTest.cs
+++ b/test/UnitTest/Components/SelectTableTest.cs
@@ -606,6 +606,84 @@ public void EmptyTemplate_OK()
         cut.Contains("<div class=\"empty\"><div class=\"empty-telemplate\">empty-template</div></div>");
     }
 
+    [Fact]
+    public async Task IsMultipleSelect_Ok()
+    {
+        var localizer = Context.Services.GetRequiredService<IStringLocalizer<Foo>>();
+        var items = Foo.GenerateFoo(localizer);
+        var selectedItems = new List<Foo>()
+        {
+            items[0], items[1], items[2], items[3]
+        };
+        var cut = Context.Render<BootstrapBlazorRoot>(pb =>
+        {
+            pb.AddChildContent<SelectTable<Foo>>(pb =>
+            {
+                pb.Add(a => a.OnQueryAsync, options =>
+                {
+                    return Task.FromResult(new QueryData<Foo>()
+                    {
+                        Items = items,
+                        IsAdvanceSearch = true,
+                        IsFiltered = true,
+                        IsSearch = true,
+                        IsSorted = true
+                    });
+                });
+                pb.Add(a => a.IsMultipleSelect, true);
+                pb.Add(a => a.SelectedItems, selectedItems);
+                pb.Add(a => a.MultiSelectedItemsMaxHeight, "30px");
+                pb.Add(a => a.MultiSelectedItemsMaxDisplayCount, 2);
+                pb.Add(a => a.SelectedItemsChanged, EventCallback.Factory.Create<List<Foo>>(this, items => selectedItems = items));
+                pb.Add(a => a.GetTextCallback, foo => foo.Name);
+                pb.Add(a => a.TableColumns, foo => builder =>
+                {
+                    builder.OpenComponent<TableColumn<Foo, string>>(0);
+                    builder.AddAttribute(1, "Field", "Name");
+                    builder.AddAttribute(2, "FieldExpression", Utility.GenerateValueExpression(foo, "Name", typeof(string)));
+                    builder.CloseComponent();
+                });
+            });
+        });
+
+        cut.Contains("multi-select-items");
+        cut.Contains("multi-select-item-group-count");
+        cut.Contains("+ 2");
+        cut.Contains("--bb-select-max-height: 30px;");
+        cut.DoesNotContain("--bb-select-table-item-width: ");
+
+        var table = cut.FindComponent<SelectTable<Foo>>();
+        Assert.NotNull(table);
+
+        table.Render(pb =>
+        {
+            pb.Add(a => a.MultiSelectedItemMaxWidth, "120px");
+        });
+        cut.Contains("--bb-select-table-item-width: 120px;");
+
+        await cut.InvokeAsync(() => table.Instance.TriggerRemoveItem(0));
+        Assert.Equal(3, selectedItems.Count);
+
+        await cut.InvokeAsync(() => table.Instance.TriggerRemoveItem(0));
+        Assert.Equal(2, selectedItems.Count);
+
+        cut.Render();
+        cut.DoesNotContain("multi-select-item-group-count");
+
+        await cut.InvokeAsync(() => table.Instance.TriggerRemoveItem(-1));
+        Assert.Equal(2, selectedItems.Count);
+
+        await cut.InvokeAsync(() => table.Instance.TriggerRemoveItem(2));
+        Assert.Equal(2, selectedItems.Count);
+        cut.DoesNotContain("multi-select-item-ph");
+
+        table.Render(pb =>
+        {
+            pb.Add(a => a.SelectedItems, null);
+        });
+        cut.Contains("multi-select-item-ph");
+    }
+
     private static Task<QueryData<Foo>> OnFilterQueryAsync(QueryPageOptions options, IEnumerable<Foo> _filterItems)
     {
         _filterItems = _filterItems.Where(options.ToFilterFunc<Foo>());

From 7737da2a4328dee198818331509aa148503aaeb0 Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Fri, 6 Feb 2026 22:33:37 +0800
Subject: [PATCH 16/25] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E7=A6=81?=
 =?UTF-8?q?=E7=94=A8=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/BootstrapBlazor/Components/Select/SelectTable.razor.js   | 5 +++++
 src/BootstrapBlazor/Components/Select/SelectTable.razor.scss | 5 +++++
 2 files changed, 10 insertions(+)

diff --git a/src/BootstrapBlazor/Components/Select/SelectTable.razor.js b/src/BootstrapBlazor/Components/Select/SelectTable.razor.js
index 46386cc0d6a..9b96539d770 100644
--- a/src/BootstrapBlazor/Components/Select/SelectTable.razor.js
+++ b/src/BootstrapBlazor/Components/Select/SelectTable.razor.js
@@ -60,6 +60,11 @@ export function init(id, invoke) {
         e.preventDefault();
         e.stopPropagation();
 
+        const disabled = el.classList.contains('disabled');
+        if (disabled) {
+            return;
+        }
+
         const index = e.delegateTarget.getAttribute('data-bb-index');
         if (index) {
             const value = parseInt(index);
diff --git a/src/BootstrapBlazor/Components/Select/SelectTable.razor.scss b/src/BootstrapBlazor/Components/Select/SelectTable.razor.scss
index 333a822b7f7..e39dfa8e485 100644
--- a/src/BootstrapBlazor/Components/Select/SelectTable.razor.scss
+++ b/src/BootstrapBlazor/Components/Select/SelectTable.razor.scss
@@ -16,6 +16,11 @@
             background-color: var(--bs-secondary-bg);
             cursor: not-allowed;
         }
+
+        .multi-select-items {
+            background-color: var(--bs-secondary-bg);
+            cursor: not-allowed;
+        }
     }
 
     &:not(.disabled) .multi-select-items .multi-select-close:hover {

From 72b52f8f34d19006f63b51d024c95f72c6f9ff51 Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Fri, 6 Feb 2026 22:36:06 +0800
Subject: [PATCH 17/25] chore: bump version 10.3.2-beta01

---
 src/BootstrapBlazor/BootstrapBlazor.csproj | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj
index 81d8957de88..5f06f943ea2 100644
--- a/src/BootstrapBlazor/BootstrapBlazor.csproj
+++ b/src/BootstrapBlazor/BootstrapBlazor.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>10.3.1</Version>
+    <Version>10.3.2-beta01</Version>
   </PropertyGroup>
 
   <ItemGroup>

From 98c3a0b4680a07bbfd36e3ea5cd874a30c8ed3e2 Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Fri, 6 Feb 2026 22:39:22 +0800
Subject: [PATCH 18/25] =?UTF-8?q?revert:=20=E6=92=A4=E9=94=80=E6=9B=B4?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/BootstrapBlazor.Server/Locales/en-US.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
index e4feb684539..b864c9b363c 100644
--- a/src/BootstrapBlazor.Server/Locales/en-US.json
+++ b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -2766,13 +2766,13 @@
     "LabelsNormalDescription": "When two-way binding is not used",
     "LabelsNormalDescription2": "When using two-way binding",
     "LabelsNormalGroupBox1Tips1": "No settings in the first text box, no label",
-    "LabelsNormalGroupBox1Tips2": "The second text box setting <code>ShowLabel='true' DisplayText=`</code> displays a placeholder label without content",
+    "LabelsNormalGroupBox1Tips2": "The second text box setting <code>ShowLabel='true' DisplayText=''</code> displays a placeholder label without content",
     "LabelsNormalGroupBox1Tips3": "The third text box setting <code>ShowLabel='true' DisplayText='Name'</code> shows the set content label",
     "LabelsNormalGroupBox1Tips4": "The fourth text box setting <code>ShowLabel='true' DisplayText='@null'</code> displays a placeholder label without content",
     "LabelsNormalGroupBox1Title": "No two-way binding",
     "LabelsNormalGroupBox2Tips1": "The first text box is set to <code>@bind-Value='Dummy.Name'</code>, no label is displayed",
     "LabelsNormalGroupBox2Tips2": "The second text box setting <code>@bind-Value='Dummy.Name' ShowLabel='true' DisplayText='@Localizer[nameof(Foo.Address)]'</code> Display the contents of the setting",
-    "LabelsNormalGroupBox2Tips3": "The third text box setting <code>@bind-Value='Dummy.Name' ShowLabel='true' DisplayText=`</code> Show no content placeholder label",
+    "LabelsNormalGroupBox2Tips3": "The third text box setting <code>@bind-Value='Dummy.Name' ShowLabel='true' DisplayText=''</code> Show no content placeholder label",
     "LabelsNormalGroupBox2Tips4": "The fourth text box setting <code>@bind-Value='Dummy.Name' ShowLabel='true' DisplayText='@null'</code> Display the label content under the resource file mechanism<code>Label</code> code>",
     "LabelsNormalGroupBox2Title": "Two-way binding",
     "LabelsNormalIntro": "Suitable for data entry",

From 9f578209046acd2897015da9df6e7029df0d006b Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Fri, 6 Feb 2026 22:41:36 +0800
Subject: [PATCH 19/25] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E8=B5=84?=
 =?UTF-8?q?=E6=BA=90=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/BootstrapBlazor.Server/Locales/en-US.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
index b864c9b363c..618188c2e5a 100644
--- a/src/BootstrapBlazor.Server/Locales/en-US.json
+++ b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -2053,7 +2053,7 @@
     "DropdownCascadeItem6": "Haidian",
     "DropdownCascadeItem7": "Jingan",
     "DropdownCascadeItem8": "Huangpu",
-    "DropdownItemsTemplateIntro": "You can customize all the content of the dropdown list by setting <itemsTemplate>`. In this example, we use the <DropdownItem>` component and <DropdownDivider>` component to customize the dropdown list component.",
+    "DropdownItemsTemplateIntro": "You can customize all the content of the dropdown list by setting <code>ItemsTemplate</code>. In this example, we use the <code>DropdownItem</code> component and <code>DropdownDivider</code> component to customize the dropdown list component.",
     "DropdownItemsTemplateTitle": "Items Template",
     "DropdownItemTemplateIntro": "By setting <code>ItemTemplate</code>, you can customize the content displayed in the drop-down item. In this example, the <code>Tooltip</code> component is used to add a tooltip function when the mouse is hovered.",
     "DropdownItemTemplateTitle": "Item Template",

From e612164d1f90390ce707fd245e51466a21eaf099 Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Fri, 6 Feb 2026 22:43:34 +0800
Subject: [PATCH 20/25] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E8=B5=84?=
 =?UTF-8?q?=E6=BA=90=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/BootstrapBlazor.Server/Locales/en-US.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
index 618188c2e5a..630c8bce98e 100644
--- a/src/BootstrapBlazor.Server/Locales/en-US.json
+++ b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -4126,7 +4126,7 @@
     "SpeechDescription2": "When using this component, you need to reference its component package",
     "SpeechGroupBoxHeaderText": "command panel",
     "SpeechGroupBoxTitle": "Command output area",
-    "SpeechLi1": "Click <b>start</b> After pressing the button, speak to the computer <b><i>'Please turn on the light for me'</i></b>",
+    "SpeechLi1": "Click <b>start</b> After pressing the button, speak to the computer <b><i>Please turn on the light for me</i></b>",
     "SpeechLi2": "After the computer receives the command, it will ask <b><i>Are you sure you want to turn on the light? Please confirm!</i></b>",
     "SpeechLi3": "You speak to the computer： <b><i>confirm</i></b>",
     "SpeechLi4": "The computer executes the command and enters it in the text box below <b><i>has been opened for you</i></b> text",
@@ -5675,7 +5675,7 @@
   "BootstrapBlazor.Server.Components.Samples.UploadCards": {
     "ButtonUploadIntro": "Use <code>DefaultFileList</code> to set up uploaded content",
     "ButtonUploadTitle": "Basic usage",
-    "UploadActionButtonTemplateIntro": "Customize the action buttons on the card by setting the <code>ActionButtonTemplate</code>` parameter (appending it to the end of the default button), and customize the action buttons on the card by setting the <code>BeforeActionButtonTemplate</code>` parameter (insert it before the default button).",
+    "UploadActionButtonTemplateIntro": "Customize the action buttons on the card by setting the <code>ActionButtonTemplate</code> parameter (appending it to the end of the default button), and customize the action buttons on the card by setting the <code>BeforeActionButtonTemplate</code> parameter (insert it before the default button).",
     "UploadActionButtonTemplateTitle": "Custom action button",
     "UploadBase64Intro": "By setting the <code>PrevUrl</code> parameter value of the <code>UploadFile</code> instance, use the image content string in the <code>data:image/xxx;base64,XXXXX</code> format as the preview file path",
     "UploadBase64Title": "Base64 format",

From ed049e71a92c81b693ae32cf21f9266f2baba73d Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Fri, 6 Feb 2026 22:44:35 +0800
Subject: [PATCH 21/25] =?UTF-8?q?doc:=20=E8=B5=84=E6=BA=90=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E9=94=AE=E5=80=BC=E6=8E=92=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/BootstrapBlazor.Server/Locales/en-US.json | 12 ++++++------
 src/BootstrapBlazor.Server/Locales/zh-CN.json | 12 ++++++------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
index 630c8bce98e..73c7d310b4e 100644
--- a/src/BootstrapBlazor.Server/Locales/en-US.json
+++ b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -3937,6 +3937,11 @@
     "Intro": "The dropdown box is a table used to display the selection requirements for complex types",
     "IsDisabledIntro": "When you set the <code>IsDisabled</code> property value to <code>true</code>, the component suppresses select",
     "IsDisabledTitle": "Disabled",
+    "IsMultipleDesc1": "Set the maximum row height of the component using the <code>MultiSelectedItemsMaxHeight</code> parameter.",
+    "IsMultipleDesc2": "The <code>MultiSelectedItemsMaxDisplayCount</code> parameter sets the total number of selected items to be displayed.",
+    "IsMultipleDesc3": "Set the selected item set using the <code>@bind-SelectedItems=\"SelectedItems\"</code> parameter. Do not use <code>Value</code> in multi-select mode.",
+    "IsMultipleSelectIntro": "Enable multi-selection using the parameter <code>IsMultipleSelect=\"true\"</code>.",
+    "IsMultipleSelectTitle": "Multiple Select",
     "NormalDesc": "You can use <code>IsClearable</code> to control whether to display the clear button. The default value is <code>false</code>",
     "NormalIntro": "Suitable for candidates with a relatively large amount of information, presenting information using <code>Table</code>",
     "NormalTitle": "Basic usage",
@@ -3948,12 +3953,7 @@
     "TemplateTitle": "Value Template",
     "Title": "Table Select",
     "ValidateFormIntro": "Intercept data when the value is empty",
-    "ValidateFormTitle": "ValidateForm",
-    "IsMultipleSelectTitle": "Multiple Select",
-    "IsMultipleSelectIntro": "Enable multi-selection using the parameter <code>IsMultipleSelect=\"true\"</code>.",
-    "IsMultipleDesc1": "Set the maximum row height of the component using the <code>MultiSelectedItemsMaxHeight</code> parameter.",
-    "IsMultipleDesc2": "The <code>MultiSelectedItemsMaxDisplayCount</code> parameter sets the total number of selected items to be displayed.",
-    "IsMultipleDesc3": "Set the selected item set using the <code>@bind-SelectedItems=\"SelectedItems\"</code> parameter. Do not use <code>Value</code> in multi-select mode."
+    "ValidateFormTitle": "ValidateForm"
   },
   "BootstrapBlazor.Server.Components.Samples.SelectTables+SelectTableMode": {
     "Foo.Required": "{0} is required."
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
index a4b934bbcf0..4462775960c 100644
--- a/src/BootstrapBlazor.Server/Locales/zh-CN.json
+++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -3937,6 +3937,11 @@
     "Intro": "下拉框为表格用于展示复杂类型的选择需求",
     "IsDisabledIntro": "设置 <code>IsDisabled</code> 属性值为 <code>true</code> 时，组件禁止选择",
     "IsDisabledTitle": "禁用",
+    "IsMultipleDesc1": "通过 <code>MultiSelectedItemsMaxHeight</code> 参数设置组件最大行高",
+    "IsMultipleDesc2": "通过 <code>MultiSelectedItemsMaxDisplayCount</code> 参数设置选中项显示总数量",
+    "IsMultipleDesc3": "通过 <code>@bind-SelectedItems=\"SelectedItems\"</code> 参数设置选中项集合，多选模式下不要使用 <code>Value</code>",
+    "IsMultipleSelectIntro": "通过 <code>IsMultipleSelect=\"true\"</code> 参数开启多选",
+    "IsMultipleSelectTitle": "多选",
     "NormalDesc": "可通过 <code>IsClearable</code> 控制是否显示清除小按钮，默认值 <code>false</code>",
     "NormalIntro": "适用于候选项信息量比较大，用 <code>Table</code> 呈现信息量",
     "NormalTitle": "基本功能",
@@ -3948,12 +3953,7 @@
     "TemplateTitle": "显示模板",
     "Title": "TableSelect 表格选择器",
     "ValidateFormIntro": "下拉框未选择时，点击提交按钮时拦截。",
-    "ValidateFormTitle": "客户端验证",
-    "IsMultipleSelectTitle": "多选",
-    "IsMultipleSelectIntro": "通过 <code>IsMultipleSelect=\"true\"</code> 参数开启多选",
-    "IsMultipleDesc1": "通过 <code>MultiSelectedItemsMaxHeight</code> 参数设置组件最大行高",
-    "IsMultipleDesc2": "通过 <code>MultiSelectedItemsMaxDisplayCount</code> 参数设置选中项显示总数量",
-    "IsMultipleDesc3": "通过 <code>@bind-SelectedItems=\"SelectedItems\"</code> 参数设置选中项集合，多选模式下不要使用 <code>Value</code>"
+    "ValidateFormTitle": "客户端验证"
   },
   "BootstrapBlazor.Server.Components.Samples.SelectTables+SelectTableMode": {
     "Foo.Required": "{0} 是必填项"

From 0fdff6674199e3618f91a154488959fd6c61246d Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Fri, 6 Feb 2026 22:57:02 +0800
Subject: [PATCH 22/25] =?UTF-8?q?doc:=20=E5=A2=9E=E5=8A=A0=E5=8F=82?=
 =?UTF-8?q?=E6=95=B0=E8=AF=B4=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/Samples/SelectTables.razor                  | 1 +
 src/BootstrapBlazor.Server/Locales/en-US.json              | 7 ++++---
 src/BootstrapBlazor.Server/Locales/zh-CN.json              | 7 ++++---
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor b/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor
index 31529a32283..ec1ba8a9f6e 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor
+++ b/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor
@@ -120,6 +120,7 @@
             <li>@((MarkupString)Localizer["IsMultipleDesc1"].Value)</li>
             <li>@((MarkupString)Localizer["IsMultipleDesc2"].Value)</li>
             <li>@((MarkupString)Localizer["IsMultipleDesc3"].Value)</li>
+            <li>@((MarkupString)Localizer["IsMultipleDesc4"].Value)</li>
         </ul>
     </section>
     <SelectTable TItem="Foo" @bind-SelectedItems="@_selectedFoos" OnQueryAsync="OnQueryAsync"
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
index 73c7d310b4e..78e4c53cf18 100644
--- a/src/BootstrapBlazor.Server/Locales/en-US.json
+++ b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -3937,9 +3937,10 @@
     "Intro": "The dropdown box is a table used to display the selection requirements for complex types",
     "IsDisabledIntro": "When you set the <code>IsDisabled</code> property value to <code>true</code>, the component suppresses select",
     "IsDisabledTitle": "Disabled",
-    "IsMultipleDesc1": "Set the maximum row height of the component using the <code>MultiSelectedItemsMaxHeight</code> parameter.",
-    "IsMultipleDesc2": "The <code>MultiSelectedItemsMaxDisplayCount</code> parameter sets the total number of selected items to be displayed.",
-    "IsMultipleDesc3": "Set the selected item set using the <code>@bind-SelectedItems=\"SelectedItems\"</code> parameter. Do not use <code>Value</code> in multi-select mode.",
+    "IsMultipleDesc1": "Set the maximum width of the selected item using the <code>MultiSelectedItemMaxWidth</code> parameter.",
+    "IsMultipleDesc2": "Set the maximum row height of the component using the <code>MultiSelectedItemsMaxHeight</code> parameter.",
+    "IsMultipleDesc3": "The <code>MultiSelectedItemsMaxDisplayCount</code> parameter sets the total number of selected items to be displayed.",
+    "IsMultipleDesc4": "Set the selected item set using the <code>@bind-SelectedItems=\"SelectedItems\"</code> parameter. Do not use <code>Value</code> in multi-select mode.",
     "IsMultipleSelectIntro": "Enable multi-selection using the parameter <code>IsMultipleSelect=\"true\"</code>.",
     "IsMultipleSelectTitle": "Multiple Select",
     "NormalDesc": "You can use <code>IsClearable</code> to control whether to display the clear button. The default value is <code>false</code>",
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
index 4462775960c..e34f1fe98c9 100644
--- a/src/BootstrapBlazor.Server/Locales/zh-CN.json
+++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -3937,9 +3937,10 @@
     "Intro": "下拉框为表格用于展示复杂类型的选择需求",
     "IsDisabledIntro": "设置 <code>IsDisabled</code> 属性值为 <code>true</code> 时，组件禁止选择",
     "IsDisabledTitle": "禁用",
-    "IsMultipleDesc1": "通过 <code>MultiSelectedItemsMaxHeight</code> 参数设置组件最大行高",
-    "IsMultipleDesc2": "通过 <code>MultiSelectedItemsMaxDisplayCount</code> 参数设置选中项显示总数量",
-    "IsMultipleDesc3": "通过 <code>@bind-SelectedItems=\"SelectedItems\"</code> 参数设置选中项集合，多选模式下不要使用 <code>Value</code>",
+    "IsMultipleDesc1": "通过 <code>MultiSelectedItemMaxWidth</code> 参数设置选中项最大宽度",
+    "IsMultipleDesc2": "通过 <code>MultiSelectedItemsMaxHeight</code> 参数设置组件最大行高",
+    "IsMultipleDesc3": "通过 <code>MultiSelectedItemsMaxDisplayCount</code> 参数设置选中项显示总数量",
+    "IsMultipleDesc4": "通过 <code>@bind-SelectedItems=\"SelectedItems\"</code> 参数设置选中项集合，多选模式下不要使用 <code>Value</code>",
     "IsMultipleSelectIntro": "通过 <code>IsMultipleSelect=\"true\"</code> 参数开启多选",
     "IsMultipleSelectTitle": "多选",
     "NormalDesc": "可通过 <code>IsClearable</code> 控制是否显示清除小按钮，默认值 <code>false</code>",

From 1e5e13ca766249c9f06df9f78907643a90453d60 Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Sat, 7 Feb 2026 09:47:24 +0800
Subject: [PATCH 23/25] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20MultiSelecte?=
 =?UTF-8?q?dItemsMaxDisplayCountColor=20=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/Select/SelectTable.razor               |  2 +-
 .../Components/Select/SelectTable.razor.cs            | 11 +++++++++++
 .../Components/Select/SelectTable.razor.scss          | 10 +++++++++-
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/BootstrapBlazor/Components/Select/SelectTable.razor b/src/BootstrapBlazor/Components/Select/SelectTable.razor
index 0d12f193c1a..2030f8ac355 100644
--- a/src/BootstrapBlazor/Components/Select/SelectTable.razor
+++ b/src/BootstrapBlazor/Components/Select/SelectTable.razor
@@ -27,7 +27,7 @@
                     }
                     @if (SelectedItems.Count > MultiSelectedItemsMaxDisplayCount)
                     {
-                        <div class="multi-select-item-group-count">
+                        <div class="@MultiSelectedItemCountClassString">
                             @GetCountText()
                         </div>
                     }
diff --git a/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs b/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs
index 10814d8c029..fbe44f5b508 100644
--- a/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs
+++ b/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs
@@ -36,6 +36,13 @@ namespace BootstrapBlazor.Components;
     [Parameter]
     public int MultiSelectedItemsMaxDisplayCount { get; set; } = 8;
 
+    /// <summary>
+    /// <para lang="zh">获得/设置 多选模式下组件显示最大数量标签颜色，默认值 <see cref="Color.None"/> 未设置</para>
+    /// <para lang="en">Gets or sets the color of maximum number of components is displayed in multiple selection mode. Default value is <see cref="Color.None"/></para>
+    /// </summary>
+    [Parameter]
+    public Color MultiSelectedItemsMaxDisplayCountColor { get; set; } = Color.None;
+
     /// <summary>
     /// <para lang="zh">获得/设置 多选模式下已选择项集合 默认 null</para>
     /// <para lang="en">Gets or sets the selected items collection in multiple selection mode. Default null</para>
@@ -169,6 +176,10 @@ namespace BootstrapBlazor.Components;
         .AddClass($"--bb-select-max-height: {MultiSelectedItemsMaxHeight};", !string.IsNullOrEmpty(MultiSelectedItemsMaxHeight))
         .Build();
 
+    private string? MultiSelectedItemCountClassString => CssBuilder.Default("multi-select-item-group-count")
+        .AddClass($"bg-{MultiSelectedItemsMaxDisplayCountColor.ToDescriptionString()}", MultiSelectedItemsMaxDisplayCountColor != Color.None)
+        .Build();
+
     private string? AppendClassString => CssBuilder.Default("form-select-append")
         .AddClass($"text-{Color.ToDescriptionString()}", Color != Color.None && !IsDisabled && !IsValid.HasValue)
         .AddClass($"text-success", IsValid.HasValue && IsValid.Value)
diff --git a/src/BootstrapBlazor/Components/Select/SelectTable.razor.scss b/src/BootstrapBlazor/Components/Select/SelectTable.razor.scss
index e39dfa8e485..888e55cd93b 100644
--- a/src/BootstrapBlazor/Components/Select/SelectTable.razor.scss
+++ b/src/BootstrapBlazor/Components/Select/SelectTable.razor.scss
@@ -4,6 +4,7 @@
     --bb-select-table-item-hover-bg-color: rgba(var(--bs-body-color-rgb), .3);
     --bb-select-table-item-padding: 2px 6px;
     --bb-select-table-item-gap: 3px;
+    --bb-select-table-item-count-bg-color: var(--bb-select-table-item-bg-color);
 
     .dropdown-toggle {
         .is-display {
@@ -40,14 +41,21 @@
         .multi-select-item-group span {
             border: solid 1px var(--bs-border-color);
             border-radius: var(--bs-border-radius);
-            background-color: var(--bb-select-table-item-bg-color);
             padding: var(--bb-select-table-item-padding);
         }
 
+        .multi-select-item-group-count {
+            background-color: var(--bb-select-table-item-count-bg-color);
+        }
+
         .multi-select-item-group {
             display: inline-flex;
             position: relative;
 
+            span {
+                background-color: var(--bb-select-table-item-bg-color);
+            }
+
             .multi-select-close {
                 border-top-right-radius: 0;
                 border-bottom-right-radius: 0;

From a18a04c9538cd32ae6e5fddda116cf5ab2c216ec Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Sat, 7 Feb 2026 09:47:40 +0800
Subject: [PATCH 24/25] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E7=A4=BA?=
 =?UTF-8?q?=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/Samples/SelectTables.razor                    | 3 ++-
 src/BootstrapBlazor.Server/Locales/en-US.json                | 5 +++--
 src/BootstrapBlazor.Server/Locales/zh-CN.json                | 3 ++-
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor b/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor
index ec1ba8a9f6e..c3c3df2fce3 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor
+++ b/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor
@@ -121,11 +121,12 @@
             <li>@((MarkupString)Localizer["IsMultipleDesc2"].Value)</li>
             <li>@((MarkupString)Localizer["IsMultipleDesc3"].Value)</li>
             <li>@((MarkupString)Localizer["IsMultipleDesc4"].Value)</li>
+            <li>@((MarkupString)Localizer["IsMultipleDesc5"].Value)</li>
         </ul>
     </section>
     <SelectTable TItem="Foo" @bind-SelectedItems="@_selectedFoos" OnQueryAsync="OnQueryAsync"
                  GetTextCallback="@GetTextCallback" TableMinWidth="300"
-                 IsMultipleSelect IsClearable>
+                 IsMultipleSelect IsClearable MultiSelectedItemsMaxDisplayCountColor="Color.Warning">
         <TableColumns>
             <TableColumn @bind-Field="@context.Name"></TableColumn>
             <TableColumn @bind-Field="@context.Address"></TableColumn>
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
index 78e4c53cf18..56ac19e19e7 100644
--- a/src/BootstrapBlazor.Server/Locales/en-US.json
+++ b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -3939,8 +3939,9 @@
     "IsDisabledTitle": "Disabled",
     "IsMultipleDesc1": "Set the maximum width of the selected item using the <code>MultiSelectedItemMaxWidth</code> parameter.",
     "IsMultipleDesc2": "Set the maximum row height of the component using the <code>MultiSelectedItemsMaxHeight</code> parameter.",
-    "IsMultipleDesc3": "The <code>MultiSelectedItemsMaxDisplayCount</code> parameter sets the total number of selected items to be displayed.",
-    "IsMultipleDesc4": "Set the selected item set using the <code>@bind-SelectedItems=\"SelectedItems\"</code> parameter. Do not use <code>Value</code> in multi-select mode.",
+    "IsMultipleDesc3": "The <code>MultiSelectedItemsMaxDisplayCount</code> parameter sets the total number of selected items to be displayed. To customize the color, please set the variable <code>--bb-select-table-item-count-bg-color</code> in your <code>CSS</code>.",
+    "IsMultipleDesc4": "The <code>MultiSelectedItemsMaxDisplayCountColor</code> parameter sets the color of total number of selected items to be displayed.",
+    "IsMultipleDesc5": "Set the selected item set using the <code>@bind-SelectedItems=\"SelectedItems\"</code> parameter. Do not use <code>Value</code> in multi-select mode.",
     "IsMultipleSelectIntro": "Enable multi-selection using the parameter <code>IsMultipleSelect=\"true\"</code>.",
     "IsMultipleSelectTitle": "Multiple Select",
     "NormalDesc": "You can use <code>IsClearable</code> to control whether to display the clear button. The default value is <code>false</code>",
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
index e34f1fe98c9..cb132bade5e 100644
--- a/src/BootstrapBlazor.Server/Locales/zh-CN.json
+++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -3940,7 +3940,8 @@
     "IsMultipleDesc1": "通过 <code>MultiSelectedItemMaxWidth</code> 参数设置选中项最大宽度",
     "IsMultipleDesc2": "通过 <code>MultiSelectedItemsMaxHeight</code> 参数设置组件最大行高",
     "IsMultipleDesc3": "通过 <code>MultiSelectedItemsMaxDisplayCount</code> 参数设置选中项显示总数量",
-    "IsMultipleDesc4": "通过 <code>@bind-SelectedItems=\"SelectedItems\"</code> 参数设置选中项集合，多选模式下不要使用 <code>Value</code>",
+    "IsMultipleDesc4": "通过 <code>MultiSelectedItemsMaxDisplayCountColor</code> 参数设置选中项显示总数量标签颜色，如需自定义颜色请设置 <code>css</code> 变量 <code>--bb-select-table-item-count-bg-color</code>",
+    "IsMultipleDesc5": "通过 <code>@bind-SelectedItems=\"SelectedItems\"</code> 参数设置选中项集合，多选模式下不要使用 <code>Value</code>",
     "IsMultipleSelectIntro": "通过 <code>IsMultipleSelect=\"true\"</code> 参数开启多选",
     "IsMultipleSelectTitle": "多选",
     "NormalDesc": "可通过 <code>IsClearable</code> 控制是否显示清除小按钮，默认值 <code>false</code>",

From a534cadf9f3684516e4af2dc6cdcb8ecf7a40315 Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Sat, 7 Feb 2026 09:50:36 +0800
Subject: [PATCH 25/25] =?UTF-8?q?test:=20=E5=A2=9E=E5=8A=A0=E5=8D=95?=
 =?UTF-8?q?=E5=85=83=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 test/UnitTest/Components/SelectTableTest.cs | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/test/UnitTest/Components/SelectTableTest.cs b/test/UnitTest/Components/SelectTableTest.cs
index 475111b9547..fbf72f52506 100644
--- a/test/UnitTest/Components/SelectTableTest.cs
+++ b/test/UnitTest/Components/SelectTableTest.cs
@@ -634,6 +634,7 @@ public async Task IsMultipleSelect_Ok()
                 pb.Add(a => a.SelectedItems, selectedItems);
                 pb.Add(a => a.MultiSelectedItemsMaxHeight, "30px");
                 pb.Add(a => a.MultiSelectedItemsMaxDisplayCount, 2);
+                pb.Add(a => a.MultiSelectedItemsMaxDisplayCountColor, Color.Warning);
                 pb.Add(a => a.SelectedItemsChanged, EventCallback.Factory.Create<List<Foo>>(this, items => selectedItems = items));
                 pb.Add(a => a.GetTextCallback, foo => foo.Name);
                 pb.Add(a => a.TableColumns, foo => builder =>
@@ -647,7 +648,7 @@ public async Task IsMultipleSelect_Ok()
         });
 
         cut.Contains("multi-select-items");
-        cut.Contains("multi-select-item-group-count");
+        cut.Contains("multi-select-item-group-count bg-warning");
         cut.Contains("+ 2");
         cut.Contains("--bb-select-max-height: 30px;");
         cut.DoesNotContain("--bb-select-table-item-width: ");
@@ -669,6 +670,7 @@ public async Task IsMultipleSelect_Ok()
 
         cut.Render();
         cut.DoesNotContain("multi-select-item-group-count");
+        cut.DoesNotContain("bg-warning");
 
         await cut.InvokeAsync(() => table.Instance.TriggerRemoveItem(-1));
         Assert.Equal(2, selectedItems.Count);