diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs index 28f201ea70..69d620b6a6 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs @@ -57,6 +57,11 @@ public partial class BitSearchBox : BitTextInputBase [Parameter, ResetClassBuilder] public bool DisableAnimation { get; set; } + /// + /// Forces the suggest callout width to be always fixed at the component's width. + /// + [Parameter] public bool FixedCalloutWidth { get; set; } + /// /// Whether or not to make the icon be always visible (it hides by default when the search box is focused). /// @@ -535,7 +540,7 @@ await _js.BitCalloutToggleCallout( headerId: string.Empty, footerId: string.Empty, setCalloutWidth: false, - fixedCalloutWidth: false, + fixedCalloutWidth: FixedCalloutWidth, maxWindowWidth: 0); } diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor index bead133dbb..58b9305379 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor +++ b/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" /> +


+
FixedCalloutWidth

+ diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.cs index e94025e3a2..9098b436e5 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.cs +++ b/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 GetSuggestedItems() => "Lettuce" ]; + private List 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 SearchFunc = (string searchText, string itemText) => { if (string.IsNullOrEmpty(searchText) || string.IsNullOrEmpty(itemText)) return false; diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.samples.cs index 14d129068c..ffe4428c3d 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.samples.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.samples.cs @@ -97,6 +97,7 @@ public partial class BitSearchBoxDemo Immediate Placeholder=""e.g. app"" SuggestItems=""GetSuggestedItems()"" /> +
SearchValue: @searchValue
+
SearchValue: @searchValueWithSuggestFilterFunction
+
SearchValue: @searchValueWithMinSearchLength
+
SearchValue: @searchValueWithMaxSuggestedItems
+
SearchValue: @searchValueWithSearchDelay
"; + SuggestItemsProvider=""LoadItems"" /> + + +"; private readonly string example10CsharpCode = @" private string searchValue; private string searchValueWithSuggestFilterFunction; @@ -150,16 +161,30 @@ public partial class BitSearchBoxDemo private List 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 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 SearchFunc = (string searchText, string itemText) =>