Tabstrip component not removing highlight from previous tab

1 Answer 23 Views
TabStrip
Ricardo
Top achievements
Rank 1
Iron
Ricardo asked on 10 Apr 2025, 07:23 PM

I'm having some trouble with the TelerikTabStrip component. The following snippet should reproduce my issue:

<TelerikTabStrip @bind-ActiveTabIndex="@activeTabIdx">
  @{
    foreach (var tab in Tabs)
    {
      <TabStripTab Title=@tab.Key></TabStripTab>
    }
  }
</TelerikTabStrip>


@code {
  public Dictionary<string, string> Tabs { get; set; }

  public int activeTabIdx { get; set; } = 0;

  protected override void OnInitialized()
  {

    Tabs = new Dictionary<string, string>();
    Tabs.Add("1", "1");
    Tabs.Add("2", "2");
    Tabs.Add("3", "3");
    Tabs.Add("4", "4");
  }

  protected override void OnParametersSet()
  {

  }

Currently, whenever I change a tab, although activeTabIdx is updated, the previous tab remains highlighted along with the currently selected one and so on, i.e, the previous tab highlight does not disappear indicating it had beeen deselected. Has anyone incurred to a similar problem? 

Thank you

1 Answer, 1 is accepted

Sort by
1
Accepted
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
answered on 11 Apr 2025, 07:43 AM

I modified your example to include initialization of the selected tab in OnParametersSet, and I also added a button that changes the selected tab index when clicked. You can check it out here: https://blazorrepl.telerik.com/wpaSPbOB41kwhxmc21

I don’t see any issues with the tab highlighting in this version. Maybe your implementation differs in some way—could you clarify what exactly might be different on your end?

Regards,
Anislav Atanasov

Ricardo
Top achievements
Rank 1
Iron
commented on 11 Apr 2025, 11:06 AM

Hello Anislav!

Thank you for your answer. I solved my problem by referring to the following page in Telerik's documentation.

I completely missed out the "key" parameter on the TabStrip component. I should have been done better research on the subject before dropping the question, I apologize.

Tags
TabStrip
Asked by
Ricardo
Top achievements
Rank 1
Iron
Answers by
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Share this question
or