Fix oqtane#4778: update the tabstrip view after render.

Oqtane.Client/Modules/Controls/TabStrip.razor

@@ -16,7 +16,7 @@
                         }
                         else
                         {
-							<a class="nav-link" data-bs-toggle="tab" href="#@(Id + tabPanel.Name)" role="tab" @onclick:preventDefault="true">
+                            <a class="nav-link" data-bs-toggle="tab" href="#@(Id + tabPanel.Name)" role="tab" @onclick:preventDefault="true">
                                 @tabPanel.DisplayHeading()
                             </a>
                         }
@@ -32,34 +32,43 @@
 </CascadingValue>
 
 @code {
-	private List<TabPanel> _tabPanels;
-	private string _tabpanelid = string.Empty;
+    public override List<Resource> Resources { get; set; } = new List<Resource>()
+    {
+        new Resource { ResourceType = ResourceType.Script, Url = "js/controls.interop.js", Location = ResourceLocation.Body }
+    };
 
-	[Parameter]
-	public RenderFragment ChildContent { get; set; } // contains the TabPanels
+    private List<TabPanel> _tabPanels;
+    private string _tabpanelid = string.Empty;
 
-	[Parameter]
-	public string ActiveTab { get; set; } // optional - defaults to first TabPanel if not specified. Can also be set using a "tab=" querystring parameter.
+    [Parameter]
+    public RenderFragment ChildContent { get; set; } // contains the TabPanels
 
-	[Parameter]
-	public bool Refresh { get; set; } // optional - used in scenarios where TabPanels are added/removed dynamically within a parent form. ActiveTab may need to be reset as well when this property is used.
+    [Parameter]
+    public string ActiveTab { get; set; } // optional - defaults to first TabPanel if not specified. Can also be set using a "tab=" querystring parameter.
 
-	[Parameter]
-	public string Id { get; set; } // optional - used to uniquely identify an instance of a tab strip component (will be set automatically if no value provided)
+    [Parameter]
+    public bool Refresh { get; set; } // optional - used in scenarios where TabPanels are added/removed dynamically within a parent form. ActiveTab may need to be reset as well when this property is used.
+
+    [Parameter]
+    public string Id { get; set; } // optional - used to uniquely identify an instance of a tab strip component (will be set automatically if no value provided)
 
     [Parameter]
     public string TabContentClass { get; set; } // optional - to extend the TabContent div.
 
-	protected override void OnInitialized()
-	{
-		if (string.IsNullOrEmpty(Id))
-		{
-			// create unique id for component
-			Id = "TabStrip_" + Guid.NewGuid().ToString("N") + "_" ;
-		}
-	}
-
-	protected override void OnParametersSet()
+    private TabStripInterop _interop;
+
+    protected override void OnInitialized()
+    {
+        if (string.IsNullOrEmpty(Id))
+        {
+            // create unique id for component
+            Id = "TabStrip_" + Guid.NewGuid().ToString("N") + "_" ;
+        }
+
+        _interop = new TabStripInterop(JSRuntime);
+    }
+
+    protected override void OnParametersSet()
     {
         if (PageState.QueryString.ContainsKey("tab"))
         {
@@ -110,4 +119,11 @@
         }
         return authorized;
     }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await base.OnAfterRenderAsync(firstRender);
+
+        await _interop.UpdateView(Id);
+    }
 }

Oqtane.Client/UI/ControlsInterop.cs

@@ -0,0 +1,31 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+using System.Threading.Tasks;
+using System.Text.Json;
+using System.Collections.Generic;
+using System.Linq;
+
+namespace Oqtane.UI
+{
+    public class TabStripInterop
+    {
+        private readonly IJSRuntime _jsRuntime;
+
+        public TabStripInterop(IJSRuntime jsRuntime)
+        {
+            _jsRuntime = jsRuntime;
+        }
+
+        public async Task UpdateView(string id)
+        {
+            try
+            {
+                await _jsRuntime.InvokeVoidAsync("Oqtane.Controls.TabStrip.Interop.updateView",id);
+            }
+            catch
+            {
+                //do nothing here.
+            }
+        }
+    }
+}

Oqtane.Server/wwwroot/js/controls.interop.js

@@ -0,0 +1,17 @@
+var Oqtane = Oqtane || {};
+Oqtane.Controls = Oqtane.Controls || {};
+
+//interop functions for tabstrip control
+Oqtane.Controls.TabStrip = Oqtane.Controls.TabStrip || {};
+Oqtane.Controls.TabStrip.Interop = {
+    updateView: function (id) {
+        var activeTab = document.querySelector('.nav-tabs .nav-item a.active[href^="#' + id + '"]');
+        if (activeTab != null) {
+            var tabPanel = document.getElementById(activeTab.getAttribute("href").replace("#", ""));
+            if (tabPanel != null && !tabPanel.classList.contains("active")) {
+                document.querySelectorAll('div[id^="' + id + '"]').forEach(i => i.classList.remove('show', 'active'));
+                tabPanel.classList.add('show', 'active');
+            }
+        }
+    }
+};