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

Description

When the user selects an empty tab and then switches to another tab, the empty tab remains highlighted (appears as if it's still selected).

Reproduction

Reproduction: https://blazorrepl.telerik.com/mRkVczaV02S9QkmJ28

Steps:

1. Select the second tab (which has no content).
2. Select the first tab.

Both tabs are highlighted as selected.

Here is a REPL test page. If the user navigates forwards and backwards via the Wizard buttons, the TreeView checkboxes persist their state. If the user navigates via the Stepper, the checkbox state is not retained.

The issue is triggered by the TabStrip.

A possible workaround is to prevent Stepper clicks with CSS:

.k-tabstrip .k-wizard .k-stepper .k-step {
  pointer-events: none;
}

Accessibility issue for TelerikTabStrip (3.6.0)

Issue is found in the attached png file.

<TelerikTabStrip TabPosition="@TabPosition.Top">
    <TabStripTab Title="Handoff">
        <VideoHandoff></VideoHandoff>
    </TabStripTab>
    <TabStripTab Title="Handoff Status">
        <VideoHandoffStatus></VideoHandoffStatus>
    </TabStripTab>
</TelerikTabStrip>

I am using the Telerik TabStrip and am trying to make the tabs scrollable while also showing additional tabs once a button is pressed.

When the additional tabs are shown, the tabs are not scrollable. Notice that when you toggle the visibility of the tabs, the new tabs being shown do not make the tab list scrollable.

=====ADMIN EDIT=====

Here is a possible workaround for the time being - REPL link.

The TabStrip throws ArgumentOutOfRangeException if the first tab is not Visible.

<TelerikTabStrip>
    <TabStripTab Title="A" Visible="false">
        Tab A
    </TabStripTab>

    <TabStripTab Title="B" Visible="true">
        Tab B
    </TabStripTab>

    <TabStripTab Title="C" Visible="true">
        Tab C
    </TabStripTab>
</TelerikTabStrip>

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

<TelerikTabStrip TabPosition="TabPosition.Top">
    <TabStripTab Title="Sofia">

    </TabStripTab>
    <TabStripTab Title="London">

    </TabStripTab>
    <TabStripTab Title="Paris">
        <TelerikTabStrip TabPosition="TabPosition.Left">
            @foreach (var item in new string[] { "one", "two", "three" })
            {
                <TabStripTab Title="@item">x</TabStripTab>
            }
        </TelerikTabStrip>
    </TabStripTab>

</TelerikTabStrip>

Content inside the tabs is narrow and elements float next to each other. For example, charts or other divs have limited width (screenshot of the issue at the end of this post).