Rework for Tabstrip regression issue

Fix for Tabpanel is not updating the UI. oqtane#4778 oqtane#4828
leigh-pointer · Nov 26, 2024 · a845dd1 · a845dd1
1 parent 9d7549d
commit a845dd1
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 29 deletions.
diff --git a/Oqtane.Client/Modules/Admin/Modules/Settings.razor b/Oqtane.Client/Modules/Admin/Modules/Settings.razor
@@ -242,7 +242,6 @@
 
     private async Task SaveModule()
     {
-
         validated = true;
         var interop = new Interop(JSRuntime);
         if (await interop.FormValid(form))
@@ -302,13 +301,13 @@
             }
             else
             {
-                //_activetab = "Settings";
+                _activetab = "Settings";
                 AddModuleMessage(Localizer["Message.Required.Title"], MessageType.Warning);
             }
         }
         else
         {
-            //_activetab = "Settings";
+            _activetab = "Settings";
             AddModuleMessage(SharedLocalizer["Message.InfoRequired"], MessageType.Warning);
         }
     }

diff --git a/Oqtane.Client/Modules/Admin/Pages/Add.razor b/Oqtane.Client/Modules/Admin/Pages/Add.razor
@@ -469,18 +469,21 @@
                 }
                 else
                 {
+                    _activetab = "Settings";
                     AddModuleMessage(Localizer["Message.Required.PageInfo"], MessageType.Warning);
                 }
 
             }
             catch (Exception ex)
             {
                 await logger.LogError(ex, "Error Saving Page {Page} {Error}", page, ex.Message);
+                _activetab = "Settings";
                 AddModuleMessage(Localizer["Error.Page.Save"], MessageType.Error);
             }
         }
         else
         {
+            _activetab = "Settings";
             AddModuleMessage(SharedLocalizer["Message.InfoRequired"], MessageType.Warning);
         }
     }

diff --git a/Oqtane.Client/Modules/Admin/Pages/Edit.razor b/Oqtane.Client/Modules/Admin/Pages/Edit.razor
@@ -673,22 +673,19 @@
                 else
                 {
                     _activetab = "Settings";
-                    _refresh = true;
                     AddModuleMessage(Localizer["Message.Required.PageInfo"], MessageType.Warning);                    
                 }
             }
             catch (Exception ex)
             {
                 await logger.LogError(ex, "Error Saving Page {Page} {Error}", _page, ex.Message);
                 _activetab = "Settings";
-                _refresh = true;
                 AddModuleMessage(Localizer["Error.Page.Save"], MessageType.Error);
             }
         }
         else
         {
             _activetab = "Settings";
-            _refresh = true;
             AddModuleMessage(SharedLocalizer["Message.InfoRequired"], MessageType.Warning);
         }
     }

diff --git a/Oqtane.Client/Modules/Controls/QuillJSTextEditor.razor b/Oqtane.Client/Modules/Controls/QuillJSTextEditor.razor
@@ -7,7 +7,7 @@
 @inject IStringLocalizer<SharedResources> SharedLocalizer
 
 <div class="quill-text-editor">
-    <TabStrip ActiveTab="@_activetab">
+    <TabStrip ActiveTab="@_activetab" TabChangeEvent=false>
         @if (_allowRichText)
         {
             <TabPanel Name="Rich" Heading="Rich Text Editor" ResourceKey="RichTextEditor">

diff --git a/Oqtane.Client/Modules/Controls/TabStrip.razor b/Oqtane.Client/Modules/Controls/TabStrip.razor
@@ -10,13 +10,13 @@
                     <li class="nav-item" @key="tabPanel.Name">
                         @if (tabPanel.Name.ToLower() == ActiveTab.ToLower())
                         {
-                            <a class="nav-link active" data-bs-toggle="tab" href="#@(Id + tabPanel.Name)" role="tab" @onclick:preventDefault="true">
+                            <a class="nav-link active" data-bs-toggle="tab" href="#@(Id + tabPanel.Name)" role="tab" @onclick="() => { if (TabChangeEvent) ChangeTab(tabPanel.Name); }">
                                 @tabPanel.DisplayHeading()
                             </a>
                         }
                         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="() => { if (TabChangeEvent) ChangeTab(tabPanel.Name); }">
                                 @tabPanel.DisplayHeading()
                             </a>
                         }
@@ -32,34 +32,37 @@
 </CascadingValue>
 
 @code {
-	private List<TabPanel> _tabPanels;
-	private string _tabpanelid = string.Empty;
+    private List<TabPanel> _tabPanels;
+    private string _tabpanelid = string.Empty;
 
-	[Parameter]
-	public RenderFragment ChildContent { get; set; } // contains the TabPanels
+    [Parameter]
+    public RenderFragment ChildContent { get; set; } // contains the TabPanels
 
-	[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 bool TabChangeEvent { get; set; } = true;
 
-	[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()
+    protected override void OnInitialized()
+    {
+        if (string.IsNullOrEmpty(Id))
+        {
+            // create unique id for component
+            Id = "TabStrip_" + Guid.NewGuid().ToString("N") + "_";
+        }
+    }
+
+    protected override void OnParametersSet()
     {
         if (PageState.QueryString.ContainsKey("tab"))
         {
@@ -69,6 +72,7 @@
         {
             _tabPanels = new List<TabPanel>();
         }
+        StateHasChanged();
     }
 
     internal void AddTabPanel(TabPanel tabPanel)
@@ -110,4 +114,13 @@
         }
         return authorized;
     }
+
+    private void ChangeTab(string tabName)
+    {
+        if (ActiveTab != tabName)
+        {
+            ActiveTab = tabName;
+            StateHasChanged();
+        }
+    }
 }