From 0d49f238172414368a713e7e5237b02edb66bd49 Mon Sep 17 00:00:00 2001
From: Argo-Asicotech <argo@163.com>
Date: Sun, 16 Oct 2022 15:17:44 +0800
Subject: [PATCH 1/8] =?UTF-8?q?fix:=20=E5=A2=9E=E5=8A=A0=20CustomClass=20?=
 =?UTF-8?q?=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/Select/MultiSelect.razor       |  4 +--
 .../Components/Select/MultiSelect.razor.cs    |  2 +-
 .../Components/Select/PopoverSelectBase.cs    | 25 +++++++++++++++----
 .../Components/Select/Select.razor            |  4 +--
 .../Components/Select/Select.razor.cs         |  2 +-
 .../Components/Select/SelectBase.cs           | 11 ++++++--
 .../Components/Select/SelectTree.razor        |  4 +--
 7 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/src/BootstrapBlazor/Components/Select/MultiSelect.razor b/src/BootstrapBlazor/Components/Select/MultiSelect.razor
index 62c434b5f..5665847f3 100644
--- a/src/BootstrapBlazor/Components/Select/MultiSelect.razor
+++ b/src/BootstrapBlazor/Components/Select/MultiSelect.razor
@@ -7,7 +7,7 @@
     <BootstrapLabel required="@Required" for="@Id" ShowLabelTooltip="ShowLabelTooltip" Value="@DisplayText" />
 }
 <div @attributes="@AdditionalAttributes" class="@ClassString" id="@Id">
-    <div class="@ToggleClassString" data-bs-toggle="@ToggleString" data-bs-placement="@PlacementString" data-bs-offset="@OffsetString" data-bs-auto-close="outside" tabindex="0">
+    <div class="@ToggleClassString" data-bs-toggle="@ToggleString" data-bs-placement="@PlacementString" data-bs-offset="@OffsetString" data-bs-auto-close="outside" data-bs-custom-class="@CustomClassString" tabindex="0">
         <div class="@PlaceHolderClassString">@PlaceHolder</div>
         <div class="multi-select-items">
             @foreach (var item in SelectedItems)
@@ -28,7 +28,7 @@
             }
         </div>
     </div>
-    <div class="@DropdownMenuClassString">
+    <div class="dropdown-menu">
         @if (ShowSearch)
         {
             <div class="search">
diff --git a/src/BootstrapBlazor/Components/Select/MultiSelect.razor.cs b/src/BootstrapBlazor/Components/Select/MultiSelect.razor.cs
index 3528ee02c..8ac545235 100644
--- a/src/BootstrapBlazor/Components/Select/MultiSelect.razor.cs
+++ b/src/BootstrapBlazor/Components/Select/MultiSelect.razor.cs
@@ -317,7 +317,7 @@ public partial class MultiSelect<TValue>
         var data = Items;
         if (ShowSearch && !string.IsNullOrEmpty(SearchText) && OnSearchTextChanged != null)
         {
-            data = OnSearchTextChanged.Invoke(SearchText).ToList();
+            data = OnSearchTextChanged(SearchText).ToList();
         }
         return data;
     }
diff --git a/src/BootstrapBlazor/Components/Select/PopoverSelectBase.cs b/src/BootstrapBlazor/Components/Select/PopoverSelectBase.cs
index 6ad8833c6..8091ba914 100644
--- a/src/BootstrapBlazor/Components/Select/PopoverSelectBase.cs
+++ b/src/BootstrapBlazor/Components/Select/PopoverSelectBase.cs
@@ -22,6 +22,13 @@ public class PopoverSelectBase<TValue> : ValidateBase<TValue>
     [Parameter]
     public bool IsPopover { get; set; }
 
+    /// <summary>
+    /// 获得/设置 自定义样式 参数 <see cref="IsPopover"/> 设置为 true  时生效 默认 null
+    /// </summary>
+    /// <remarks>由 data-bs-custom-class 实现</remarks>
+    [Parameter]
+    public string? CustomClass { get; set; }
+
     /// <summary>
     /// 获得/设置 弹窗偏移量 默认 [0, 10]
     /// </summary>
