Select SearchBox Clearable and Ctrl A Fix (#158)

Author: mckaragoz

CodeBeam.MudBlazor.Extensions/Components/ListExtended/MudListExtended.razor

@@ -33,7 +33,7 @@
                             <MudCheckBox CheckedIcon="@SelectAllCheckBoxIcon" Color="@Color" @bind-Checked="_allSelected" @onclick="() => SelectAllItems(_allSelected)" Dense="true" />
                         }
                         <MudTextField @ref="_searchField" @bind-Value="@_searchString" Class="@ClassSearchBox" Placeholder="@SearchBoxPlaceholder" OnKeyDown="SearchBoxHandleKeyDown" OnKeyUp="@(() => UpdateSelectedStyles())" Immediate="true" Variant="Variant.Outlined" Margin="Margin.Dense"
-                            Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Search" AdornmentColor="Color" AutoFocus="@SearchBoxAutoFocus" />
+                            Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Search" AdornmentColor="Color" AutoFocus="@SearchBoxAutoFocus" Clearable="@SearchBoxClearable" />
                     </div>
                 </MudListSubheaderExtended>
                 @if (MultiSelection && SelectAll && SelectAllPosition == SelectAllPosition.AfterSearchBox && ParentList == null)

CodeBeam.MudBlazor.Extensions/Components/ListExtended/MudListExtended.razor.cs

@@ -164,6 +164,13 @@ public Func<T, string> ToStringFunc
         [Category(CategoryTypes.List.Behavior)]
         public bool SearchBoxAutoFocus { get; set; }
 
+        /// <summary>
+        /// If true, the search-box has a clear icon.
+        /// </summary>
+        [Parameter]
+        [Category(CategoryTypes.List.Behavior)]
+        public bool SearchBoxClearable { get; set; }
+
         /// <summary>
         /// SearchBox's CSS classes, seperated by space.
         /// </summary>
@@ -793,6 +800,13 @@ protected internal async Task SearchBoxHandleKeyDown(KeyboardEventArgs obj)
                     await _searchField.FocusAsync();
                     StateHasChanged();
                     break;
+                case "a":
+                case "A":
+                    if (obj.CtrlKey == true)
+                    {
+                        await _searchField.SelectAsync();
+                    }
+                    break;
             }
         }
 

CodeBeam.MudBlazor.Extensions/Components/SelectExtended/MudSelectExtended.razor

@@ -111,7 +111,7 @@
                                  Clickable="true" Color="@Color" Dense="@Dense" ItemCollection="@ItemCollection" Virtualize="@Virtualize" DisablePadding="@DisablePopoverPadding" DisableSelectedItemStyle="@DisableSelectedItemStyle"
                                          MultiSelection="@MultiSelection" MultiSelectionComponent="@MultiSelectionComponent" MultiSelectionAlign="@MultiSelectionAlign" SelectAll="@SelectAll" SelectAllPosition="@SelectAllPosition" SelectAllText="@SelectAllText"
                                  CheckedIcon="@CheckedIcon" UncheckedIcon="@UncheckedIcon" IndeterminateIcon="@IndeterminateIcon" SelectValueOnTab="@SelectValueOnTab" Comparer="@Comparer"
-                                 ItemTemplate="@ItemTemplate" ItemSelectedTemplate="@ItemSelectedTemplate" ItemDisabledTemplate="@ItemDisabledTemplate" SearchBox="@SearchBox" SearchBoxAutoFocus="@SearchBoxAutoFocus" SearchFunc="@SearchFunc" SearchBoxPlaceholder="@SearchBoxPlaceholder" ToStringFunc="@ToStringFunc">
+                                 ItemTemplate="@ItemTemplate" ItemSelectedTemplate="@ItemSelectedTemplate" ItemDisabledTemplate="@ItemDisabledTemplate" SearchBox="@SearchBox" SearchBoxAutoFocus="@SearchBoxAutoFocus" SearchFunc="@SearchFunc" SearchBoxPlaceholder="@SearchBoxPlaceholder" SearchBoxClearable="@SearchBoxClearable" ToStringFunc="@ToStringFunc">
                             @ChildContent
 						</MudListExtended>
 					</CascadingValue>

CodeBeam.MudBlazor.Extensions/Components/SelectExtended/MudSelectExtended.razor.cs

@@ -347,6 +347,12 @@ public bool Dense
         [Category(CategoryTypes.List.Behavior)]
         public bool SearchBoxAutoFocus { get; set; }
 
+        /// <summary>
+        /// If true, the search-box has a clear icon.
+        /// </summary>
+        [Parameter]
+        [Category(CategoryTypes.List.Behavior)]
+        public bool SearchBoxClearable { get; set; }
 
         /// <summary>
         /// If true, prevent scrolling while dropdown is open.

ComponentViewer.Docs/Pages/Examples/SelectExtendedExample6.razor

@@ -1,21 +1,23 @@
 
 <MudGrid>
     <MudItem xs="12" sm="8" Class="d-flex gap-4">
-        <MudSelectExtended MultiSelection="@_multiselection" ItemCollection="_states" SearchBox="true" SearchBoxAutoFocus="@_searchBoxAutoFocus" T="string" Label="Standard Search" AnchorOrigin="Origin.BottomCenter" Variant="Variant.Outlined" HelperText="Search with 'Contains' logic" />
-        <MudSelectExtended MultiSelection="@_multiselection" ItemCollection="_states" SearchBox="true" SearchBoxAutoFocus="@_searchBoxAutoFocus" SearchFunc="@(new Func<string, string, bool>(SearchItems))" T="string" Label="Custom Search Func" AnchorOrigin="Origin.BottomCenter" Variant="Variant.Outlined" SearchBoxPlaceholder="Some Placeholder" HelperText="Search with 'StartsWith' logic" />
+        <MudSelectExtended MultiSelection="@_multiselection" ItemCollection="_states" SearchBox="true" SearchBoxAutoFocus="@_searchBoxAutoFocus" T="string" Label="Standard Search" AnchorOrigin="Origin.BottomCenter" Variant="Variant.Outlined" HelperText="Search with 'Contains' logic" SearchBoxClearable="_searchBoxClearable" />
+        <MudSelectExtended MultiSelection="@_multiselection" ItemCollection="_states" SearchBox="true" SearchBoxAutoFocus="@_searchBoxAutoFocus" SearchFunc="@(new Func<string, string, bool>(SearchItems))" T="string" Label="Custom Search Func" AnchorOrigin="Origin.BottomCenter" Variant="Variant.Outlined" SearchBoxPlaceholder="Some Placeholder" HelperText="Search with 'StartsWith' logic" SearchBoxClearable="_searchBoxClearable" />
     </MudItem>
 
     <MudItem xs="12" sm="4">
         <MudStack>
             <MudSwitchM3 @bind-Checked="_multiselection" Color="Color.Primary" Label="MultiSelection" />
             <MudSwitchM3 @bind-Checked="_searchBoxAutoFocus" Color="Color.Primary" Label="AutoFocus (SearchBox)" />
+            <MudSwitchM3 @bind-Checked="_searchBoxClearable" Color="Color.Primary" Label="Clearable (SearchBox)" />
         </MudStack>
     </MudItem>
 </MudGrid>
 
 @code {
     bool _multiselection;
     bool _searchBoxAutoFocus;
+    bool _searchBoxClearable;
 
     private string[] _states =
     {