Completed
Last Updated: 31 May 2022 07:49 by ADMIN
Release 3.4.0
When setting the Blazor Tab control to Scrollable="true" the arrow buttons are set to be submit buttons.  This has a major problem in submitting a form they are embedded in, and there is no need for them to be submit button.  When manually edited to change them to not be submit buttons they operate as expected.
Completed
Last Updated: 21 Mar 2023 14:21 by ADMIN
Release 4.2.0 (26/04/2023)

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

Duplicated
Last Updated: 19 Mar 2024 10:59 by Fabien

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

Duplicated
Last Updated: 18 Dec 2024 16:27 by ADMIN
Created by: Constantinos Petridis
Comments: 4
Category: TabStrip
Type: Bug Report
0

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

Completed
Last Updated: 20 Apr 2026 08:00 by ADMIN
Release 2026 Q2

When clicking on a tab to drag it to reorder, it will process the tab change as soon as the tab is clicked to start a drag operation.  Preferably, we'd like the tab select action to only happen on a mouseup instead of a mousedown (and cancelled on drag.)  This is a reproduction in the REPL: https://blazorrepl.telerik.com/mAayPpGb59GjWvUT47.  But it so simple that you probably don't need it. This is the main razor file:

@page "/tabstrip/overview"
@page "/tabstrip/index"
<div class="demo-section">
    <TelerikTabStrip
                 ActiveTabIdChanged="@OnTabChangeAsync"
                 OnStateChanged="@OnTabStateChangeAsync"
                 OverflowMode="@TabStripOverflowMode.Menu"
                 EnableTabReorder="true"
                 Height="100%"
                 Width="100%"
                 PersistTabContent="true">
        <TabStripTab Title="Sofia">
            <WeatherCard City="Sofia"
                         TempC="23"
                         Forecast="ForecastType.Sunny">
            </WeatherCard>
        </TabStripTab>
        <TabStripTab Title="London">
            <WeatherCard City="London"
                         TempC="21"
                         Forecast="ForecastType.Cloudy">
            </WeatherCard>
        </TabStripTab>
        <TabStripTab Title="Paris">
            <WeatherCard City="Paris"
                         TempC="17"
                         Forecast="ForecastType.Rainy">
            </WeatherCard>
        </TabStripTab>
    </TelerikTabStrip>
    <h2>Active Tab Index: @ActiveTabIndex </h2>
</div>
@code {
    public int ActiveTabIndex { get; set; } = 1;
    public async Task OnTabChangeAsync(string newTabId) {
        await Task.CompletedTask;
    }
    public async Task OnTabStateChangeAsync(TabStripStateEventArgs args) {
        await Task.CompletedTask;
    }
}
<style>
    .box {
        margin: 4.5em 7.5em;
        padding: 3em;
        background-color: rgba(20,53,80,0.038);
        border: 1px solid rgba(20,53,80,0.05);
    }
    .demo-section {
        margin: 0 auto;
        padding: 3em;
        border: 1px solid rgba(20,53,80,0.14);
        box-shadow: 0 1px 2px 1px rgba(0,0,0,.08)0 3px 6px rgba(0,0,0,.08);
    }
    .auto {
        max-width: max-content;
    }
    .demo-section:not(.wide):not(.auto),
    .box:not(.wide):not(.auto) {
        max-width: 500px;
    }
    .box:after,
    .demo-section:after {
        content: ";
        display: block;
        clear: both;
        height: 0;
    }
    .box {
        margin: 4.5em auto;
    }
    .box:first-child {
        margin-top: 0;
    }
    .center {
        text-align: center;
    }
    .demo-section.editor {
        max-width: 100%;
        border: none;
    }
    .demo-alert {
        font: normal 18px "Metric";
        border-radius: 2px;
        margin: 20px auto 40px auto;
        padding: 20px;
        border-left: 4px solid;
    }
    .demo-alert-success {
        border-left-color: rgb(55,180,0);
        background: rgba(55,180,0, 0.1);
    }
    .demo-alert-info {
        border-left-color: rgb(83,146,228);
        background: rgba(83,146,228, 0.1);
    }
    .demo-alert-error {
        border-left-color: rgb(243, 23, 0);
        background: rgba(243, 23, 0, 0.1);
    }
    .demo-alert-warning {
        border-left-color: rgb(255, 192, 0);
        background: rgba(255, 192, 0, 0.1);
    }
</style>
1 2 3