fixes #572 [HxSearchBox] Initial suggestions disappear when the DataP…

…rovider response is quick
havit · Oct 16, 2023 · 2ea4ff5 · 2ea4ff5
1 parent 47b53b7
commit 2ea4ff5
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 7 deletions.
diff --git a/BlazorAppTest/Pages/HxSearchBox_Issue572_Test.razor b/BlazorAppTest/Pages/HxSearchBox_Issue572_Test.razor
@@ -0,0 +1,78 @@
+@page "/HxSearchBox_Issue572_Test"
+
+<HxSearchBox TItem="SearchBoxItem"
+			 DataProvider="ProvideSearchResults"
+			 MinimumLength="0"
+			 Label="Search"
+			 ItemTitleSelector="(i) => i.Title"
+@bind-TextQuery="textQuery"
+			 ItemSelectionBehavior="SearchBoxItemSelectionBehavior.SelectAndReplaceTextQueryWithItemTitle"
+			 OnItemSelected="HandleItemSelected"
+			 OnTextQueryTriggered="HandleTextQueryTriggered">
+	<DefaultContentTemplate>
+		<div class="small py-2 px-3 text-muted">Search for Mouse, Table or Door...</div>
+	</DefaultContentTemplate>
+</HxSearchBox>
+
+<p>selectedItemTitle: @selectedItemTitle</p>
+<p>textQueryTriggered: @textQueryTriggered</p>
+<p>textQuery: @textQuery</p>
+
+@code {
+	private string selectedItemTitle = string.Empty;
+	private string textQueryTriggered = string.Empty;
+	private string textQuery = string.Empty;
+	private void HandleItemSelected(SearchBoxItem item)
+	{
+		selectedItemTitle = item.Title;
+	}
+	private void HandleTextQueryTriggered(string text)
+	{
+		textQueryTriggered = text;
+	}
+	List<SearchBoxItem> Data { get; set; } = new()
+	{
+		new()
+		{
+			Title = "Table",
+			Subtitle = "$5000",
+			Icon = BootstrapIcon.Table
+		},
+		new()
+		{
+			Title = "Mouse",
+			Subtitle = "$40",
+			Icon = BootstrapIcon.Mouse
+		},
+		new()
+		{
+			Title = "Door",
+			Subtitle = "$100",
+			Icon = BootstrapIcon.DoorClosed
+		}
+	};
+
+	Task<SearchBoxDataProviderResult<SearchBoxItem>> ProvideSearchResults(SearchBoxDataProviderRequest request)
+	{
+		if (request.UserInput?.Length > 0)
+		{
+			SearchBoxDataProviderResult<SearchBoxItem> result2 = new()
+				{
+					Data = Data.Where(i => i.Title.Contains(request.UserInput, StringComparison.OrdinalIgnoreCase)).ToArray()
+				};
+			return Task.FromResult(result2);
+		}
+		SearchBoxDataProviderResult<SearchBoxItem> result = new()
+			{
+				Data = Data.Take(10).ToArray()
+			};
+		return Task.FromResult(result);
+	}
+
+	record SearchBoxItem
+	{
+		public string Title { get; set; }
+		public string Subtitle { get; set; }
+		public BootstrapIcon Icon { get; set; }
+	}
+}
diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/SearchBox/HxSearchBox.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/SearchBox/HxSearchBox.razor.cs
@@ -500,12 +500,7 @@ private async Task HandleInputFocus()
 			await UpdateSuggestionsAsync();
 		}
 
-		if (!clickIsComing)
-		{
-			// clickIsComing logic fixes #572 - Initial suggestions disappear when the DataProvider response is quick
-			// If click is coming, we do not want to show the dropdown as it will be toggled by the later click event (if we open it here, onfocus, click will hide it)
-			await ShowDropdownMenu();
-		}
+		await ShowDropdownMenu();
 	}
 
 	private void HandleInputBlur()
@@ -586,7 +581,12 @@ private void HandleDropdownMenuHidden()
 
 	private async Task ShowDropdownMenu()
 	{
-		await dropdownToggle.ShowAsync();
+		if (!clickIsComing)
+		{
+			// clickIsComing logic fixes #572 - Initial suggestions disappear when the DataProvider response is quick
+			// If click is coming, we do not want to show the dropdown as it will be toggled by the later click event (if we open it here, onfocus, click will hide it)
+			await dropdownToggle.ShowAsync();
+		}
 	}
 
 	private async Task HideDropdownMenu()