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

@@ -3,16 +3,17 @@
 @typeparam TItem
 
 <div class="select-list">
-    <div class="select-button" @onfocusin=HandleFocusIn>
+    <div class="select-button" @onfocusin=HandleFocusIn @onfocusout=HandleFocusOut>
         <SearchInput @ref=SearchInput
                      Icon="SearchInputIcon.Dropdown"
                      TextChanged="HandleTextChanged"
                      ClearClicked="HandleTextChanged"
-                     SearchClicked="Toggle" />
+                     SearchClicked="HandleSearchClicked" />
     </div>
-    <div @onfocusout=HandleFocusOut
-         class="select-container @(AlignRight ? "align-right" : "")"
-         tabindex="1000">
+    <div class="select-container @(AlignRight ? "align-right" : "")"
+         tabindex="1000"
+         @onfocusin=HandleContentFocusIn
+         @onfocusout=HandleContentFocusOut>
 
         @if (ContentVisile)
         {

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

@@ -14,14 +14,24 @@ public partial class MultipleSelectList<TItem>
 
     private bool ContentVisile = false;
     private SearchInput? SearchInput;
+    private bool ShouldClose = false;
 
     public void Open() => ContentVisile = true;
 
-    public void Close() => ContentVisile = false;
+    public async Task Close()
+    {
+        await Task.Delay(TimeSpan.FromSeconds(0.2));
+
+        if (ShouldClose)
+        {
+            ContentVisile = false;
+            ShouldClose = false;
+        }
+    }
 
     public void Toggle() => ContentVisile = !ContentVisile;
 
-    private void HandleFocusOut() => Close();
+    private async Task HandleFocusOut() => await Close();
 
     private void HandleFocusIn() => Open();
 
@@ -33,13 +43,31 @@ public partial class MultipleSelectList<TItem>
         await ValuesChanged.InvokeAsync(Values);
     }
 
-    private void HandleTextChanged()
+    private async Task HandleTextChanged()
     {
         foreach (var item in Items)
         {
             item.IsSelected = false;
         }
 
-        Close();
+        await Close();
+    }
+    private void HandleContentFocusOut(Microsoft.AspNetCore.Components.Web.FocusEventArgs args)
+    {
+        ShouldClose = true;
+        ContentVisile = false;
+    }
+    private void HandleContentFocusIn(Microsoft.AspNetCore.Components.Web.FocusEventArgs args)
+    {
+        ShouldClose = true;
+    }
+    private void HandleSearchClicked()
+    {
+        if (ContentVisile)
+        {
+            ShouldClose = false;
+        }
+
+        ContentVisile = !ContentVisile;
     }
 }