RadzenTabs component out of sync occurs between the SelectedIndex and the displayed tab

[vadim b.]

When changing the composition of tabs (using @if in the Tabs block), out of sync occurs between the SelectedIndex and the displayed tab.

For example, if there was one tab, and at the next rendering there are three of them, then the bookmark that was active during the previous rendering remains visible, SelectedIndex also retains the previous value, and is not set to the one that should correspond to the current position of the tab.

[Vladimir Enchev]

Maybe you can use Visible property instead if blocks

[Vladimir Enchev]

I've tried to replicated this in our demos however everything worked correctly:

<RadzenTabs @bind-SelectedIndex="@selectedIndex">
    <Tabs>
        <RadzenTabsItem Text="Orders">
            Orders
        </RadzenTabsItem>
        @if (false)
        {
           @:Employees
        }
        <RadzenTabsItem Text="Customers">
            Customers
        </RadzenTabsItem>
    </Tabs>
</RadzenTabs>

@code {
    int selectedIndex = 1;
}

[vadim b.]

<RadzenTabs @bind-SelectedIndex=@selectedIndex>
    <Tabs>
        <RadzenTabsItem Text="Customers">
            Customers
        </RadzenTabsItem>
        @if (!remove_section)
        {
            <RadzenTabsItem Text="Orders">
                Orders
            </RadzenTabsItem>    
        }
        <RadzenTabsItem Text="Order Details">
            Order Details
        </RadzenTabsItem>
    </Tabs>
</RadzenTabs>

<p>
    @selectedIndex
</p>

<RadzenCheckBox @bind-Value=@remove_section Name="CheckBox1" />
<RadzenLabel Text="CheckBox" Component="CheckBox1" Style="margin-left: 8px; vertical-align: middle;" Change="@(()=>StateHasChanged())" />

@code {
    bool remove_section;
    int selectedIndex = 0;
}

Check cases for the second and last tab separately

[vadim b.]

I would be grateful if you suggest an option to control the visibility of bookmarks, in which you do not have to create own tab list model. Otherwise, it’s easier to do without this component altogether.