Conditional Tabs

[florianwachs]

hi there,

i tried to conditional render a tab. disabling the tab works great, i have an if statement around the tab. but when the tab gets added again by the if statement, i get an error that an item with this key was already added. am i doing this wrong?

thanks for your time

[vnbaaij]

We need to see some source to be able to determine if you're doing it wrong :)

There is an example in the demo that shows how to dynamically add/remove tabs that might help you: https://www.fluentui-blazor.net/Tabs#dynamic

[florianwachs]

of course, sorry . here is a simplified case:

@page "/Repro"
<FluentTabs @bind-ActiveTabId="@_selectedTabId" Size="TabSize.Large" Style="width:100%;">
    <FluentTab Id="tab-1">
        <Header>
            Tab 1
        </Header>
        <Content>
            <h1>I</h1>
        </Content>
    </FluentTab>
    @if (_showExtra)
    {
        <FluentTab Id="tab-2">
            <Header>
                Tab 2
            </Header>
            <Content>
                <h1>love</h1>
            </Content>
        </FluentTab>
    }
    <FluentTab Id="tab-3">
        <Header>
            Tab 3
        </Header>
        <Content>
            <h1>Blazor Fluent UI</h1>
        </Content>
    </FluentTab>
</FluentTabs>

<div>
    <FluentButton @onclick="() => _showExtra = !_showExtra">Toggle</FluentButton>
</div>

@code {
    private string _selectedTabId;
    private bool _showExtra = true;
}

When I click the toggle button first, the tab disappears correctly, when I click it again, the following error shows. Am I doing something wrong here? Thank you very much

blazor.server.js:1  [2023-12-15T11:17:45.649Z] Error: System.ArgumentException: An item with the same key has already been added. Key: tab-2
   at System.Collections.Generic.Dictionary`2.TryInsert(TKey key, TValue value, InsertionBehavior behavior)
   at System.Collections.Generic.Dictionary`2.Add(TKey key, TValue value)
   at Microsoft.FluentUI.AspNetCore.Components.FluentTabs.RegisterTab(FluentTab tab) in /_/src/Core/Components/Tabs/FluentTabs.razor.cs:line 171
   at Microsoft.FluentUI.AspNetCore.Components.FluentTab.OnInitialized() in /_/src/Core/Components/Tabs/FluentTab.razor.cs:line 114
   at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()

[dvoituron]

This seems to come from the web component used by FluentTabs, which keeps an internal reference to the ID used (even if the HTML code is no longer present).
The best thing would be to remove this Id="tab-2" attribute, if that's possible for you. In this case, the component itself generates a random and unique ID.

@if (_showExtra)
{
    <FluentTab>
        <Header>
            Tab 2
        </Header>
        <Content>
            <h1>love</h1>
        </Content>
    </FluentTab>
}

[vnbaaij]

@dvoituron that works indeed. I did see the selected tab derails from what is shown on the screen and what is stored in the code when manually interferring with the tabs.

[florianwachs]

thank you very much, will try that

[vnbaaij]

@florianwachs We are adding a Visible parameter to `FluentTab for the next release so you can do:

<FluentTabs @bind-ActiveTabId="@_selectedTabId" Size="TabSize.Large" Style="width:100%;">
    <FluentTab Id="tab-1">
        <Header>
            Tab 1
        </Header>
        <Content>
            <h1>I</h1>
        </Content>
    </FluentTab>

    <FluentTab Id="tab-2" Visible="@_showExtra">
        <Header>
            Tab 2
        </Header>
        <Content>
            <h1>love</h1>
        </Content>
    </FluentTab>
:
:

[florianwachs]

this is perfect, thank you

[pmi24]

Hi everyone,

I have a similar issue, but my if statement wraps the entire <FluentTabs> component. Even more so, it wraps a component that contains a <FluentTabs> component, which is why I unfortunately can't use the new Visible parameter to solve this issue.

I tried to simplify my code to illustrate the problem, and I came up with this code snippet.
If you click "Select 1" > "Select 0" > "Select 1", it reproduces the aforementioned exception:

@code {
    public int SelectedIndex { get; set; } = 0;

    private List<List<string>> TabComponents = new()
    {
        new() { "Tab1" },
        new() { "Tab1", "Tab2" }
    };
}

<FluentButton OnClick="@(() => { SelectedIndex =  0; })">Select 0</FluentButton>
<FluentButton OnClick="@(() => { SelectedIndex =  1; })">Select 1</FluentButton>

@for (int i = 0; i < TabComponents.Count; i++)
{
    var tabs = TabComponents[i];

    if (i == SelectedIndex)
    {
        <FluentTabs>
            @for (int j = 0; j < tabs.Count; j++)
            {
                var tab = tabs[j];

                <FluentTab Id="@("tab-id-" + tab)">
                    <Header>@tab</Header>
                    <Content>Content of Tab @tab</Content>
                </FluentTab>
            }
        </FluentTabs>
    }
}

I would greatly appreciate it if someone could take the time to investigate the issue I am facing and provide me with some guidance on how to prevent it. I am using Microsoft.FluentUI.AspNetCore.Components v 4.5.0

Thanks in advance

[vnbaaij]

What you are doing in the code is continously re-creating the tabs component when clicking a button. Change the logic so that the set of FluentTabs gets created only once and than based on the logic of the buttons display that specific set and hide the rest.

[pmi24]

Thanks for your reply.

My code is just a highly simplified example, that illustrates the issue. In reality, I don't use buttons; instead, I have a page that reads the URL slug as a parameter to load content from an underlying service. There are many other components and contents within that if-statement besides just the <FluentTabs> component. A navigation change would then trigger a reload of all those contents, (sometimes) including the <FluentTabs> component.

"Continously re-creating the tabs component" is not my goal. I'm trying to achieve that each iteration of the for-loop represents an independent individual instance of the <FluentTab> component.

If I leave out the Id parameter, as @dvoituron posted, the exception goes away. Unfortunately, I can't use randomized Ids because I use another URL parameter to match the name and open a specific tab on page load. Is there a way to properly dispose of the old/invisible component so its Tab-Ids don't remain in the cache?