Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 16 Apr 2026 14:32 by ADMIN
Release 2026 Q2
Brent
Created on: 15 Apr 2026 22:04
Category: TabStrip
Type: Bug Report
0
TabStrip triggers the ActiveTabId change on current tab reorder

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>
3 comments
ADMIN
Dimo
Posted on: 16 Apr 2026 14:32

Hi Brent,

Yes, dragged tabs always become active by design. For example, browser tabs behave the same way. If there is more demand for dragging non-active tabs, we can expose a setting.

Regards,
Dimo
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Brent
Posted on: 16 Apr 2026 14:28
Just to clarify, we're thinking that the active tab change should NOT happen if it's a drag/drop reorder action and not a selection action. It seems like that this scenario there would be no way to reorder an inactive tab. 
ADMIN
Dimo
Posted on: 16 Apr 2026 06:39

Hi Brent,

Indeed, the ActiveTabIdChanged event should fire only when reordering or selecting a non-active tab. I converted your ticket to a public bug report and we will fix this for our next release. In the meantime, you can distinguish the two user actions like this:

<TelerikTabStrip ActiveTabId="@ActiveTabId"
                 ActiveTabIdChanged="@ActiveTabIdChanged"
                 EnableTabReorder="true"
                 OnTabReorder="@OnTabStripTabReorder">
    <TabStripTab Title="Tab 1" Id="tab1">
        Content 1
    </TabStripTab>
    <TabStripTab Title="Tab 2" Id="tab2">
        Content 2
    </TabStripTab>
    <TabStripTab Title="Tab 3" Id="tab3">
        Content 3
    </TabStripTab>
</TelerikTabStrip>

@code {
    private string ActiveTabId { get; set; } = "tab1";

    private void ActiveTabIdChanged(string newTabId)
    {
        if (ActiveTabId == newTabId)
        {
            return;
        }

        ActiveTabId = newTabId;
        Console.WriteLine($"ActiveTabIdChanged {newTabId}");
    }

    private void OnTabStripTabReorder(TabStripTabReorderEventArgs args)
    {
        Console.WriteLine($"OnTabReorder {args.Id}");
    }
}

Regards,
Dimo
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Create an account Log In
View
Type
Status
Category