[dev-v5] fix: ActiveTabId is empty when FluentTab get's removed from the DOM

[MarvinKlein1508]

🐛 Bug Report

When you show FluentTabs conditionally then ActiveTabId will be set to an empty string when the component is being removed and then re-rendered on the DOM.

💻 Repro or Code Sample

@page "/Debug/Test"
@layout FluentUI.Demo.Client.Layout.EmptyLayout

<FluentButton OnClick="LoadAsync">Load</FluentButton>

@if (isLoading)
{
    <FluentSpinner />
}
else
{
    <FluentTabs @bind-ActiveTabId="activeTabId">
        <FluentTab Header="General" Id="tab-general">
            Some general information
        </FluentTab>

        <FluentTab Header="Files" Id="tab-files">
            Some cool files here
        </FluentTab>

        <FluentTab Header="Recap" Id="tab-recap">
            Here is a recap
        </FluentTab>
    </FluentTabs>
}

<p>ActiveTabId: @activeTabId</p>

@code {
    private string activeTabId = "tab-files";
    private bool isLoading;
    private async Task LoadAsync()
    {
        isLoading = true;

        await Task.Delay(2500);

        isLoading = false;
    }
}

1. Paste into Test.razor
2. Run project
3. Notice that tab 2 is opened by default
4. Click on load
5. Notice that ActiveTabId will be set to string.Empty
6. Tab 1 is being displayed

🤔 Expected Behavior

I expect the component to stay at tab 2 even after the re-render.

😯 Current Behavior

The component will re-render and fallback to tab 1 as active tab.

🔦 Context

I'm using this technique in a save method which then reloads the object from the database which triggers a re-render of the page for a loading animation. Afterwards the UI will be rendered again and it falls back to the first tab. In v4 this was possible as shown in the example code.

🌍 Your Environment

• OS & Device: Windows 11 64 Bit
• Browser latest Firefox, Chrome and Edge
• latest dev-v5 branch

[MarvinKlein1508]

Additional info: If I use ActiveTabId instead of @bind-ActiveTabId no tab will be selected by default.

[vnbaaij]

You need to use both ActiveTabId and @bind-ActiveTab. This works:

@page "/Debug/Test"
@layout FluentUI.Demo.Client.Layout.EmptyLayout

<FluentButton OnClick="LoadAsync">Load</FluentButton>

@if (isLoading)
{
    <FluentSpinner />
}
else
{
    <FluentTabs ActiveTabId="@ActiveTabId" @bind-ActiveTab="@ActiveTab" @bind-ActiveTab:after="@OnTabChanged">
        <FluentTab Id="default-tab1" Header="Chat" IconStart="@(new Icons.Regular.Size16.Chat())">
            Here's some information about the chat.
        </FluentTab>

        <FluentTab Id="default-tab2" Header="Files" Disabled="true" IconStart="@(new Icons.Regular.Size16.Folder())">
            Here's the list of all files.
        </FluentTab>

        <FluentTab Id="default-tab3" Header="Recap" IconStart="@(new Icons.Regular.Size16.List())" IconColor="@Color.Primary">
            Here's some information about the recap.
        </FluentTab>
    </FluentTabs>

    <p>
        ActiveTab: <b>@(ActiveTab?.Header)</b>
    </p>
}

@code
{
    private bool isLoading = false;
    string? ActiveTabId = "default-tab3";
    FluentTab? ActiveTab;

    void OnTabChanged()
    {
        Console.WriteLine($"Tab changed to '{ActiveTab?.Header}'.");
    }

    private async Task LoadAsync()
    {
        isLoading = true;
        await Task.Delay(1000);
        isLoading = false;
    }
}