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 832e3376fa..eccfe810bf 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs @@ -165,7 +165,7 @@ protected override void RegisterCssClasses() ClassBuilder.Register(() => IsUnderlined ? "bit-srb-und" : string.Empty); - ClassBuilder.Register(() => _inputHasFocus ? $"bit-srb-{(FixedIcon ? "fic-" : string.Empty)}foc" : string.Empty); + ClassBuilder.Register(() => _inputHasFocus ? $"bit-srb-{(FixedIcon ? "fic-" : string.Empty)}foc {Classes?.Focused}" : string.Empty); ClassBuilder.Register(() => ShowSearchButton ? "bit-srb-ssb" : string.Empty); @@ -175,6 +175,8 @@ protected override void RegisterCssClasses() protected override void RegisterCssStyles() { StyleBuilder.Register(() => Styles?.Root); + + StyleBuilder.Register(() => _inputHasFocus ? Styles?.Focused : string.Empty); } protected override async Task OnInitializedAsync() @@ -222,12 +224,14 @@ private void HandleInputFocusIn() { _inputHasFocus = true; ClassBuilder.Reset(); + StyleBuilder.Reset(); } private void HandleInputFocusOut() { _inputHasFocus = false; ClassBuilder.Reset(); + StyleBuilder.Reset(); } private async Task HandleOnSearchButtonClick() diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBoxClassStyles.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBoxClassStyles.cs index 7d0f28ed41..a5df0720ba 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBoxClassStyles.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBoxClassStyles.cs @@ -12,6 +12,11 @@ public class BitSearchBoxClassStyles /// public string? InputContainer { get; set; } + /// + /// Custom CSS classes/styles for the focus state of the BitSearchBox. + /// + public string? Focused { get; set; } + /// /// Custom CSS classes/styles for the search box's clear button. /// 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 fcbddfb7eb..095550d3b8 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 @@ -186,6 +186,20 @@ public partial class BitSearchBoxDemo Description = "Custom CSS classes/styles for the root element of the search box.", }, new() + { + Name = "InputContainer", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the input container of the BitSearchBox.", + }, + new() + { + Name = "Focused", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the focus state of the BitSearchBox.", + }, + new() { Name = "ClearButton", Type = "string?",