fix(Tab): should not rerender tabitem after close (#6294)

* refactor: 更改 Key 为 Guid

* refactor: 增加 wrap 样式

* refactor: 使用 Find 方法

* fix: 修复关闭标签页导致后续标签页重绘问题

* chore: bump version 9.8.0-beta02

* chore: bump version 9.8.0-beta03

Co-Authored-By: Ockyd007 <[email protected]>

* Revert "chore: bump version 9.8.0-beta03"

This reverts commit 25b6158.

---------

Co-authored-by: Ockyd007 <[email protected]>

Author: ArgoZhang

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.8.0-beta01</Version>
+    <Version>9.8.0-beta02</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/Tab/Tab.razor

@@ -24,14 +24,18 @@ else
                     var item = TabItems.Find(i => i.IsActive);
                     if (item != null)
                     {
-                        @RenderTabItem(item)
+                        <div id="@item.Id" class="@GetTabItemClassString(item)">
+                            @RenderTabItem(item)
+                        </div>
                     }
                 }
                 else
                 {
                     foreach (var item in TabItems)
                     {
-                        @RenderTabItem(item)
+                        <div @key="@item" id="@item.Id" class="@GetTabItemClassString(item)">
+                            @RenderTabItem(item)
+                        </div>
                     }
                 }
             </CascadingValue>

src/BootstrapBlazor/Components/Tab/Tab.razor.cs

@@ -486,6 +486,10 @@ public partial class Tab
 
     private bool IsPreventDefault => _contextMenuZone != null;
 
+    private static string? GetTabItemClassString(TabItem item) => CssBuilder.Default("tabs-body-content")
+        .AddClass("d-none", item is { IsActive: false })
+        .Build();
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -1054,7 +1058,7 @@ public async Task DragItemCallback(int originIndex, int currentIndex)
     private async Task OnRefreshAsync()
     {
         // refresh the active tab item
-        var item = TabItems.FirstOrDefault(i => i.IsActive);
+        var item = TabItems.Find(i => i.IsActive);
 
         if (item is not null)
         {

src/BootstrapBlazor/Components/Tab/TabItemContent.cs

@@ -47,14 +47,13 @@ private void RenderContent()
         _renderHandle.Render(BuildRenderTree);
     }
 
-    private object _key = new();
+    private Guid _key = Guid.NewGuid();
 
     private void BuildRenderTree(RenderTreeBuilder builder)
     {
         builder.OpenElement(0, "div");
         builder.SetKey(_key);
-        builder.AddAttribute(5, "class", ClassString);
-        builder.AddAttribute(6, "id", Item.Id);
+        builder.AddAttribute(5, "class", "tabs-body-content-wrap");
         builder.AddContent(10, RenderItemContent(Item.ChildContent));
         builder.CloseElement();
     }
@@ -79,16 +78,12 @@ private RenderFragment RenderItemContent(RenderFragment? content) => builder =>
         builder.CloseComponent();
     };
 
-    private string? ClassString => CssBuilder.Default("tabs-body-content")
-        .AddClass("d-none", !Item.IsActive)
-        .Build();
-
     /// <summary>
     /// Render method
     /// </summary>
     public void Render()
     {
-        _key = new object();
+        _key = Guid.NewGuid();
         RenderContent();
     }