@@ -33,11 +40,6 @@ public class PopoverSelectBase<TValue> : ValidateBase<TValue>
     /// </summary>
     protected string? ToggleString => IsPopover ? Constants.DropdownToggleString : "dropdown";
 
-    /// <summary>
-    /// 下拉菜单样式字符串
-    /// </summary>
-    protected string? DropdownMenuClassString => IsPopover ? "dropdown-menu" : "dropdown-menu shadow";
-
     /// <summary>
     /// 弹窗位置字符串
     /// </summary>
@@ -48,6 +50,19 @@ public class PopoverSelectBase<TValue> : ValidateBase<TValue>
     /// </summary>
     protected string? OffsetString => IsPopover ? null : Offset;
 
+    /// <summary>
+    /// 获得 CustomClass 字符串
+    /// </summary>
+    protected virtual string? CustomClassString => CssBuilder.Default(CustomClass)
+        .AddClass("shadow", ShowShadow)
+        .Build();
+
+    /// <summary>
+    /// 获得/设置 是否显示阴影 参数 <see cref="IsPopover"/> 设置为 true  时生效 默认 true
+    /// </summary>
+    [Parameter]
+    public bool ShowShadow { get; set; } = true;
+
     /// <summary>
     /// OnParametersSet 方法
     /// </summary>
diff --git a/src/BootstrapBlazor/Components/Select/Select.razor b/src/BootstrapBlazor/Components/Select/Select.razor
index 408ae28b6..b0bdad882 100644
--- a/src/BootstrapBlazor/Components/Select/Select.razor
+++ b/src/BootstrapBlazor/Components/Select/Select.razor
@@ -14,7 +14,7 @@
         @{
             ResetSelectedItem();
         }
-        <div class="dropdown-toggle" data-bs-toggle="@ToggleString" data-bs-placement="@PlacementString" data-bs-offset="@OffsetString">
+        <div class="dropdown-toggle" data-bs-toggle="@ToggleString" data-bs-placement="@PlacementString" data-bs-offset="@OffsetString" data-bs-custom-class="@CustomClassString">
             @if (DisplayTemplate != null)
             {
                 <div id="@InputId" class="@InputClassString" tabindex="0">
@@ -27,7 +27,7 @@
                 <span class="@AppendClassString"><i class="@DropdownIcon"></i></span>
             }
         </div>
