#791 [HxInputDate] FocusAsync() not working + other indirect input-co…

…mponents might be also affected - opening dropdown when focused
havit · Jun 27, 2024 · 5a1fb4f · 5a1fb4f
1 parent e6e3a7c
commit 5a1fb4f
Show file tree

Hide file tree

Showing 10 changed files with 211 additions and 200 deletions.
diff --git a/BlazorAppTest/Pages/HxAutosuggestTest.razor b/BlazorAppTest/Pages/HxAutosuggestTest.razor
@@ -10,7 +10,7 @@
 </HxAutosuggest>
 <p>Value: @value1</p>
 
-<HxAutosuggest @ref="autosuggest1" Label="Floating label" TItem="CultureInfo" LabelType="LabelType.Floating" InputGroupEndText="End" InputGroupStartText="Start" TValue="int" @bind-Value="@value1" DataProvider="ProvideSuggestions" ValueSelector="(CultureInfo c) => c.LCID" ItemFromValueResolver="(int lcid) => Task.FromResult(CultureInfo.GetCultureInfo(lcid))" Delay="0">
+<HxAutosuggest Label="Floating label" TItem="CultureInfo" LabelType="LabelType.Floating" InputGroupEndText="End" InputGroupStartText="Start" TValue="int" @bind-Value="@value1" DataProvider="ProvideSuggestions" ValueSelector="(CultureInfo c) => c.LCID" ItemFromValueResolver="(int lcid) => Task.FromResult(CultureInfo.GetCultureInfo(lcid))" Delay="0">
 	<ItemTemplate Context="item">@item.EnglishName <sup>@item.LCID</sup></ItemTemplate>
 </HxAutosuggest>
 <p>Value: @value1</p>
@@ -31,6 +31,8 @@
 	</EmptyTemplate>
 </HxAutosuggest>
 <p>Value: @value3</p>
+
+<HxButton Text="Focus" Color="ThemeColor.Secondary" OnClick="async () => await autosuggest1.FocusAsync()" />
 @code
 {
 	private int value1 = 1029; // default value to display
@@ -73,15 +75,4 @@
 			};
 		}
 	}
-
-	protected override async Task OnAfterRenderAsync(bool firstRender)
-	{
-		await base.OnAfterRenderAsync(firstRender);
-
-		if (firstRender)
-		{
-			await autosuggest1.FocusAsync();
-		}
-	}
-
 }
diff --git a/BlazorAppTest/Pages/HxInputDateRangeTest.razor b/BlazorAppTest/Pages/HxInputDateRangeTest.razor
@@ -7,17 +7,20 @@
 		<DataAnnotationsValidator />
 		<ValidationSummary />
 
-		<HxInputDateRange Label="HxInputDateRange (default)" CalendarIcon="BootstrapIcon.Calendar" @bind-Value="@model.DateTimeRange" CalendarDateCustomizationProvider="GetCalendarDateCustomization" />
+		<HxInputDateRange @ref="inputDateRangeComponent" Label=" HxInputDateRange (default)" CalendarIcon="BootstrapIcon.Calendar" @bind-Value="@model.DateTimeRange" CalendarDateCustomizationProvider="GetCalendarDateCustomization" />
 		<HxInputDateRange Label="HxInputDateRange (no DateRanges, no validation)" @bind-Value="@model.DateTimeRange" ShowPredefinedDateRanges="false" ValidationMessageMode="ValidationMessageMode.None" />
 		<HxInputDateRange Label="HxInputDateRange (custom DateRanges)" @bind-Value="@model.DateTimeRange" PredefinedDateRanges="@GetPredefinedDateRanges()" />
 		<HxInputDateRange Label="HxInputDateRange (disabled)" @bind-Value="@model.DateTimeRange" PredefinedDateRanges="@GetPredefinedDateRanges()" Enabled="false" />
 
 		<button type="submit">Submit</button>
 	</EditForm>
