Merge pull request #351 from havit/feature/HxSearchBoxKeyboardNavigation

[HxSearchBox] [HxAutoauggest] [HxInputTags] Keyboard navigation #348
havit · Sep 7, 2022 · ab0a342 · ab0a342
2 parents 26fe03c + 4deead6
commit ab0a342
Show file tree

Hide file tree

Showing 37 changed files with 660 additions and 357 deletions.
diff --git a/....Bootstrap.Documentation/Pages/Components/HxAutosuggestDoc/HxAutosuggest_Demo_Basic.razor b/....Bootstrap.Documentation/Pages/Components/HxAutosuggestDoc/HxAutosuggest_Demo_Basic.razor
@@ -1,14 +1,16 @@
 @using System.Globalization
 
 <HxAutosuggest Label="CultureInfo"
-               Placeholder="Click here"
+               Placeholder="Start typing to see suggestions"
                TItem="CultureInfo"
                TValue="int?"
                @bind-Value="@autosuggestValue"
                DataProvider="ProvideSuggestions"
                ValueSelector="(CultureInfo c) => c.LCID"
                ItemFromValueResolver="ResolveAutosuggestItemFromValue">
-    <ItemTemplate Context="item">@item.EnglishName <sup>@item.LCID</sup></ItemTemplate>
+    <ItemTemplate Context="item">
+        @item.EnglishName <sup>@item.LCID</sup>
+</ItemTemplate>
     <EmptyTemplate>
         <span class="p-2">Couldn't find any matching locale</span>
     </EmptyTemplate>
@@ -18,28 +20,28 @@
 
 @code
 {
-	private int? autosuggestValue = 1033;
+    private int? autosuggestValue = 1033;
 
-	private async Task<AutosuggestDataProviderResult<CultureInfo>> ProvideSuggestions(AutosuggestDataProviderRequest request)
-	{
-		await Task.Delay(400); // backend API speed simulation
-		return new AutosuggestDataProviderResult<CultureInfo>
-		{
-			Data = CultureInfo.GetCultures(CultureTypes.AllCultures)
-								.Where(c => c.LCID != 4096) // see Remarks: https://docs.microsoft.com/en-us/dotnet/api/system.globalization.cultureinfo.lcid?view=net-5.0#System_Globalization_CultureInfo_LCID
-								.Where(c => c.EnglishName?.Contains(request.UserInput, StringComparison.CurrentCultureIgnoreCase) ?? false)
-								.OrderBy(c => c.EnglishName)
-								.ToList()
-		};
-	}
+    private async Task<AutosuggestDataProviderResult<CultureInfo>> ProvideSuggestions(AutosuggestDataProviderRequest request)
+    {
+        await Task.Delay(400); // backend API speed simulation
+        return new AutosuggestDataProviderResult<CultureInfo>
+            {
+                Data = CultureInfo.GetCultures(CultureTypes.AllCultures)
+                            .Where(c => c.LCID != 4096) // see Remarks: https://docs.microsoft.com/en-us/dotnet/api/system.globalization.cultureinfo.lcid?view=net-5.0#System_Globalization_CultureInfo_LCID
+                            .Where(c => c.EnglishName?.Contains(request.UserInput, StringComparison.CurrentCultureIgnoreCase) ?? false)
+                            .OrderBy(c => c.EnglishName)
+                            .ToList()
+            };
+    }
 
-	private async Task<CultureInfo> ResolveAutosuggestItemFromValue(int? value)
-	{
-		if (value is null)
-		{
-			return null;
-		}
-		await Task.Delay(400); // backend API speed simulation
-		return CultureInfo.GetCultureInfo(value.Value);
-	}
+    private async Task<CultureInfo> ResolveAutosuggestItemFromValue(int? value)
+    {
+        if (value is null)
+        {
+            return null;
+        }
+        await Task.Delay(400); // backend API speed simulation
+        return CultureInfo.GetCultureInfo(value.Value);
+    }
 }
