fix multiple select list

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs

@@ -10,10 +10,13 @@ public partial class SelectListElement<TItem>
     [Parameter] public SelectListTheme Theme { get; set; }
     private async Task HandleItemClicked()
     {
-        if (Value != null)
+        if (Value == null)
         {
+            return;
+        }
+
         Value.IsSelected = true;
+        StateHasChanged();
         await ValueChanged.InvokeAsync(Value);
     }
-    }
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor

@@ -2,7 +2,7 @@
 @using GameIdeas.BlazorApp.Shared.Components.Select.Components
 @typeparam TItem
 
-<div class="select-list">
+<div class="select-list" tabindex="1001" @ref="BaseElement">
     <div class="select-button" @onfocusin=HandleFocusIn @onfocusout=HandleFocusOut>
         <SearchInput @ref=SearchInput
                      Icon="SearchInputIcon.Dropdown"
@@ -12,10 +12,11 @@
     </div>
     <div class="select-container @(AlignRight ? "align-right" : "")"
          tabindex="1000"
+         @ref=ContentElement
          @onfocusin=HandleContentFocusIn
          @onfocusout=HandleContentFocusOut>
 
-        @if (ContentVisile)
+        @if (IsContentOpen)
         {
             <div class="select-content @(Enum.GetName(Theme)?.ToLower())">
                 @foreach (var item in Items)

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs

@@ -12,32 +12,19 @@ public partial class MultipleSelectList<TItem>
     [Parameter] public SelectListTheme Theme { get; set; }
     [Parameter] public bool AlignRight { get; set; }
 
-    private bool ContentVisile = false;
+    private bool IsContentOpen
+    {
+        get => InputFocus || ContentFocus;
+    }
+
+    private bool InputFocus = false;
+    private bool ContentFocus = false;
     private SearchInput? SearchInput;
-    private bool ShouldClose = false;
+    private ElementReference ContentElement;
-
+    private ElementReference BaseElement;
-    public void Open() => ContentVisile = true;
-
-    public async Task Close()
-    {
-        await Task.Delay(TimeSpan.FromSeconds(0.2));
-
-        if (ShouldClose)
-        {
-            ContentVisile = false;
-            ShouldClose = false;
-        }
-    }
-
-    public void Toggle() => ContentVisile = !ContentVisile;
-
-    private async Task HandleFocusOut() => await Close();
-
-    private void HandleFocusIn() => Open();
 
     private async Task HandleItemClicked(SelectElement<TItem> selectedValue)
     {
-        selectedValue.IsSelected = !selectedValue.IsSelected;
         Values = Items.Where(x => x.IsSelected && x.Item != null).Select(x => x.Item!);
         SearchInput?.SetText(string.Join(", ", Values));
         await ValuesChanged.InvokeAsync(Values);
@@ -45,29 +32,40 @@ public partial class MultipleSelectList<TItem>
 
     private async Task HandleTextChanged()
     {
-        foreach (var item in Items)
+        await BaseElement.FocusAsync();
-        {
-            item.IsSelected = false;
     }
 
-        await Close();
+    private void HandleFocusIn()
-    }
-    private void HandleContentFocusOut(Microsoft.AspNetCore.Components.Web.FocusEventArgs args)
     {
-        ShouldClose = true;
+        InputFocus = true;
-        ContentVisile = false;
-    }
-    private void HandleContentFocusIn(Microsoft.AspNetCore.Components.Web.FocusEventArgs args)
-    {
-        ShouldClose = true;
-    }
-    private void HandleSearchClicked()
-    {
-        if (ContentVisile)
-        {
-            ShouldClose = false;
     }
 
-        ContentVisile = !ContentVisile;
+    private void HandleContentFocusIn()
+    {
+        ContentFocus = true;
+    }
+
+    private async Task HandleContentFocusOut()
+    {
+        await Task.Delay(TimeSpan.FromSeconds(0.3));
+        ContentFocus = false;
+    }
+
+    private async Task HandleFocusOut()
+    {
+        await Task.Delay(TimeSpan.FromSeconds(0.3));
+        InputFocus = false;
+    }
+
+    private async Task HandleSearchClicked()
+    {
+        if (!IsContentOpen)
+        {
+            await ContentElement.FocusAsync();
+        }
+        else
+        {
+            await BaseElement.FocusAsync();
+        }
     }
 }