[HxMultiSelect] filtering and select all

BlazorAppTest/Pages/HxMultiSelectTest.razor

@@ -1,38 +1,61 @@
 @page "/HxMultiSelectTest"
 @using System.Globalization
 
-<h1>HxCheckboxList</h1>
+<h1>HxMultiSelect</h1>
+
+<p>Selected values: @String.Join(", ", model.CultureInfos ?? Enumerable.Empty<string>())</p>
 
 <HxSwitch Text="Enabled" @bind-Value="@enabled" />
 
 <EditForm Model="@model">
 	<HxMultiSelect TItem="CultureInfo" TValue="string" Label="Cultures" EmptyText="-- choose here --" TextSelector="@(item => item.EnglishName)" ValueSelector="@(item => item.EnglishName)" Data="@data" @bind-Value="@model.CultureInfos" NullDataText="Loading languages..." Enabled="@enabled" InputSize="InputSize.Small" />
+
 	<HxMultiSelect TItem="CultureInfo" TValue="string" Label="Cultures" EmptyText="-- choose here --" TextSelector="@(item => item.EnglishName)" ValueSelector="@(item => item.EnglishName)" Data="@data" @bind-Value="@model.CultureInfos" NullDataText="Loading languages..." Enabled="@enabled" />
-	<HxMultiSelect TItem="CultureInfo" TValue="string" Label="Cultures" EmptyText="-- choose here --" TextSelector="@(item => item.EnglishName)" ValueSelector="@(item => item.EnglishName)" Data="@data" @bind-Value="@model.CultureInfos" NullDataText="Loading languages..." Enabled="@enabled" InputSize="InputSize.Large" />
-</EditForm>
 
-<p>Selected values: @String.Join(", ", model.CultureInfos ?? Enumerable.Empty<string>())</p>
+    <HxMultiSelect TItem="CultureInfo" TValue="string" Label="Cultures" EmptyText="-- choose here --" TextSelector="@(item => item.EnglishName)" ValueSelector="@(item => item.EnglishName)" Data="@data" @bind-Value="@model.CultureInfos" NullDataText="Loading languages..." Enabled="@enabled" InputSize="InputSize.Large" />
+
+    <!-- Multi-select with filtering -->
+    <HxMultiSelect TItem="CultureInfo"
+                   TValue="string"
+                   Label="Cultures with filtering enabled"
+                   EmptyText="-- choose here --"
+                   TextSelector="@(item => item.EnglishName)"
+                   ValueSelector="@(item => item.EnglishName)"
+                   Data="@data"
+                   @bind-Value="@model.CultureInfos"
+                   NullDataText="Loading languages..."
+                   EnableFiltering="true"
+                   FilterSelector="((item, filterText) => FilterSelector(item, filterText))"
+                   Enabled="@enabled" />
+</EditForm>
 
 @code
 {
-	private bool enabled = true;
-	private Model model = new Model();
-	private List<CultureInfo> data;
-
-	protected override async Task OnParametersSetAsync()
-	{
-		await base.OnParametersSetAsync();
-		await Task.Delay(3000);
-
-		data = CultureInfo.GetCultures(CultureTypes.SpecificCultures)
-		.OrderBy(item => item.EnglishName)
-		.Take(100)
-		.OrderByDescending(i => i.ToString()) // sorting test
-		.ToList();
-	}
-
-	private class Model
-	{
-		public List<string> CultureInfos { get; set; }
-	}
+    private bool enabled = true;
+    private Model model = new Model();
+    private List<CultureInfo> data;
+
+    private HxMultiSelect<string, CultureInfo> hxMultiSelectFilter;
+
+    protected override async Task OnParametersSetAsync()
+    {
+        await base.OnParametersSetAsync();
+        await Task.Delay(3000);
+
+        data = CultureInfo.GetCultures(CultureTypes.SpecificCultures)
+            .OrderBy(item => item.EnglishName)
+            .Take(100)
+            .OrderByDescending(i => i.ToString()) // sorting test
+            .ToList();
+    }
+
+    private class Model
+    {
+        public List<string> CultureInfos { get; set; }
+    }
+
+    private bool FilterSelector(CultureInfo item, string filter)
+    {
+        return string.IsNullOrWhiteSpace(filter) || item.EnglishName.Contains(filter, StringComparison.OrdinalIgnoreCase);
+    }
 }

Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml

@@ -2701,36 +2701,74 @@
         <member name="M:Havit.Blazor.Components.Web.Bootstrap.Internal.HxInputDateRangeInternal.DisposeAsync">
             <inheritdoc />
         </member>
+        <member name="P:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.AdditionalAttributes">
+            <summary>
+            Additional attributes to be splatted onto an underlying HTML element.
+            </summary>
+        </member>
         <member name="P:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.InputGroupCssClass">
             <summary>
             Custom CSS class to render with input-group span.
             </summary>
         </member>
