Skip to content

Add FixedCalloutWidth parameter to BitSearchBox (#11511) #11538

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
msynk merged 1 commit into from
Oct 30, 2025
Merged

Add FixedCalloutWidth parameter to BitSearchBox (#11511) #11538

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -535,7 +540,7 @@ await _js.BitCalloutToggleCallout(
headerId: string.Empty,
footerId: string.Empty,
setCalloutWidth: false,
fixedCalloutWidth: false,
fixedCalloutWidth: FixedCalloutWidth,
maxWindowWidth: 0);
}

Expand Down
6 changes: 6 additions & 0 deletions ...nt/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
21 changes: 21 additions & 0 deletions ...Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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;
Expand Down
47 changes: 36 additions & 11 deletions ...orUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.samples.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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""
Expand All @@ -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;
Expand All @@ -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) =>
Expand Down
Loading