diff --git a/...otstrap.Documentation/Pages/Components/HxAutosuggestDoc/HxAutosuggest_Documentation.razor b/...otstrap.Documentation/Pages/Components/HxAutosuggestDoc/HxAutosuggest_Documentation.razor
@@ -2,17 +2,15 @@
 
 <ComponentApiDoc Type="typeof(HxAutosuggest<TItem, TValue>)">
     <MainContent>
-        <DocAlert Type="DocAlertType.Danger">
-            Due to breaking change in Bootstrap 5.2 the keyboard navigation does not work in <code>HxAutosuggest</code> and <code>HxSearchBox</code> (the <code>Up</code> and <code>Down</code> keys).
-            We are trying to fix this with Bootstrap team and will try to come up with a temporary solution on our side until the final solution will be available.<br />
-            You can check the progress here: <a href="https://github.com/havit/Havit.Blazor/issues/348">https://github.com/havit/Havit.Blazor/issues/348</a>.
-        </DocAlert>
-
+
         <DocAlert Type="DocAlertType.Warning">
-            Although <code>HxAutosuggest</code> supports <a href="/components/Inputs#InputGroups">input groups</a>, ending input groups conflict with the search icon, therefore, when <code>InputGroupEndText</code> or <code>InputGroupEndTemplate</code> are set, the search icon is not displayed.
+            Due to breaking change in Bootstrap 5.2, the keyboard navigation stopped working for dropdowns triggered from <code>input</code> (the <code>Up</code> and <code>Down</code> keys).
+            As an experimental feature we added our own keyboard navigation routines to the affected components. This might be subject to future change.
+            You can check the progress here: <a href="https://github.com/havit/Havit.Blazor/issues/348">https://github.com/havit/Havit.Blazor/issues/348</a>.
         </DocAlert>
 
         <Demo Type="typeof(HxAutosuggest_Demo_Basic)" />
+
     </MainContent>
     <CssVariables>
         <ComponentApiDocCssVariable Name="--hx-autosuggest-input-close-icon-opacity" Default=".25">

diff --git a/...b.Bootstrap.Documentation/Pages/Components/HxInputTagsDoc/HxInputTags_Documentation.razor b/...b.Bootstrap.Documentation/Pages/Components/HxInputTagsDoc/HxInputTags_Documentation.razor
@@ -2,7 +2,13 @@
 
 <ComponentApiDoc Type="typeof(HxInputTags)">
 	<MainContent>
-		<SectionTitle Id="BasicUsage" />
+        <DocAlert Type="DocAlertType.Warning">
+            Due to breaking change in Bootstrap 5.2, the keyboard navigation stopped working for dropdowns triggered from <code>input</code> (the <code>Up</code> and <code>Down</code> keys).
+            As an experimental feature we added our own keyboard navigation routines to the affected components. This might be subject to future change.
+            You can check the progress here: <a href="https://github.com/havit/Havit.Blazor/issues/348">https://github.com/havit/Havit.Blazor/issues/348</a>.
+        </DocAlert>
+
+        <SectionTitle Id="BasicUsage" />
 		<Demo Type="typeof(HxInputTags_Demo_Basic)" />
 
 		<SectionTitle Id="StaticSuggestions" />

diff --git a/...onents.Web.Bootstrap.Documentation/Pages/Components/HxSearchBoxDoc/HxSearchBox_Demo.razor b/...onents.Web.Bootstrap.Documentation/Pages/Components/HxSearchBoxDoc/HxSearchBox_Demo.razor
@@ -1,12 +1,10 @@
 <HxSearchBox DataProvider="ProvideSearchResults"
+             TItem="SearchBoxItem"
              ItemTitleSelector="i => i.Title"
              ItemSubtitleSelector="i => i.Subtitle"
              ItemIconSelector="i => i.Icon"
-             TItem="SearchBoxItem"
              Placeholder="Search"
              OnItemSelected="OnItemSelected"
-             AllowTextQuery="true"
-             @bind-TextQuery="textQuery"
              OnTextQueryTriggered="OnTextQueryTriggered">
     <DefaultContentTemplate>
         <div class="p-2 text-muted">Search for Mouse, Table or Door...</div>
