SimpleSelect - working example, waiting for css fix for not closing the select box upon clicking inside it

src/Connected.Components/Components/SimpleSelect.razor

@@ -6,20 +6,53 @@
 
 @if (Items is not null)
 {
-    <div class="@InputFieldClassList">
+   <div class="@InputFieldClassList">
-        @if (EnableSearch)
+        
-        {
+        <select type="textarea" style="height:0px;" @attributes=@InputAttributes>
-            <TextInput Placeholder="Enter search.."
+            </select>
-               @bind-Value="@SearchText" />
+            @if (IsLabel)
-        }
-        <select @onchange="@ChangeValueAsync">
-            @foreach (ValueType item in Items)
             {
-                @if (item is not null)
+                <label class="label-animated">@Label</label>
+            }
+
+            <span class="highlight"></span>
+            <span class="bar">
+            </span>
+            <span class="input-glyph-wraper">
+                @if (Clearable)
                 {
-                    <option value="@item">@item.ToString()</option>
+                    <span class="input-glyph button">
+                        <i class='bx bx-x-circle'></i>
+                    </span>
                 }
-            }
+                    <span class="input-glyph">
-        </select>
+                        <i class='bx bx-caret-down'></i>
-    </div>
+                    </span>
+                @if (IsError)
+                {
+                    <span class="input-glyph error">
+                        <i class='bx bx-error-circle'></i>
+                    </span>
+                }
+            </span>
+            <div class="drop-down">
+                <div class="dropdown-menu p-2" aria-labelledby="dropdownMenuButton">
+                    @if (EnableSearch)
+                    {
+                        <input type="text"
+                            placeholder="Enter search string..."
+                            class="dropdown-item"
+                            @bind-value="@SearchText"
+                        />
+                    }
+                    @foreach (ValueType item in Items)
+                    {
+                        @if (item is not null)
+                        {
+                            <div class="dropdown-item" @onclick=@(()=>SetSelectedItem(@item))>@item.ToString()</div>
+                        }
+                    }
+                </div>
+        </div>
+   </div>
 }

src/Connected.Components/Components/SimpleSelect.razor.cs

@@ -1,7 +1,5 @@
 using Connected.Models;
 using Microsoft.AspNetCore.Components;
-using Microsoft.AspNetCore.Components.Web;
-using System;
 
 namespace Connected.Components;
 public partial class SimpleSelect<ValueType> : InputBase
@@ -31,6 +29,29 @@ public partial class SimpleSelect<ValueType> : InputBase
 		}
 	}
 
+	private string DropDownClass { get; set; } = "drop-down";
+
+	bool DropDownClicked = false;
+
+	public void DropDownClassToggle()
+	{
+		DropDownClicked = !DropDownClicked;
+		if (DropDownClicked)
+		{
+			DropDownClass = "";
+		} else
+		{
+			DropDownClass = "drop-down";
+		}
+		StateHasChanged();
+	}
+
+	private async Task SetSelectedItem(ValueType item)
+	{
+		//DropDownClassToggle();
+		await ValueChanged.InvokeAsync(item);
+	}
+
 	private async Task FilterItems()
 	{
 		if (string.IsNullOrEmpty(_searchText))
@@ -61,6 +82,7 @@ public partial class SimpleSelect<ValueType> : InputBase
 			if (base.InputAttributes.ContainsKey("required")) base.InputAttributes.Add("required", true);
 		}
 		OriginalItems = Items;
+		if (_searchText.Length>0) await FilterItems();
 		await base.OnInitializedAsync();
 	}
 }