We have recently update to version 7.0.0 of Telerik for Blazor controls.
We have also access to Progress ThemeBuilder application which we use to customize the default Material theme.

After the update to version 7 and also upgrading and compiling the new theme file for our application, TabStrip items fail to display the correct css and defaults to the theme's original css.

ThemeBuilder produces rules for the tab item items with the following path

.lvs-tabstrip.k-tabstrip .k-tabstrip-items-wrapper .k-tabstrip-items.k-reset.k-tabstrip-items-start .k-item.k-tabstrip-item

where the actual control generates the following

.lvs-tabstrip.k-tabstrip .k-tabstrip-items-wrapper .k-tabstrip-items.k-reset.k-tabstrip-items-start .k-item

As you can see it is missing the k-tabstrip-item class and the custom theme fails to render correctly. Either Telerik blazor libary did not add this extra class to each tab item or theme builder is inserting this class when it should not. 

I can place this extra class on each TabStripTab element on its Class property, but I feel this is something that the actual Telerik for Blazor libray should do.

Looking at the source code of Telerik for Blazor library, the TabStipTab component generates add the k-item as default and then applies the value of property ClassToRender and its value is 

$"{ActiveCssClass} {DisabledCssClass} {Class} {FirstItemClass} {LastItemClass}".Trim()

The Class is an empty string, which I currently use to "fix" the problem but I certainly would like a better solution like a real fix :) 

Thank you telerik team

When I am dynamically adding or removing tabs I am hitting a variety of problems targeting:

The active tab is not correctly set

the focus is not always set to the active tab

upon adding/removing a tab all tabs are re-created and their content is not persisted

This is causing some data loss, picklist filter loss, lag time when opening and closing tabs

Hi all,

Could you please add the OnBeforeActiveTabIndexChange event and allow cancellation (prevent) of ActiveTabIndexChanged in the handler?

I saw an example in the doc about how to prevent tab (index) change, but it is not sufficient because of:

- event if you won't change the tab index, the active tab is still being destroyed and recreated;

- we want to avoid keeping the tab in memory by using the PersistTabContent flag;

 We need to prevent tab switching by showing the user a confirmation and reacting to the user's choice. We need to prevent the tab switching - not to post react and apply any kind of crutches.

Greetings.

I think I found a minor bug when using the TabStrip component. If you have something like this:

<TelerikTabStrip>
	<TabStripTab Title="First tab">
		<p>First content</p>
	</TabStripTab>
	<TabStripTab Title="Second tab">
		<p>Second content</p>
	</TabStripTab>
	<TabStripTab Title="Third tab">
		
	</TabStripTab>
 </TelerikTabStrip>

And you click the tab without content, it stays selected.

Regards

ActiveTabIndex works as expected when tabs are always Visible, but when you set the Visible property to false, then back to true, the ActiveTabIndex does not work.

<TelerikTabStrip @bind-ActiveTabIndex="@ActiveTabIndex" PersistTabContent="true">

    <TabStripTab Title="@TabTitle" Visible="@IsTabVisible" >

..

IsTabVisible = true;

ActiveTabIndex = 1;

I encountered this behavior in both v2.30.0 and v3.2.0

Support for adding Unicode characters (such as a warning sign, &#9888;) to the Title of tab strips.

Our scenario is we require specific setup to be done on each tab strip. We would like to ability to add an indicator next to the title of the tab to denote that setup is required.