-        <member name="P:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.InputGroupStartText">
+        <member name="P:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.InputGroupEndTemplate">
             <summary>
-            Input-group at the beginning of the input.
+            Input-group at the end of the input.
+            </summary>
+        </member>
+        <member name="P:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.InputGroupEndText">
+            <summary>
+            Input-group at the end of the input.
             </summary>
         </member>
         <member name="P:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.InputGroupStartTemplate">
             <summary>
             Input-group at the beginning of the input.
             </summary>
         </member>
-        <member name="P:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.InputGroupEndText">
+        <member name="P:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.InputGroupStartText">
             <summary>
-            Input-group at the end of the input.
+            Input-group at the beginning of the input.
             </summary>
         </member>
-        <member name="P:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.InputGroupEndTemplate">
+        <member name="P:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.OnHidden">
             <summary>
-            Input-group at the end of the input.
+            This event is fired when a dropdown element has been hidden from the user (will wait for CSS transitions to complete).
             </summary>
         </member>
-        <member name="P:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.AdditionalAttributes">
+        <member name="P:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.OnShown">
             <summary>
-            Additional attributes to be splatted onto an underlying HTML element.
+            This event is fired when a dropdown element has been made visible to the user (will wait for CSS transitions to complete).
+            </summary>
+        </member>
+        <member name="M:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.HandleJsHidden">
+            <summary>
+            Receives notification from JavaScript when item is hidden.
             </summary>
         </member>
+        <member name="M:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.HideAsync">
+            <summary>
+            Collapses the item.
+            </summary>
+        </member>
+        <member name="M:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.ShowAsync">
+            <summary>
+            Expands the item.
+            </summary>
+        </member>
+        <member name="M:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.InvokeOnHiddenAsync(System.String)">
+            <summary>
+            Triggers the <see cref="P:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.OnHidden"/> event. Allows interception of the event in derived components.
+            </summary>
+        </member>
+        <member name="M:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.InvokeOnShownAsync(System.String)">
+            <summary>
+            Triggers the <see cref="P:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.OnShown"/> event. Allows interception of the event in derived components.
+            </summary>
+        </member>
+        <member name="M:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.OnAfterRenderAsync(System.Boolean)">
+            <inheritdoc cref="M:Microsoft.AspNetCore.Components.ComponentBase.OnAfterRenderAsync(System.Boolean)" />
+        </member>
         <member name="T:Havit.Blazor.Components.Web.Bootstrap.Internal.IFormValueComponent">
             <summary>
             Represents properties (and methods) of a component rendering a form value (ie. form inputs).

Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs

@@ -110,6 +110,11 @@ public class HxMultiSelect<TValue, TItem> : HxInputBase<List<TValue>>, IInputWit
 	/// </summary>
 	[Parameter] public RenderFragment InputGroupEndTemplate { get; set; }
 
+	[Parameter] public bool EnableFiltering { get; set; }
+
+	[Parameter] public Func<TItem, string, bool> FilterSelector { get; set; } = (_, _) => true;
+
+	private bool IsShown { get; set; }
 
 	private List<TItem> itemsToRender;
 	private HxMultiSelectInternal<TValue, TItem> hxMultiSelectInternalComponent;
@@ -152,6 +157,16 @@ private void HandleItemSelectionChanged(bool @checked, TItem item)
 		CurrentValue = newValue; // setter includes ValueChanged + NotifyFieldChanged
 	}
 
