Added SearchBoxAutoFocus to Extended (Select & List), Updated Docs Example. (#116)

* Added SearchBoxAutoFocus Parameter to Extended Components (List, Select)

* IconColor should be `AdornmentColor` in MudText component.

* Updated Example to use `SearchBoxAutoFocus`.

Author: RadJKW

CodeBeam.MudExtensions/Components/ListExtended/MudListExtended.razor

@@ -11,15 +11,15 @@
             <MudListItemExtended T="T" IsFunctional="true" Icon="@SelectAllCheckBoxIcon" IconColor="@Color" Text="@SelectAllText" OverrideMultiSelectionComponent="MultiSelectionComponent.None" OnClick="@(() => SelectAllItems(_allSelected))" OnClickHandlerPreventDefault="true" Dense="@Dense" Class="mb-2" />
             <MudDivider />
         }
-        
+
         @if (ItemCollection != null)
         {
             @if (SearchBox == true)
             {
                 <MudListSubheaderExtended T="T" Style="position: sticky; top: -12px; background-color: var(--mud-palette-background); z-index: 10">
                     <div @onkeydown:stopPropagation>
                         <MudTextField @bind-Value="@_searchString" Class="@ClassSearchBox" OnKeyUp="@(() => UpdateSelectedStyles())" Immediate="true" Variant="Variant.Outlined" Margin="Margin.Dense"
-                              Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Search" IconColor="Color" />
+                              Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Search" AdornmentColor="Color" AutoFocus="@SearchBoxAutoFocus" />
                     </div>
 
                 </MudListSubheaderExtended>

CodeBeam.MudExtensions/Components/ListExtended/MudListExtended.razor.cs

@@ -142,6 +142,13 @@ public Func<T, string> ToStringFunc
         [Category(CategoryTypes.List.Behavior)]
         public bool SearchBox { get; set; }
 
+        /// <summary>
+        /// If true, the search-box will be focused when the dropdown is opened.
+        /// </summary>
+        [Parameter]
+        [Category(CategoryTypes.List.Behavior)]
+        public bool SearchBoxAutoFocus { get; set; }
+
         /// <summary>
         /// SearchBox's CSS classes, seperated by space.
         /// </summary>

CodeBeam.MudExtensions/Components/SelectExtended/MudSelectExtended.razor

@@ -25,7 +25,7 @@
                           Disabled="@Disabled" ReadOnly="true" Error="@Error" ErrorId="@ErrorId"
                           Clearable="@Clearable" OnClearButtonClick="(async (e) => await SelectClearButtonClickHandlerAsync(e))"
                           @attributes="UserAttributes" OnBlur="@OnLostFocus">
-                    
+
                     <AdornmentEnd>
                         <MudIcon Icon="@_currentIcon" Color="@AdornmentColor" Size="@IconSize" @onclick="OnAdornmentClick" />
                     </AdornmentEnd>
@@ -43,7 +43,7 @@
                                 {
                                     <MudText Typo="Typo.body1" Class="mud-text-secondary">@Placeholder</MudText>
                                 }
-                                
+
                                 <MudRender>@GetSelectTextPresenter()</MudRender>
                             }
                             else if (ValuePresenter == ValuePresenter.Chip)
@@ -65,7 +65,7 @@
                                 if (SelectedListItem == null)
                                 {
                                     <MudText Typo="Typo.body1" Class="mud-text-secondary">@Placeholder</MudText>
-                                    
+
                                 }
                                 else if (ItemTemplate != null)
                                 {
@@ -102,12 +102,12 @@
                                  Clickable="true" Color="@Color" Dense="@Dense" ItemCollection="@ItemCollection" Virtualize="@Virtualize" DisablePadding="@DisablePopoverPadding" DisableSelectedItemStyle="@DisableSelectedItemStyle"
                                  MultiSelection="@MultiSelection" MultiSelectionComponent="@MultiSelectionComponent" MultiSelectionAlign="@MultiSelectionAlign" SelectAll="@SelectAll" SelectAllText="@SelectAllText"
                                  CheckedIcon="@CheckedIcon" UncheckedIcon="@UncheckedIcon" IndeterminateIcon="@IndeterminateIcon" SelectValueOnTab="@SelectValueOnTab" Comparer="@Comparer"
-                                 ItemTemplate="@ItemTemplate" ItemSelectedTemplate="@ItemSelectedTemplate" ItemDisabledTemplate="@ItemDisabledTemplate" SearchBox="@SearchBox" ToStringFunc="@ToStringFunc">
+                                 ItemTemplate="@ItemTemplate" ItemSelectedTemplate="@ItemSelectedTemplate" ItemDisabledTemplate="@ItemDisabledTemplate" SearchBox="@SearchBox" SearchBoxAutoFocus="@SearchBoxAutoFocus" ToStringFunc="@ToStringFunc">
                             @ChildContent
 						</MudListExtended>
 					</CascadingValue>
 				</MudPopover>
-			</InputContent>        
+			</InputContent>
 		</MudInputControl>
 	</div>
 
@@ -120,4 +120,4 @@
 
 </CascadingValue>
 <!-- mousedown instead of click needed to close the menu before OnLostFocus runs -->
-<MudOverlay Visible="_isOpen" @onmousedown="@(() => CloseMenu())" LockScroll="@LockScroll" />
+<MudOverlay Visible="_isOpen" @onmousedown="@(() => CloseMenu())" LockScroll="@LockScroll" />

CodeBeam.MudExtensions/Components/SelectExtended/MudSelectExtended.razor.cs

@@ -303,6 +303,14 @@ public bool Dense
         [Category(CategoryTypes.List.Behavior)]
         public bool SearchBox { get; set; }
 
+        /// <summary>
+        /// If true, the search-box will be focused when the dropdown is opened.
+        /// </summary>
+        [Parameter]
+        [Category(CategoryTypes.List.Behavior)]
+        public bool SearchBoxAutoFocus { get; set; }
+
+
         /// <summary>
         /// If true, prevent scrolling while dropdown is open.
         /// </summary>
@@ -461,7 +469,7 @@ public IEnumerable<T> SelectedValues
                     SetValueAsync(_selectedValues.LastOrDefault(), false).AndForget();
                     UpdateTextPropertyAsync(false).AndForget();
                 }
-                
+
                 SelectedValuesChanged.InvokeAsync(new HashSet<T>(SelectedValues, _comparer)).AndForget();
                 _selectedValuesSetterStarted = false;
                 //Console.WriteLine("SelectedValues setter ended");

ComponentViewer.Docs/Pages/Examples/SelectExtendedExample6.razor

@@ -1,18 +1,20 @@
 
 <MudGrid>
     <MudItem xs="12" sm="8">
-        <MudSelectExtended MultiSelection="@_multiselection" ItemCollection="_states" SearchBox="true" T="string" Label="US States" AnchorOrigin="Origin.BottomCenter" Variant="Variant.Outlined" />
+        <MudSelectExtended MultiSelection="@_multiselection" ItemCollection="_states" SearchBox="true" SearchBoxAutoFocus="@_searchBoxAutoFocus" T="string" Label="US States" AnchorOrigin="Origin.BottomCenter" Variant="Variant.Outlined" />
     </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)" />
         </MudStack>
     </MudItem>
 </MudGrid>
 
 @code {
     bool _multiselection;
+    bool _searchBoxAutoFocus;
 
     private string[] _states =
     {
@@ -32,4 +34,4 @@
         "Washington", "West Virginia", "Wisconsin", "Wyoming",
     };
 
-}
+}