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

New Issue

claunia · 2026-01-29T17:50:14Z

claunia commented

2026-01-29 17:50:14 +00:00

Originally created by @aplib on GitHub (Apr 14, 2024).

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.

Originally created by @aplib on GitHub (Apr 14, 2024). 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.

claunia closed this issue

2026-01-29 17:50:14 +00:00

claunia commented

2026-01-29 17:50:15 +00:00

@enchev commented on GitHub (Apr 15, 2024):

Maybe you can use Visible property instead if blocks

@enchev commented on GitHub (Apr 15, 2024): Maybe you can use Visible property instead if blocks

claunia commented

2026-01-29 17:50:15 +00:00

@enchev commented on GitHub (Apr 15, 2024):

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;
}

@enchev commented on GitHub (Apr 15, 2024): 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; } ``` ![tab-if](https://github.com/radzenhq/radzen-blazor/assets/5804953/b41c1a4f-1fc2-4ae3-a225-340eb6659cf4)

claunia commented

2026-01-29 17:50:15 +00:00

@aplib commented on GitHub (Apr 20, 2024):

<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

@aplib commented on GitHub (Apr 20, 2024): <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

claunia commented

2026-01-29 17:50:15 +00:00

@aplib commented on GitHub (Apr 20, 2024):

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.

@aplib commented on GitHub (Apr 20, 2024): 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.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1194