-        <div class="@DropdownMenuClassString">
+        <div class="dropdown-menu">
             @if (ShowSearch)
             {
                 <div class="@SearchClassString">
diff --git a/src/BootstrapBlazor/Components/Select/Select.razor.cs b/src/BootstrapBlazor/Components/Select/Select.razor.cs
index 370d56444..8c7f3548f 100644
--- a/src/BootstrapBlazor/Components/Select/Select.razor.cs
+++ b/src/BootstrapBlazor/Components/Select/Select.razor.cs
@@ -208,7 +208,7 @@ public partial class Select<TValue> : ISelect
     {
         var ds = string.IsNullOrEmpty(SearchText)
             ? DataSource
-            : OnSearchTextChanged.Invoke(SearchText);
+            : OnSearchTextChanged(SearchText);
         var item = ds.ElementAt(index);
         await OnClickItem(item);
         StateHasChanged();
diff --git a/src/BootstrapBlazor/Components/Select/SelectBase.cs b/src/BootstrapBlazor/Components/Select/SelectBase.cs
index a7b10a6c9..42462c20c 100644
--- a/src/BootstrapBlazor/Components/Select/SelectBase.cs
+++ b/src/BootstrapBlazor/Components/Select/SelectBase.cs
@@ -47,9 +47,9 @@ public abstract class SelectBase<TValue> : PopoverSelectBase<TValue>
     public RenderFragment<SelectedItem>? ItemTemplate { get; set; }
 
     /// <summary>
-    /// 
+    /// 获得/设置 搜索框文本
     /// </summary>
-    protected string SearchText { get; set; } = "";
+    protected string? SearchText { get; set; }
 
     /// <summary>
     /// 获得 SearchIcon 图标字符串 默认增加 icon 样式
@@ -58,6 +58,13 @@ public abstract class SelectBase<TValue> : PopoverSelectBase<TValue>
         .AddClass(SearchIcon)
         .Build();
 
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    protected override string? CustomClassString => CssBuilder.Default("select")
+        .AddClass(base.CustomClassString)
+        .Build();
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
diff --git a/src/BootstrapBlazor/Components/Select/SelectTree.razor b/src/BootstrapBlazor/Components/Select/SelectTree.razor
index b44b800ca..5615aa748 100644
--- a/src/BootstrapBlazor/Components/Select/SelectTree.razor
+++ b/src/BootstrapBlazor/Components/Select/SelectTree.razor
@@ -7,11 +7,11 @@
     <BootstrapLabel required="@Required" for="@InputId" ShowLabelTooltip="ShowLabelTooltip" Value="@DisplayText" />
 }
 <div @attributes="AdditionalAttributes" id="@Id" class="@ClassName">
-    <div class="dropdown-toggle" data-bs-toggle="@ToggleString" data-bs-auto-close="outside" data-bs-offset="@OffsetString" data-bs-placement="@PlacementString" aria-expanded="false">
+    <div class="dropdown-toggle" data-bs-toggle="@ToggleString" data-bs-auto-close="outside" data-bs-offset="@OffsetString" data-bs-placement="@PlacementString" data-bs-custom-class="@CustomClassString">
         <input type="text" id="@InputId" readonly disabled="@Disabled" placeholder="@PlaceHolder" class="@InputClassName" value="@SelectedItem?.Text" />
         <span class="@AppendClassName"><i class="@DropdownIcon"></i></span>
     </div>
-    <div class="@DropdownMenuClassString">
+    <div class="dropdown-menu">
         <TreeView TItem="TValue" Items="@Items" ShowIcon="ShowIcon" OnTreeItemClick="OnItemClick" ModelEqualityComparer="@ModelEqualityComparer" CustomKeyAttribute="@CustomKeyAttribute" OnExpandNodeAsync="@OnExpandNodeAsync" />
     </div>
     @if (!IsPopover)
-- 
Gitee


From 7a31435a8be06d88a05a2ade68e7efb5f91ec4d9 Mon Sep 17 00:00:00 2001
From: Argo-Asicotech <argo@163.com>
Date: Sun, 16 Oct 2022 16:09:50 +0800
Subject: [PATCH 2/8] =?UTF-8?q?feat:=20=20=E7=A7=BB=E5=8A=A8=20dropdown=20?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=20customClass=20=E5=88=B0=E5=9F=BA=E7=B1=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../wwwroot/modules/base/base-dropdown.js     | 21 ++++++++++++++++++-
 src/BootstrapBlazor/wwwroot/modules/select.js | 12 ++++-------
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/BootstrapBlazor/wwwroot/modules/base/base-dropdown.js b/src/BootstrapBlazor/wwwroot/modules/base/base-dropdown.js
index 54512e182..375e482ba 100644
--- a/src/BootstrapBlazor/wwwroot/modules/base/base-dropdown.js
+++ b/src/BootstrapBlazor/wwwroot/modules/base/base-dropdown.js
@@ -107,10 +107,26 @@ export class DropdownBase extends BlazorComponent {
             if (!window.bb_dropdown) {
                 window.bb_dropdown = true
 
-                console.log('dropdown')
                 EventHandler.on(document, 'click', closePopover);
             }
         }
+        else {
+            const show = e => {
+                if (this._isDisabled()) {
+                    e.preventDefault()
+                }
+                this._setCustomClass()
+            }
+
+            EventHandler.on(this._element, 'show.bs.dropdown', show)
+        }
+    }
+
+    _setCustomClass() {
+        const extraClass = this._toggle.getAttribute('data-bs-custom-class')
+        if(extraClass) {
+            this._toggleMenu.classList.add(...extraClass.split(' '))
+        }
     }
 
     _isDisabled() {
@@ -125,6 +141,9 @@ export class DropdownBase extends BlazorComponent {
             EventHandler.off(this._element, 'click', '.dropdown-toggle')
             EventHandler.off(this._toggleMenu, 'click', '.dropdown-item')
         }
+        else {
+            EventHandler.off(this._element, 'show.bs.dropdown')
+        }
     }
 
     _execute(args) {
diff --git a/src/BootstrapBlazor/wwwroot/modules/select.js b/src/BootstrapBlazor/wwwroot/modules/select.js
index e96a0075f..8b831a30a 100644
--- a/src/BootstrapBlazor/wwwroot/modules/select.js
+++ b/src/BootstrapBlazor/wwwroot/modules/select.js
@@ -17,12 +17,6 @@ export class Select extends DropdownBase {
     _setListeners() {
         super._setListeners()
 
-        const show = e => {
-            if (isDisabled(this._input)) {
-                e.preventDefault()
-            }
-        }
-
         const shown = () => {
             if (this._search) {
                 this._search.focus();
@@ -77,11 +71,14 @@ export class Select extends DropdownBase {
             }
         }
 
-        EventHandler.on(this._element, 'show.bs.dropdown', show)
         EventHandler.on(this._element, 'shown.bs.dropdown', shown);
         EventHandler.on(this._element, 'keydown', keydown)
     }
 
+    _isDisabled() {
+        return isDisabled(this._input)
+    }
+
     _indexOf(element) {
         const items = this._toggleMenu.querySelectorAll('.dropdown-item')
         return Array.prototype.indexOf.call(items, element)
@@ -106,7 +103,6 @@ export class Select extends DropdownBase {
     }
 
     _dispose() {
-        EventHandler.off(this._element, 'show.bs.dropdown')
         EventHandler.off(this._element, 'shown.bs.dropdown')
         EventHandler.off(this._element, 'keydown')
 
-- 
Gitee


From a04a54975f9766089750cdbbe95cae9769cbb98d Mon Sep 17 00:00:00 2001
From: Argo-Asicotech <argo@163.com>
Date: Sun, 16 Oct 2022 16:10:05 +0800
Subject: [PATCH 3/8] =?UTF-8?q?refactor:=20=20=E7=A7=BB=E9=99=A4=20console?=
 =?UTF-8?q?.log?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/BootstrapBlazor/wwwroot/modules/confirm.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/BootstrapBlazor/wwwroot/modules/confirm.js b/src/BootstrapBlazor/wwwroot/modules/confirm.js
index 5f2c83187..7697d7100 100644
--- a/src/BootstrapBlazor/wwwroot/modules/confirm.js
+++ b/src/BootstrapBlazor/wwwroot/modules/confirm.js
@@ -86,7 +86,6 @@ export class Confirm extends BlazorComponent {
         if (!window.bb_confirm) {
             window.bb_confirm = true
 
-            console.log('confirm')
             EventHandler.on(document, 'click', this._closeConfirm);
         }
     }
-- 
Gitee


From 8735b331e63ef8caca8010cdaba9f64a8373747b Mon Sep 17 00:00:00 2001
From: Argo-Asicotech <argo@163.com>
Date: Sun, 16 Oct 2022 16:10:35 +0800
Subject: [PATCH 4/8] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20select=20?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/BootstrapBlazor/Components/Select/SelectBase.cs | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/BootstrapBlazor/Components/Select/SelectBase.cs b/src/BootstrapBlazor/Components/Select/SelectBase.cs
index 42462c20c..b4f9277a5 100644
--- a/src/BootstrapBlazor/Components/Select/SelectBase.cs
+++ b/src/BootstrapBlazor/Components/Select/SelectBase.cs
@@ -61,7 +61,8 @@ public abstract class SelectBase<TValue> : PopoverSelectBase<TValue>
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
-    protected override string? CustomClassString => CssBuilder.Default("select")
+    protected override string? CustomClassString => CssBuilder.Default()
+        .AddClass("select", IsPopover)
         .AddClass(base.CustomClassString)
         .Build();
 
-- 
Gitee


From b2deba087a24ef2a66356ed65d5ab146efc6f7eb Mon Sep 17 00:00:00 2001
From: Argo-Asicotech <argo@163.com>
Date: Sun, 16 Oct 2022 16:30:08 +0800
Subject: [PATCH 5/8] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20select-tree=20?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../wwwroot/modules/select-tree.js                | 15 +++++++++++++++
 src/BootstrapBlazor/wwwroot/modules/select.js     | 10 ++--------
 2 files changed, 17 insertions(+), 8 deletions(-)
 create mode 100644 src/BootstrapBlazor/wwwroot/modules/select-tree.js

diff --git a/src/BootstrapBlazor/wwwroot/modules/select-tree.js b/src/BootstrapBlazor/wwwroot/modules/select-tree.js
new file mode 100644
index 000000000..d9dd201c0
--- /dev/null
+++ b/src/BootstrapBlazor/wwwroot/modules/select-tree.js
@@ -0,0 +1,15 @@
+import { DropdownBase } from "./base/base-dropdown.js";
+import { isDisabled } from "./base/index.js";
+
+export class SelectTree extends DropdownBase {
+    _init() {
+        // el, obj, method
+        this._input = this._element.querySelector('.form-select')
+
+        super._init()
+    }
+
+    _isDisabled() {
+        return isDisabled(this._input)
+    }
+}
diff --git a/src/BootstrapBlazor/wwwroot/modules/select.js b/src/BootstrapBlazor/wwwroot/modules/select.js
index 8b831a30a..f4b3a19e6 100644
--- a/src/BootstrapBlazor/wwwroot/modules/select.js
+++ b/src/BootstrapBlazor/wwwroot/modules/select.js
@@ -1,13 +1,11 @@
 import EventHandler from "./base/event-handler.js";
-import { isDisabled } from "./base/index.js";
 import { getHeight, getInnerHeight } from "./base/utility.js";
-import { DropdownBase } from "./base/base-dropdown.js";
+import { SelectTree } from "./select-tree.js"
 
-export class Select extends DropdownBase {
+export class Select extends SelectTree {
     _init() {
         // el, obj, method
         this._search = this._element.querySelector('input.search-text')
-        this._input = this._element.querySelector('.form-select')
         this._invoker = this._config.arguments[0]
         this._invokeMethodName = this._config.arguments[1]
 
@@ -75,10 +73,6 @@ export class Select extends DropdownBase {
         EventHandler.on(this._element, 'keydown', keydown)
     }
 
-    _isDisabled() {
-        return isDisabled(this._input)
-    }
-
     _indexOf(element) {
         const items = this._toggleMenu.querySelectorAll('.dropdown-item')
         return Array.prototype.indexOf.call(items, element)
-- 
Gitee


From 64ac3e1ec97fb08d9b825317f2a745704b9f04d7 Mon Sep 17 00:00:00 2001
From: Argo-Asicotech <argo@163.com>
Date: Sun, 16 Oct 2022 16:30:34 +0800
Subject: [PATCH 6/8] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20SelectTree=20?=
 =?UTF-8?q?=E5=88=9D=E5=A7=8B=E5=8C=96=E6=8A=A5=E9=94=99=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/Select/SelectTree.razor.cs     | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/BootstrapBlazor/Components/Select/SelectTree.razor.cs b/src/BootstrapBlazor/Components/Select/SelectTree.razor.cs
index 95452b0e5..f3283ba70 100644
--- a/src/BootstrapBlazor/Components/Select/SelectTree.razor.cs
+++ b/src/BootstrapBlazor/Components/Select/SelectTree.razor.cs
@@ -147,16 +147,19 @@ public partial class SelectTree<TValue>
         PlaceHolder ??= Localizer[nameof(PlaceHolder)];
         ExpansionItems ??= Enumerable.Empty<TreeViewItem<TValue>>();
 
-        var currentItem = ExpansionItems.FirstOrDefault(s => ComparerItem(s.Value, Value));
-        if (currentItem != null)
+        if (Value != null)
         {
-            SelectedItem = currentItem;
-            SelectedItem.IsActive = true;
-            CurrentValue = currentItem.Value;
-
-            if (OnSelectedItemChanged != null)
+            var currentItem = ExpansionItems.FirstOrDefault(s => ComparerItem(s.Value, Value));
+            if (currentItem != null)
             {
-                await OnSelectedItemChanged(SelectedItem.Value);
+                SelectedItem = currentItem;
+                SelectedItem.IsActive = true;
+                CurrentValue = currentItem.Value;
+
+                if (OnSelectedItemChanged != null)
+                {
+                    await OnSelectedItemChanged(SelectedItem.Value);
+                }
             }
         }
     }
-- 
Gitee


From 418e8c3db7c53a144f2d2efb877ef4cbffaebfc2 Mon Sep 17 00:00:00 2001
From: Argo-Asicotech <argo@163.com>
Date: Sun, 16 Oct 2022 16:31:04 +0800
Subject: [PATCH 7/8] =?UTF-8?q?feat:=20SelectTree=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E8=84=9A=E6=9C=AC=E9=9A=94=E7=A6=BB=E4=B8=8E=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/BootstrapBlazor/Components/Select/SelectTree.razor.cs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/BootstrapBlazor/Components/Select/SelectTree.razor.cs b/src/BootstrapBlazor/Components/Select/SelectTree.razor.cs
index f3283ba70..969fa2d40 100644
--- a/src/BootstrapBlazor/Components/Select/SelectTree.razor.cs
+++ b/src/BootstrapBlazor/Components/Select/SelectTree.razor.cs
@@ -10,6 +10,7 @@ namespace BootstrapBlazor.Components;
 /// Select 组件实现类
 /// </summary>
 /// <typeparam name="TValue"></typeparam>
+[JSModuleAutoLoader("select-tree")]
 public partial class SelectTree<TValue>
 {
     /// <summary>
-- 
Gitee


From 8d696fe49570e83214aadaf9af7ffbab9b792d50 Mon Sep 17 00:00:00 2001
From: Argo-Asicotech <argo@163.com>
Date: Sun, 16 Oct 2022 16:32:25 +0800
Subject: [PATCH 8/8] =?UTF-8?q?doc:=20=E5=A2=9E=E5=8A=A0=20ShowSearch=20?=
 =?UTF-8?q?=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/BootstrapBlazor.Shared/Samples/MultiSelects.razor | 2 +-
 src/BootstrapBlazor.Shared/Samples/Selects.razor      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/BootstrapBlazor.Shared/Samples/MultiSelects.razor b/src/BootstrapBlazor.Shared/Samples/MultiSelects.razor
index 41bfa53af..b0c014eda 100644
--- a/src/BootstrapBlazor.Shared/Samples/MultiSelects.razor
+++ b/src/BootstrapBlazor.Shared/Samples/MultiSelects.razor
@@ -207,7 +207,7 @@
 <DemoBlock Title="@Localizer["PopoverTitle"]" Introduction="@Localizer["PopoverIntro"]" Name="Popover">
     <div class="row">
         <div class="col-12 col-sm-6 overflow-hidden">
-            <MultiSelect TValue="string" Items="@Items" IsPopover="true" />
+            <MultiSelect TValue="string" Items="@Items" IsPopover="true" ShowSearch="true" />
         </div>
     </div>
 </DemoBlock>
diff --git a/src/BootstrapBlazor.Shared/Samples/Selects.razor b/src/BootstrapBlazor.Shared/Samples/Selects.razor
index 57b964706..b3984e0bc 100644
--- a/src/BootstrapBlazor.Shared/Samples/Selects.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Selects.razor
@@ -284,7 +284,7 @@
 <DemoBlock Title="@Localizer["PopoverTitle"]" Introduction="@Localizer["PopoverIntro"]" Name="Popover">
     <div class="row">
         <div class="col-12 col-sm-6 overflow-hidden">
-            <Select TValue="string" Items="Items" IsPopover="true" />
+            <Select TValue="string" Items="Items" IsPopover="true" ShowSearch="true" />
         </div>
     </div>
 </DemoBlock>
-- 
Gitee