@@ -18,21 +16,21 @@
 
 <p class="mt-3">
     Last selected item: @selectedItem?.Title<br/>
-    Triggered text-query: @triggeredTextQuery<br />
-    Bound text-query: @textQuery<br />
+    Last triggered text-query: @triggeredTextQuery<br />
 </p>
 
 @code {
     private SearchBoxItem selectedItem;
     private string triggeredTextQuery;
-    private string textQuery;
 
     List<SearchBoxItem> Data { get; set; } = new()
-        {
-            new() { Title = "Table", Subtitle = "50 000", Icon = BootstrapIcon.Table },
-            new() { Title = "Mouse", Subtitle = "400", Icon = BootstrapIcon.Mouse },
-            new() { Title = "Door", Subtitle = "1000", Icon = BootstrapIcon.DoorClosed }
-        };
+    {
+        new() { Title = "Table", Subtitle = "50 000", Icon = BootstrapIcon.Table },
+        new() { Title = "Mouse", Subtitle = "400", Icon = BootstrapIcon.Mouse },
+        new() { Title = "Door", Subtitle = "1000", Icon = BootstrapIcon.DoorClosed },
+        new() { Title = "Big table", Subtitle = "9 000", Icon = BootstrapIcon.Table },
+        new() { Title = "Small table", Subtitle = "7 200", Icon = BootstrapIcon.Table }
+    };
 
     private void OnItemSelected(SearchBoxItem item)
     {
@@ -49,12 +47,12 @@
         await Task.Delay(400); // imitate slower server API
 
         return new()
-            {
-                Data = Data.Where(i => i.Title.Contains(request.UserInput, StringComparison.OrdinalIgnoreCase))
-            };
+        {
+            Data = Data.Where(i => i.Title.Contains(request.UserInput, StringComparison.OrdinalIgnoreCase))
+        };
     }
 
-    class SearchBoxItem
+    internal class SearchBoxItem
     {
         public string Title { get; set; }
         public string Subtitle { get; set; }

diff --git a/...rap.Documentation/Pages/Components/HxSearchBoxDoc/HxSearchBox_Demo_DisableTextQuery.razor b/...rap.Documentation/Pages/Components/HxSearchBoxDoc/HxSearchBox_Demo_DisableTextQuery.razor
@@ -0,0 +1,54 @@
+<HxSearchBox DataProvider="ProvideSearchResults"
+             TItem="SearchBoxItem"
+             ItemTitleSelector="i => i.Title"
+             ItemSubtitleSelector="i => i.Subtitle"
+             ItemIconSelector="i => i.Icon"
+             Placeholder="Search"
+             AllowTextQuery="false"
+             OnItemSelected="OnItemSelected">
+    <DefaultContentTemplate>
+        <div class="p-2 text-muted">Search for Mouse, Table or Door...</div>
+    </DefaultContentTemplate>
+    <NotFoundTemplate>
+        <div class="small py-2 px-3 text-muted"><HxIcon CssClass="me-2" Icon="BootstrapIcon.EmojiFrown"/>Sorry, I did not find that...</div>
+    </NotFoundTemplate>
+</HxSearchBox>
+
+<p class="mt-3">
+    Last selected item: @selectedItem?.Title<br/>
+</p>
+
+@code {
+    private SearchBoxItem selectedItem;
+
+    List<SearchBoxItem> Data { get; set; } = new()
+    {
+        new() { Title = "Table", Subtitle = "50 000", Icon = BootstrapIcon.Table },
+        new() { Title = "Mouse", Subtitle = "400", Icon = BootstrapIcon.Mouse },
+        new() { Title = "Door", Subtitle = "1000", Icon = BootstrapIcon.DoorClosed },
+        new() { Title = "Big table", Subtitle = "9 000", Icon = BootstrapIcon.Table },
+        new() { Title = "Small table", Subtitle = "7 200", Icon = BootstrapIcon.Table }
+    };
+
+    private void OnItemSelected(SearchBoxItem item)
+    {
+        selectedItem = item;
+    }
+
+    private async Task<SearchBoxDataProviderResult<SearchBoxItem>> ProvideSearchResults(SearchBoxDataProviderRequest request)
+    {
+        await Task.Delay(400); // imitate slower server API
+
+        return new()
+        {
+            Data = Data.Where(i => i.Title.Contains(request.UserInput, StringComparison.OrdinalIgnoreCase))
+        };
+    }
+
+    class SearchBoxItem
+    {
+        public string Title { get; set; }
+        public string Subtitle { get; set; }
+        public BootstrapIcon Icon { get; set; }
+    }
+}
diff --git a/...b.Bootstrap.Documentation/Pages/Components/HxSearchBoxDoc/HxSearchBox_Documentation.razor b/...b.Bootstrap.Documentation/Pages/Components/HxSearchBoxDoc/HxSearchBox_Documentation.razor
@@ -2,17 +2,18 @@
 
 <ComponentApiDoc Type="typeof(HxSearchBox<TItem>)">
     <MainContent>
-        <DocAlert Type="DocAlertType.Danger">
-            Due to breaking change in Bootstrap 5.2 the keyboard navigation does not work in <code>HxAutosuggest</code> and <code>HxSearchBox</code> (the <code>Up</code> and <code>Down</code> keys).
-            We are trying to fix this with Bootstrap team and will try to come up with a temporary solution on our side until the final solution will be available.<br />
+        <DocAlert Type="DocAlertType.Warning">
+            Due to breaking change in Bootstrap 5.2, the keyboard navigation stopped working for dropdowns triggered from <code>input</code> (the <code>Up</code> and <code>Down</code> keys).
+            As an experimental feature we added our own keyboard navigation routines to the affected components. This might be subject to future change.
             You can check the progress here: <a href="https://github.com/havit/Havit.Blazor/issues/348">https://github.com/havit/Havit.Blazor/issues/348</a>.
         </DocAlert>
 
         <SectionTitle>Basic usage</SectionTitle>
         <Demo Type="typeof(HxSearchBox_Demo)" />
-        <DocAlert Type="DocAlertType.Warning">
-            Although <code>HxSearchBox</code> supports <a href="/components/Inputs#InputGroups">input groups</a>, ending input groups conflict with the search icon, therefore, when <code>InputGroupEndText</code> or <code>InputGroupEndTemplate</code> are set, the search icon is not displayed.
-        </DocAlert>
+
+        <SectionTitle>Suggestions only</SectionTitle>
+        <p>You can disable free-text query by setting <code>AllowTextQuery="false"</code>. Only suggestions will be allowed.</p>
+        <Demo Type="typeof(HxSearchBox_Demo_DisableTextQuery)" />
     </MainContent>
     <CssVariables>
         <ComponentApiDocCssVariable Name="--hx-search-box-item-icon-margin" Default="0 .5rem 0 0">

diff --git a/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Migrations/MigratingToV3.razor b/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Migrations/MigratingToV3.razor
@@ -43,7 +43,13 @@
 <p>If you were using <code>PagerCssClass</code> in v2, replace it with new <code>PagerSettings</code> parameter:</p>
 <CodeSnippet Language="razor" File="~\Pages\Migrations\MigratingToV3_HxGridPagerSettings.CodeSnippet.razor" />
 
-<h5>4. [OPTIONAL] Replace obsolete components with new ones</h5>
+<h5>3.4 <code>HxAutosuggest</code> first item highlighting</h5>
+<p>
+    The <code>HighlightFirstSuggestion</code> parameter was removed. The component now highlights the first suggestion by default (cannot be disabled).
+    Remove the parameter from your code (incl. <code>HxAutosuggest.Settings</code> and <code>HxAutosuggest.Defaults</code>).
+</p>
+
+<h3>4. [OPTIONAL] Replace obsolete components with new ones</h3>
 <p>
     We replaced <code>HxInputCheckbox</code> with new <code>HxCheckbox</code> and <code>HxInputSwitch</code> with new <code>HxSwitch</code>.<br />
     The original <code>Label</code> parameter is now <code>Text</code> (the <code>Label</code> parameter of new components has a different purpose, see <a href="/components/HxCheckbox"><code>HxCheckbox</code> documentation</a>).