+
+	<HxButton Text="Focus" Color="ThemeColor.Secondary" OnClick="async () => await inputDateRangeComponent.FocusAsync()" />
 </div>
 
 	@code {
 		private FormModel model = new FormModel();
+		private HxInputDateRange inputDateRangeComponent;
 
 		private IEnumerable<InputDateRangePredefinedRangesItem> GetPredefinedDateRanges()
 		{

diff --git a/BlazorAppTest/Pages/HxInputDateTest.razor b/BlazorAppTest/Pages/HxInputDateTest.razor
@@ -5,7 +5,7 @@
 	<DataAnnotationsValidator />
 	<ValidationSummary />
 
-	<HxInputDate Label="HxInputDate (default, DateTime), Floating Label" @bind-Value="@model.DateTime" LabelType="LabelType.Floating"/>
+	<HxInputDate @ref="inputDateComponent" Label="HxInputDate (default, DateTime), Floating Label" @bind-Value="@model.DateTime" LabelType="LabelType.Floating" />
 	<HxInputDate InputSize="InputSize.Small" Label="HxInputDate (default, DateTime) InputSize: Small" @bind-Value="@model.DateTime" />
 	<HxInputDate InputSize="InputSize.Large" Label="HxInputDate (default, DateTime) InputSize: Large" @bind-Value="@model.DateTime" />
 	<HxInputDate Label="HxInputDate (default, DateTime?)" @bind-Value="@model.NullableDateTime" Placeholder="Datum narození" />
@@ -42,7 +42,10 @@
 	<button type="submit">Submit</button>
 </EditForm>
 
+<HxButton Text="Focus" Color="ThemeColor.Secondary" OnClick="async () => await inputDateComponent.FocusAsync()" />
+
 @code {
+	private HxInputDate<DateTime> inputDateComponent;
 	private FormModel model = new FormModel();
 
 	private IEnumerable<InputDatePredefinedDatesItem> GetPredefinedDates()

diff --git a/BlazorAppTest/Pages/HxInputTagsTest.razor b/BlazorAppTest/Pages/HxInputTagsTest.razor
@@ -9,7 +9,7 @@
 	<EditForm Model="model">
 		<Blazored.FluentValidation.FluentValidationValidator />
 		<ValidationSummary />
-		<HxInputTags Label="Tags" @bind-Value="model.Tags" DataProvider="GetNewItemSuggestions" />
+		<HxInputTags @ref="inputTagsComponent" Label="Tags" @bind-Value="model.Tags" DataProvider="GetNewItemSuggestions" />
 		<HxInputTags Label="Tags (shared Value, Large)" @bind-Value="model.Tags" DataProvider="GetNewItemSuggestions" InputSize="InputSize.Large" />
 		<HxInputTags Label="Tags (shared Value, Small)" @bind-Value="model.Tags" DataProvider="GetNewItemSuggestions" InputSize="InputSize.Small" />
 		<HxInputTags ShowAddButton="true" AddButtonText="Add tag" Naked Label="Tags Naked" @bind-Value="model.Tags" DataProvider="GetNewItemSuggestions" />
@@ -19,12 +19,16 @@
 	</EditForm>
 </HxFormState>
 
-Tags: @tags
+
+<p>Tags: @tags</p>
+
+<HxButton Text="Focus" Color="ThemeColor.Secondary" OnClick="async () => await inputTagsComponent.FocusAsync()" />
 
 @code {
 	private bool enabled = true;
 	private MyModel model = new MyModel();
-	string tags;
+	private string tags;
+	private HxInputTags inputTagsComponent;
 
 	private Task<InputTagsDataProviderResult> GetNewItemSuggestions(InputTagsDataProviderRequest request)
 	{

diff --git a/BlazorAppTest/Pages/HxMultiSelectTest.razor b/BlazorAppTest/Pages/HxMultiSelectTest.razor
@@ -6,80 +6,83 @@
 <HxSwitch Text="Enabled" @bind-Value="@enabled" />
 
 <EditForm Model="@model">
-	<HxMultiSelect TItem="CultureInfo" TValue="string" Label="Cultures" EmptyText="-- choose here --" TextSelector="@(item => item.EnglishName)" ValueSelector="@(item => item.EnglishName)" Data="@data" @bind-Value="@model.CultureInfos" NullDataText="Loading languages..." Enabled="@enabled" InputSize="InputSize.Small" />
+	<HxMultiSelect @ref="multiSelectComponent" TItem="CultureInfo" TValue="string" Label="Cultures" EmptyText="-- choose here --" TextSelector="@(item => item.EnglishName)" ValueSelector="@(item => item.EnglishName)" Data="@data" @bind-Value="@model.CultureInfos" NullDataText="Loading languages..." Enabled="@enabled" InputSize="InputSize.Small" />
 
 	<HxMultiSelect TItem="CultureInfo" TValue="string" Label="Cultures" EmptyText="-- choose here --" TextSelector="@(item => item.EnglishName)" ValueSelector="@(item => item.EnglishName)" Data="@data" @bind-Value="@model.CultureInfos" NullDataText="Loading languages..." Enabled="@enabled" />
 
-    <HxMultiSelect TItem="CultureInfo" TValue="string" Label="Cultures" EmptyText="-- choose here --" TextSelector="@(item => item.EnglishName)" ValueSelector="@(item => item.EnglishName)" Data="@data" @bind-Value="@model.CultureInfos" NullDataText="Loading languages..." Enabled="@enabled" InputSize="InputSize.Large" />
+	<HxMultiSelect TItem="CultureInfo" TValue="string" Label="Cultures" EmptyText="-- choose here --" TextSelector="@(item => item.EnglishName)" ValueSelector="@(item => item.EnglishName)" Data="@data" @bind-Value="@model.CultureInfos" NullDataText="Loading languages..." Enabled="@enabled" InputSize="InputSize.Large" />
 
 	<HxMultiSelect TItem="CultureInfo" TValue="string" Label="Cultures" EmptyText="-- choose here --" TextSelector="@(item => item.EnglishName)" ValueSelector="@(item => item.EnglishName)" Data="@data" @bind-Value="@model.CultureInfos" NullDataText="Loading languages..." Enabled="@enabled">
-    
-    <InputGroupStartTemplate>
-		<HxButton Text="Button" Color="ThemeColor.Secondary" Outline="true" />
-	</InputGroupStartTemplate>
-	<InputGroupEndTemplate>
-		<HxButton Text="Button" Color="ThemeColor.Secondary" Outline="true" />
-	</InputGroupEndTemplate>
-    
-    </HxMultiSelect>
-    
-    <!-- Multi-select with default filtering and select all -->
-    <HxMultiSelect TItem="CultureInfo"
-                   TValue="string"
-                   Label="Cultures with default filtering and select all enabled"
-                   EmptyText="-- choose here --"
-                   TextSelector="@(item => item.EnglishName)"
-                   ValueSelector="@(item => item.EnglishName)"
-                   Data="@data"
-                   @bind-Value="@model.CultureInfos"
-                   NullDataText="Loading languages..."
-                   AllowFiltering="true"
-                   AllowSelectAll="true"
-                   Enabled="@enabled" />
-
-    <!-- Multi-select with custom filtering and select all -->
-    <HxMultiSelect TItem="CultureInfo"
-                   TValue="string"
-                   Label="Cultures with custom filtering and select all enabled"
-                   EmptyText="-- choose here --"
-                   TextSelector="@(item => item.EnglishName)"
-                   ValueSelector="@(item => item.EnglishName)"
-                   Data="@data"
-                   @bind-Value="@model.CultureInfos"
-                   NullDataText="Loading languages..."
-                   AllowFiltering="true"
-                   AllowSelectAll="true"
-                   SelectAllText="Select all cultures"
-                   Enabled="@enabled"
-                   InputSize="InputSize.Small">
-        <FilterEmptyResultTemplate>
-            <span class="p-2">Couldn't find any matching cultures</span>
-        </FilterEmptyResultTemplate>
-    </HxMultiSelect>
+
+		<InputGroupStartTemplate>
+			<HxButton Text="Button" Color="ThemeColor.Secondary" Outline="true" />
+		</InputGroupStartTemplate>
+		<InputGroupEndTemplate>
+			<HxButton Text="Button" Color="ThemeColor.Secondary" Outline="true" />
+		</InputGroupEndTemplate>
+
+	</HxMultiSelect>
+
+	<!-- Multi-select with default filtering and select all -->
+	<HxMultiSelect TItem="CultureInfo"
+				   TValue="string"
+				   Label="Cultures with default filtering and select all enabled"
+				   EmptyText="-- choose here --"
+				   TextSelector="@(item => item.EnglishName)"
+				   ValueSelector="@(item => item.EnglishName)"
+				   Data="@data"
+				   @bind-Value="@model.CultureInfos"
+				   NullDataText="Loading languages..."
+				   AllowFiltering="true"
+				   AllowSelectAll="true"
+				   Enabled="@enabled" />
+
+	<!-- Multi-select with custom filtering and select all -->
+	<HxMultiSelect TItem="CultureInfo"
+				   TValue="string"
+				   Label="Cultures with custom filtering and select all enabled"
+				   EmptyText="-- choose here --"
+				   TextSelector="@(item => item.EnglishName)"
+				   ValueSelector="@(item => item.EnglishName)"
+				   Data="@data"
+				   @bind-Value="@model.CultureInfos"
+				   NullDataText="Loading languages..."
+				   AllowFiltering="true"
+				   AllowSelectAll="true"
+				   SelectAllText="Select all cultures"
+				   Enabled="@enabled"
+				   InputSize="InputSize.Small">
+		<FilterEmptyResultTemplate>
+			<span class="p-2">Couldn't find any matching cultures</span>
+		</FilterEmptyResultTemplate>
+	</HxMultiSelect>
 </EditForm>
 
 <p>Selected values: @String.Join(", ", model.CultureInfos ?? Enumerable.Empty<string>())</p>
 
+<HxButton Text="Focus" Color="ThemeColor.Secondary" OnClick="async () => await multiSelectComponent.FocusAsync()" />
+
 @code
 {
-    private bool enabled = true;
-    private Model model = new Model();
-    private List<CultureInfo> data;
-
-    protected override async Task OnParametersSetAsync()
-    {
-        await base.OnParametersSetAsync();
-        await Task.Delay(3000);
-
-        data = CultureInfo.GetCultures(CultureTypes.SpecificCultures)
-            .OrderBy(item => item.EnglishName)
-            .Take(100)
-            .OrderByDescending(i => i.ToString()) // sorting test
-            .ToList();
-    }
-
-    private class Model
-    {
-        public List<string> CultureInfos { get; set; }
-    }
+	private bool enabled = true;
+	private Model model = new Model();
+	private List<CultureInfo> data;
+	private HxMultiSelect<string, CultureInfo> multiSelectComponent;
+
+	protected override async Task OnParametersSetAsync()
+	{
+		await base.OnParametersSetAsync();
+		await Task.Delay(3000);
+
+		data = CultureInfo.GetCultures(CultureTypes.SpecificCultures)
+			.OrderBy(item => item.EnglishName)
+			.Take(100)
+			.OrderByDescending(i => i.ToString()) // sorting test
+			.ToList();
+	}
+
+	private class Model
+	{
+		public List<string> CultureInfos { get; set; }
+	}
 }