ComboBox: SearchString an Id Fix (#309)

* ComboBox SearchString Fix

* Add SearchField Id

Author: mckaragoz

CodeBeam.MudBlazor.Extensions.UnitTests.Viewer/TestComponents/Combobox/ComboboxMultiSelectEditableTest.razor

@@ -0,0 +1,14 @@
+@namespace MudExtensions.UnitTests.TestComponents
+<MudPopoverProvider></MudPopoverProvider>
+
+<MudComboBox @bind-SelectedValues="values" MultiSelection="true" Editable="true">
+    <MudComboBoxItem Value="@("one1")">one1</MudComboBoxItem>
+    <MudComboBoxItem Value="@("one2")">one2</MudComboBoxItem>
+    <MudComboBoxItem Value="@("two1")">two1</MudComboBoxItem>
+    <MudComboBoxItem Value="@("two2")">two2</MudComboBoxItem>
+</MudComboBox>
+
+
+@code {
+    IEnumerable<string> values = new HashSet<string>();
+}

CodeBeam.MudBlazor.Extensions.UnitTests/Components/ComboboxTests.cs

@@ -244,6 +244,33 @@ public void MultiSelect_SelectAll()
             combobox.Instance.SelectedValues.Should().BeEquivalentTo(new HashSet<string>());
         }
 
+        [Test]
+        public async Task Combobox_MultiSelectEditable()
+        {
+            var comp = Context.RenderComponent<ComboboxMultiSelectEditableTest>();
+            // print the generated html
+            Console.WriteLine(comp.Markup);
+            // select elements needed for the test
+            var combobox = comp.FindComponent<MudComboBox<string>>();
+            var menu = comp.Find("div.mud-popover");
+            var input = combobox.Find("div.mud-input-control");
+            // check initial state
+            combobox.Instance.Value.Should().BeNullOrEmpty();
+            comp.WaitForAssertion(() =>
+                comp.Find("div.mud-popover").ClassList.Should().Contain("d-none"));
+            // click and check if it has toggled the menu
+            await comp.InvokeAsync(() => input.MouseDown());
+            comp.WaitForAssertion(() => comp.Find("div.mud-popover").ClassList.Should().NotContain("d-none"));
+            // now click an item and see the value change
+            comp.WaitForAssertion(() => comp.FindAll("div.mud-combobox-item").Count.Should().Be(4));
+            comp.WaitForAssertion(() => combobox.Instance.GetEligibleAndNonDisabledItems().Count.Should().Be(4));
+            var items = comp.FindAll("div.mud-combobox-item").ToArray();
+            await comp.InvokeAsync(() => combobox.Instance.HandleInternalValueChanged("t"));
+            await comp.InvokeAsync(() => combobox.Instance.ForceRenderItems());
+            items = comp.FindAll("div.mud-combobox-item").ToArray();
+            comp.WaitForAssertion(() => combobox.Instance.GetEligibleAndNonDisabledItems().Count.Should().Be(2));
+        }
+
         /// <summary>
         /// Click should not close the menu and selecting multiple values should update the bindable value with a comma separated list.
         /// </summary>

CodeBeam.MudBlazor.Extensions/Components/ComboBox/MudComboBox.razor

@@ -119,7 +119,7 @@
                                     @if (Editable)
                                     {
                                         <div class="pa-2">
-                                            <MudTextFieldExtended @ref="_searchbox" T="string" Value="_searchString" ValueChanged="@HandleInternalValueChanged" Margin="Margin.Dense"
+                                            <MudTextFieldExtended id="@($"{_elementId}-autocomplete")" @ref="_searchbox" T="string" Value="_searchString" ValueChanged="@HandleInternalValueChanged" Margin="Margin.Dense"
                                                                   Variant="Variant.Outlined" Immediate="true" OnKeyDown="SearchBoxHandleKeyDown" OnKeyUp="SearchBoxHandleKeyUp" Clearable="@SearchBoxClearable">
                                                 <AdornmentEnd>
                                                     <MudIcon Icon="@Icons.Material.Filled.Search" Color="@Color" />

CodeBeam.MudBlazor.Extensions/Components/ComboBox/MudComboBox.razor.cs

@@ -25,7 +25,12 @@ public MudComboBox()
         [Inject] IScrollManagerExtended ScrollManagerExtended { get; set; }
         [Inject] IScrollManager ScrollManager { get; set; }
 
-        internal string _searchString;
+        protected internal void SetSearchString(T value)
+        {
+            _searchString = Converter.Set(value);
+        }
+
+        internal string _searchString { get; set; }
         private string multiSelectionText;
         private IKeyInterceptor _keyInterceptor;
 
@@ -321,7 +326,7 @@ public MudComboBox()
         public string Delimiter { get; set; } = ", ";
 
         /// <summary>
-        /// If true popover width will be the same as the select component.
+        /// If true popover width will be the same as the combobox component.
         /// </summary>
         [Parameter]
         [Category(CategoryTypes.FormComponent.Behavior)]
@@ -335,7 +340,7 @@ public MudComboBox()
         public int MaxHeight { get; set; } = 300;
 
         /// <summary>
-        /// Set the anchor origin point to determen where the popover will open from.
+        /// Set the anchor origin point to determine where the popover will open from.
         /// </summary>
         [Parameter]
         [Category(CategoryTypes.FormComponent.ListAppearance)]
@@ -908,16 +913,16 @@ protected internal async Task HandleOnBlur(FocusEventArgs obj)
                     {
                         await Clear();
                     }
-                        
-                    _searchString = Text;
+
+                    //_searchString = Text;
                 }
             }
 
 
             await OnBlurredAsync(obj);
         }
 
-        protected void HandleInternalValueChanged(string val)
+        protected internal void HandleInternalValueChanged(string val)
         {
             _searchString = val;
         }
@@ -1236,13 +1241,13 @@ protected async Task SelectAllItems()
             return null;
         }
 
-        protected void ForceRenderItems()
+        protected internal void ForceRenderItems()
         {
             Items.ForEach((x) => x.ForceRender());
             StateHasChanged();
         }
 
-        protected async Task ForceUpdateItems()
+        protected internal async Task ForceUpdateItems()
         {
             Items.ForEach(async (x) => await x.ForceUpdate());
         }
@@ -1406,7 +1411,7 @@ public async Task ActiveLastItem()
 
         #endregion
 
-        protected List<MudComboBoxItem<T>> GetEligibleAndNonDisabledItems()
+        protected internal List<MudComboBoxItem<T>> GetEligibleAndNonDisabledItems()
         {
             if (Items == null)
             {