fixed #796 [HxTabPanel] When InitialActiveTabId not set, first tab sh…

…ould be default (also #690)
havit · Apr 24, 2024 · 872d667 · 872d667
1 parent e8216b2
commit 872d667
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 34 deletions.
diff --git a/Havit.Blazor.Components.Web.Bootstrap/Tabs/HxTabPanel.razor b/Havit.Blazor.Components.Web.Bootstrap/Tabs/HxTabPanel.razor
@@ -7,38 +7,38 @@
 @{
 	var tabsListOrdered = _tabsList.OrderBy(tab => tab.Order).ToList();
 	RenderFragment tabsNavigation =
-	@<HxNav CssClass="@CssClassHelper.Combine("hx-tab-panel", GetNavCssClassInCardMode(), CssClass)" Variant="NavVariant">
-		@foreach (HxTab tab in tabsListOrdered)
-					{
-		@if (tab.Visible)
-		{
-			<HxNavLink @key="@tab.Id"
-					   OnClick="async () => await HandleTabClick(tab)"
-					   CssClass="@CssClassHelper.Combine((IsActive(tab) ? "active" : null), tab.TitleCssClass)"
-					   Enabled="CascadeEnabledComponent.EnabledEffective(tab)">
-				@tab.Title
-				@tab.TitleTemplate
-			</HxNavLink>
-		}
-					}
-	</HxNav>;
+		@<HxNav CssClass="@CssClassHelper.Combine("hx-tab-panel", GetNavCssClassInCardMode(), CssClass)" Variant="NavVariant">
+			@foreach (HxTab tab in tabsListOrdered)
+			{
+				@if (tab.Visible)
+				{
+					<HxNavLink @key="@tab.Id"
+							   OnClick="async () => await HandleTabClick(tab)"
+							   CssClass="@CssClassHelper.Combine((IsActive(tab) ? "active" : null), tab.TitleCssClass)"
+							   Enabled="CascadeEnabledComponent.EnabledEffective(tab)">
+						@tab.Title
+						@tab.TitleTemplate
+					</HxNavLink>
+				}
+			}
+		</HxNav>;
 
 	RenderFragment tabsContent =
-	@<div class="tab-content">
-		@foreach (HxTab tab in tabsListOrdered)
-				{
-		@if (tab.Visible)
-		{
-			if ((RenderMode == TabPanelRenderMode.AllTabs)
-			|| ((RenderMode == TabPanelRenderMode.ActiveTabOnly) && IsActive(tab)))
+		@<div class="tab-content">
+			@foreach (HxTab tab in tabsListOrdered)
 			{
-				<div @key="@tab.Id" class="@CssClassHelper.Combine("tab-pane", (IsActive(tab) ? "active" : String.Empty), tab.ContentCssClass)">
-					@tab.Content
-				</div>
-			}
-		}
+				@if (tab.Visible)
+				{
+					if ((RenderMode == TabPanelRenderMode.AllTabs)
+						|| ((RenderMode == TabPanelRenderMode.ActiveTabOnly) && IsActive(tab)))
+					{
+						<div @key="@tab.Id" class="@CssClassHelper.Combine("tab-pane", (IsActive(tab) ? "active" : String.Empty), tab.ContentCssClass)">
+							@tab.Content
+						</div>
+					}
 				}
-	</div>;
+			}
+		</div>;
 }
 
 @if (Variant == TabPanelVariant.Standard)

diff --git a/Havit.Blazor.Components.Web.Bootstrap/Tabs/HxTabPanel.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Tabs/HxTabPanel.razor.cs
@@ -52,7 +52,8 @@ public partial class HxTabPanel : ComponentBase, IAsyncDisposable
 	protected virtual Task InvokeActiveTabIdChangedAsync(string newActiveTabId) => ActiveTabIdChanged.InvokeAsync(newActiveTabId);
 
 	/// <summary>
-	/// ID of the tab which should be active at the very beginning.
+	/// ID of the tab which should be active at the very beginning.<br />
+	/// We are considering deprecating this parameter. Please use <see cref="ActiveTabId"/> instead (<c>@bind-ActiveTabId</c>).
 	/// </summary>
 	[Parameter] public string InitialActiveTabId { get; set; }
 
@@ -81,8 +82,6 @@ public HxTabPanel()
 
 	protected override async Task OnInitializedAsync()
 	{
-		await base.OnInitializedAsync();
-
 		if (!String.IsNullOrWhiteSpace(InitialActiveTabId))
 		{
 			await SetActiveTabIdAsync(InitialActiveTabId);
@@ -91,7 +90,6 @@ protected override async Task OnInitializedAsync()
 
 	protected override async Task OnParametersSetAsync()
 	{
-		await base.OnParametersSetAsync();
 		await NotifyActivationAndDeactivationAsync();
 	}
 
@@ -134,12 +132,13 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
 		if (firstRender)
 		{
 			// when no tab is active after the initial render, activate the first visible & enabled tab
-			if (!_tabsList.Any(tab => IsActive(tab)) && (_tabsList.Count > 0))
+			if (String.IsNullOrWhiteSpace(ActiveTabId))
 			{
-				HxTab tabToActivate = _tabsList.FirstOrDefault(tab => CascadeEnabledComponent.EnabledEffective(tab) && tab.Visible);
+				var tabToActivate = GetDefaultActiveTab();
 				if (tabToActivate != null)
 				{
 					await SetActiveTabIdAsync(tabToActivate.Id);
+					StateHasChanged();
 				}
 			}
 		}
@@ -155,9 +154,21 @@ protected async Task HandleTabClick(HxTab tab)
 
 	private bool IsActive(HxTab tab)
 	{
+		if (String.IsNullOrWhiteSpace(ActiveTabId))
+		{
+			// no active tab set, activate the first visible & enabled tab
+			return tab.Id == GetDefaultActiveTab()?.Id;
+		}
 		return ActiveTabId == tab.Id;
 	}
 
+	private HxTab GetDefaultActiveTab()
+	{
+		return _tabsList
+					.OrderBy(tab => tab.Order)
+					.FirstOrDefault(t => t.Visible && (((ICascadeEnabledComponent)t).Enabled ?? true));
+	}
+
 	protected string GetNavCssClassInCardMode()
 	{
 		if (Variant != TabPanelVariant.Card)

diff --git a/Havit.Blazor.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml b/Havit.Blazor.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml
@@ -9458,6 +9458,9 @@
             <summary>
             ID of the tab which should be active at the very beginning.
             </summary>
+            <remarks>
+            Obsolete? Use @bind-<see cref="P:Havit.Blazor.Components.Web.Bootstrap.HxTabPanel.ActiveTabId"/> instead.
+            </remarks>
         </member>
         <member name="P:Havit.Blazor.Components.Web.Bootstrap.HxTabPanel.ChildContent">
             <summary>