TabStrip triggers the ActiveTabId change on current tab reorder

Progress® Telerik® UI for Blazor Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 20 Apr 2026 08:00 by ADMIN

Release 2026 Q2

Brent

Created on: 15 Apr 2026 22:04

Category: TabStrip

Type: Bug Report

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>

5 comments

ADMIN

Dimo

Posted on: 20 Apr 2026 08:00

Hi Alexis,

Yes, currently OnTabReorder may fire multiple times during dragging. If you want to execute the handler logic just once, you can implement some debouncing and wait for the last event occurrence to fire.

Can you please describe in more detail what do you mean by "the user experience doesn't look smooth since our logic is processing everytime"?

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.

Alexis

Posted on: 17 Apr 2026 20:21

Hello,

The OnTabReorder event is triggered everytime you pass a tab when dragging, could it be possible to only trigger it when the tab you're dragging is dropped?

When we reorder we want to save information to persist the new order and since the event is firing everytime even when the drop still has not happen, the user experience doesn't look smooth since our logic is processing everytime

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.