+	private void HandleOnHiddenChanged()
+	{
+		IsShown = false;
+	}
+
+	private void HandleOnShownChanged()
+	{
+		IsShown = true;
+	}
+
 	protected override bool TryParseValueFromString(string value, out List<TValue> result, out string validationErrorMessage)
 	{
 		throw new NotSupportedException();
@@ -181,13 +196,17 @@ protected override void BuildRenderInput(RenderTreeBuilder builder)
 		builder.AddAttribute(105, nameof(HxMultiSelectInternal<TValue, TItem>.ItemsToRender), itemsToRender);
 		builder.AddAttribute(106, nameof(HxMultiSelectInternal<TValue, TItem>.TextSelector), TextSelector);
 		builder.AddAttribute(107, nameof(HxMultiSelectInternal<TValue, TItem>.ValueSelector), ValueSelector);
-		builder.AddAttribute(108, nameof(HxMultiSelectInternal<TValue, TItem>.Value), Value);
+		builder.AddAttribute(108, nameof(HxMultiSelectInternal<TValue, TItem>.SelectedValues), Value);
 		builder.AddAttribute(109, nameof(HxMultiSelectInternal<TValue, TItem>.NullDataText), NullDataText);
 		builder.AddAttribute(110, nameof(HxMultiSelectInternal<TValue, TItem>.ItemSelectionChanged), EventCallback.Factory.Create<HxMultiSelectInternal<TValue, TItem>.SelectionChangedArgs>(this, args => HandleItemSelectionChanged(args.Checked, args.Item)));
 		builder.AddAttribute(111, nameof(HxMultiSelectInternal<TValue, TItem>.InputGroupStartText), InputGroupStartText);
 		builder.AddAttribute(112, nameof(HxMultiSelectInternal<TValue, TItem>.InputGroupStartTemplate), InputGroupStartTemplate);
 		builder.AddAttribute(113, nameof(HxMultiSelectInternal<TValue, TItem>.InputGroupEndText), InputGroupEndText);
 		builder.AddAttribute(114, nameof(HxMultiSelectInternal<TValue, TItem>.InputGroupEndTemplate), InputGroupEndTemplate);
+		builder.AddAttribute(115, nameof(HxMultiSelectInternal<TValue, TItem>.EnableFiltering), EnableFiltering);
+		builder.AddAttribute(116, nameof(HxMultiSelectInternal<TValue, TItem>.FilterSelector), FilterSelector);
+		builder.AddAttribute(117, nameof(HxMultiSelectInternal<TValue, TItem>.OnHidden), EventCallback.Factory.Create<string>(this, HandleOnHiddenChanged));
+		builder.AddAttribute(118, nameof(HxMultiSelectInternal<TValue, TItem>.OnShown), EventCallback.Factory.Create<string>(this, HandleOnShownChanged));
 
 		builder.AddMultipleAttributes(200, this.AdditionalAttributes);
 
@@ -202,7 +221,14 @@ private string GetInputText()
 		{
 			return InputText;
 		}
-		else if ((InputTextSelector is null) || (Data is null) || (CurrentValue is null))
+
+		// If filtering is enabled and the dropdown is visible then we want to display the user-entered filter text instead of the selected values summary
+		if (EnableFiltering && IsShown)
+		{
+			return InputText;
+		}
+
+		if ((InputTextSelector is null) || (Data is null) || (CurrentValue is null))
 		{
 			return CurrentValueAsString;
 		}

Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor

@@ -6,24 +6,23 @@
     bool enabled = EnabledEffective && (ItemsToRender != null);
 }
 
-<div class="hx-multi-select dropdown" role="listbox">
-    <div class="@CssClassHelper.Combine((HasInputGroupsEffective ? "input-group" : null), InputGroupCssClass)" data-bs-toggle="@(enabled ? "dropdown" : null)" data-bs-auto-close="outside">
+<div @ref="elementReference" class="hx-multi-select dropdown" role="listbox">
+    <div class="@CssClassHelper.Combine((HasInputGroupsEffective ? "input-group" : null), InputGroupCssClass)" aria-expanded="@IsShown" data-bs-toggle="@(enabled ? "dropdown" : null)" data-bs-auto-close="outside">
         @if (InputGroupStartText is not null)
         {
             <span class="input-group-text">@InputGroupStartText</span>
         }
 
         @InputGroupStartTemplate
-
-        <input
-            @ref="inputElement"
-            type="text"
-            id="@InputId"
-            class="@InputCssClass"
-            value="@(((ItemsToRender == null) && !String.IsNullOrEmpty(NullDataText)) ? NullDataText : InputText)"
-            disabled="@(!enabled)"
-            readonly="true"
-            @attributes="this.AdditionalAttributes" />
+
+        <input type="text"
+               id="@InputId"
+               class="@InputCssClass"
+               value="@(((ItemsToRender == null) && !String.IsNullOrEmpty(NullDataText)) ? NullDataText : InputText)"
+               @oninput="HandleInputChanged"
+               disabled="@(!enabled)"
+               readonly="@(!EnableFiltering)"
+               @attributes="this.AdditionalAttributes" />
 
         @InputGroupEndTemplate
 
@@ -36,14 +35,15 @@
     <ul class="dropdown-menu"> @* Must be always rendered otherwise does not work after disable->enabled scenario *@
         @if (enabled)
         {
-            for (int i = 0; i < ItemsToRender.Count; i++)
+            var filteredItems = EnableFiltering ? ItemsToRender.Where(x => FilterSelector(x, InputText)).ToList() : ItemsToRender;
+            for (var i = 0; i < filteredItems.Count; i++)
             {
                 string checkboxElementId = InputId + "_" + i.ToString();
 
-                var item = ItemsToRender[i];
+                var item = filteredItems[i];
                 TValue value = SelectorHelpers.GetValue<TItem, TValue>(ValueSelector, item);
 
-                bool itemSelected = Value?.Contains(value) ?? false;
+                bool itemSelected = SelectedValues?.Contains(value) ?? false;
 
                 <li>
                     <button type="button" class="dropdown-item" role="option" @onclick="async () => await HandleItemSelectionChangedAsync(!itemSelected, item)">