feat(blazorui): add FixedCalloutWidth parameter to BitSearchBox #11511 (#11538)

Author: msynk

src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs

@@ -57,6 +57,11 @@ public partial class BitSearchBox : BitTextInputBase<string?>
     [Parameter, ResetClassBuilder]
     public bool DisableAnimation { get; set; }
 
+    /// <summary>
+    /// Forces the suggest callout width to be always fixed at the component's width.
+    /// </summary>
+    [Parameter] public bool FixedCalloutWidth { get; set; }
+
     /// <summary>
     /// Whether or not to make the icon be always visible (it hides by default when the search box is focused).
     /// </summary>
@@ -535,7 +540,7 @@ await _js.BitCalloutToggleCallout(
             headerId: string.Empty,
             footerId: string.Empty,
             setCalloutWidth: false,
-            fixedCalloutWidth: false,
+            fixedCalloutWidth: FixedCalloutWidth,
             maxWindowWidth: 0);
     }
 

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor

@@ -223,6 +223,12 @@
                               DebounceTime="300"
                               Placeholder="e.g. pro"
                               SuggestItemsProvider="LoadItems" />
+                <br /><br /><br />
+                <div><b>FixedCalloutWidth</b></div><br />
+                <BitSearchBox Immediate
+                              FixedCalloutWidth
+                              Placeholder="e.g. app"
+                              SuggestItems="GetLongSuggestedItems()" />
             </div>
         </DemoExample>
 

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.cs

@@ -55,6 +55,13 @@ public partial class BitSearchBoxDemo
             Description = "Whether or not to animate the search box icon on focus.",
         },
         new()
+        {
+            Name = "FixedCalloutWidth",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Forces the suggest callout width to be always fixed at the component's width.",
+        },
+        new()
         {
             Name = "FixedIcon",
             Type = "bool",
@@ -646,6 +653,20 @@ private List<string> GetSuggestedItems() =>
          "Lettuce"
     ];
 
+    private List<string> GetLongSuggestedItems() =>
+    [
+        "Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple",
+        "Red Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple",
+        "Blue Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple",
+        "Green Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple",
+        "Banana Banana Banana Banana Banana Banana Banana Banana Banana Banana Banana Banana Banana Banana Banana",
+        "Orange Orange Orange Orange Orange Orange Orange Orange Orange Orange Orange Orange Orange Orange Orange",
+        "Grape Grape Grape Grape Grape Grape Grape Grape Grape Grape Grape Grape Grape Grape Grape Grape Grape Grape",
+        "Broccoli Broccoli Broccoli Broccoli Broccoli Broccoli Broccoli Broccoli Broccoli Broccoli Broccoli Broccoli",
+        "Carrot Carrot Carrot Carrot Carrot Carrot Carrot Carrot Carrot Carrot Carrot Carrot Carrot Carrot Carrot Carrot",
+        "Lettuce Lettuce Lettuce Lettuce Lettuce Lettuce Lettuce Lettuce Lettuce Lettuce Lettuce Lettuce Lettuce Lettuce"
+    ];
+
     private Func<string, string, bool> SearchFunc = (string searchText, string itemText) =>
     {
         if (string.IsNullOrEmpty(searchText) || string.IsNullOrEmpty(itemText)) return false;

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.samples.cs

@@ -97,34 +97,39 @@ public partial class BitSearchBoxDemo
               Immediate
               Placeholder=""e.g. app""
               SuggestItems=""GetSuggestedItems()"" />
+<div>SearchValue: @searchValue</div>
 
 
 <BitSearchBox @bind-Value=""@searchValueWithSuggestFilterFunction""
               Immediate
               Placeholder=""e.g. app""
               SuggestItems=""GetSuggestedItems()""
               SuggestFilterFunction=""@SearchFunc"" />
+<div>SearchValue: @searchValueWithSuggestFilterFunction</div>
 
 
 <BitSearchBox @bind-Value=""@searchValueWithMinSearchLength""
               Immediate
               Placeholder=""e.g. app""
               MinSuggestTriggerChars=""1""
               SuggestItems=""GetSuggestedItems()"" />
+<div>SearchValue: @searchValueWithMinSearchLength</div>
 
 
 <BitSearchBox @bind-Value=""@searchValueWithMaxSuggestedItems""
               Immediate
               Placeholder=""e.g. app""
               MaxSuggestCount=""2""
               SuggestItems=""GetSuggestedItems()"" />
+<div>SearchValue: @searchValueWithMaxSuggestedItems</div>
 
 
 <BitSearchBox @bind-Value=""@searchValueWithSearchDelay""
               Immediate
               DebounceTime=""2000""
               Placeholder=""e.g. app""
               SuggestItems=""GetSuggestedItems()"" />
+<div>SearchValue: @searchValueWithSearchDelay</div>
 
 
 <BitSearchBox @bind-Value=""@searchValueWithItemsProvider""
@@ -139,7 +144,13 @@ public partial class BitSearchBoxDemo
               Immediate
               DebounceTime=""300""
               Placeholder=""e.g. pro""
-              SuggestItemsProvider=""LoadItems"" />";
+              SuggestItemsProvider=""LoadItems"" />
+
+
+<BitSearchBox Immediate
+              FixedCalloutWidth
+              Placeholder=""e.g. app""
+              SuggestItems=""GetLongSuggestedItems()"" />";
     private readonly string example10CsharpCode = @"
 private string searchValue;
 private string searchValueWithSuggestFilterFunction;
@@ -150,16 +161,30 @@ public partial class BitSearchBoxDemo
 
 private List<string> GetSuggestedItems() =>
 [
-        ""Apple"",
-        ""Red Apple"",
-        ""Blue Apple"",
-        ""Green Apple"",
-        ""Banana"",
-        ""Orange"",
-        ""Grape"",
-        ""Broccoli"",
-        ""Carrot"",
-        ""Lettuce""
+    ""Apple"",
+    ""Red Apple"",
+    ""Blue Apple"",
+    ""Green Apple"",
+    ""Banana"",
+    ""Orange"",
+    ""Grape"",
+    ""Broccoli"",
+    ""Carrot"",
+    ""Lettuce""
+];
+
+private List<string> GetLongSuggestedItems() =>
+[
+    ""Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple"",
+    ""Red Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple"",
+    ""Blue Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple"",
+    ""Green Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple"",
+    ""Banana Banana Banana Banana Banana Banana Banana Banana Banana Banana Banana Banana Banana Banana Banana"",
+    ""Orange Orange Orange Orange Orange Orange Orange Orange Orange Orange Orange Orange Orange Orange Orange"",
+    ""Grape Grape Grape Grape Grape Grape Grape Grape Grape Grape Grape Grape Grape Grape Grape Grape Grape Grape"",
+    ""Broccoli Broccoli Broccoli Broccoli Broccoli Broccoli Broccoli Broccoli Broccoli Broccoli Broccoli Broccoli"",
+    ""Carrot Carrot Carrot Carrot Carrot Carrot Carrot Carrot Carrot Carrot Carrot Carrot Carrot Carrot Carrot Carrot"",
+    ""Lettuce Lettuce Lettuce Lettuce Lettuce Lettuce Lettuce Lettuce Lettuce Lettuce Lettuce Lettuce Lettuce Lettuce""
 ];
 
 private Func<string, string, bool> SearchFunc = (string searchText, string itemText) =>