# Telerik UI for Blazor — TabStrip bug report

Two related defects in `TelerikTabStrip` when the tab headers wrap onto multiple rows.
Filed for GLS (Governance & Legislative System), the resolution submission form
(`/submit-resolution`), which has 12 tabs.

## Environment

- **Telerik UI for Blazor:** v14 (please fill in the exact build number from your
  `LegislationApplications` package reference before submitting)
- **.NET:** 10.0
- **Render mode:** Blazor **Server** (Interactive Server), no WebAssembly
- **Browser:** reproduced in Chromium-based browsers on a wide (≥1200px) window
- **Component config (abridged):**
  ```razor
  <TelerikTabStrip @bind-ActiveTabId="ActiveTabId"
                   PersistTabContent="true"
                   OverflowMode="TabStripOverflowMode.None"   @* wide screens *@
                   ScrollButtonsPosition="TabStripScrollButtonsPosition.Split"
                   ScrollButtonsVisibility="TabStripScrollButtonsVisibility.Auto">
      @* 12 TabStripTabs; several use Visible="@boolExpr" (conditionally shown);
         most use a <HeaderTemplate> that renders the title plus an optional indicator icon *@
  </TelerikTabStrip>
  ```
- On a wide window with `OverflowMode="None"`, the 12 tab headers **wrap onto two rows**
  (row 1 ends at "Budget Impact"; row 2 begins at "OGR Consultation").

---

## Bug 1 — Wrapped tabs: activating a tab at the wrap boundary shows the WRONG content panel

### Repro
1. Open a form whose tab headers wrap to two rows (wide window, `OverflowMode="None"`, enough
   tabs to force a second row).
2. Activate the tab that sits at the **end of the first row** (its immediate left neighbour is on
   the same row; its right neighbour is on the next row). In our form: activate **External
   Documents**, then click **Budget Impact** (last tab on row 1).

### Expected
Budget Impact’s content panel is displayed.

### Actual
- The Budget Impact **header** receives focus/active styling, but the **content area still shows
  the previous tab’s panel** (External Documents).
- It is **deterministic** from the left-neighbour: a 2-second pause before clicking does **not**
  help.
- **Workarounds that do make it switch:** double-clicking the tab, or first activating a tab on a
  **different row** (e.g. OGR Consultation) and then clicking Budget Impact once.

### Proof the server/binding side is correct (it is a client-side rendering defect)
We instrumented the `ActiveTabId` setter and component renders. On the failing single click:
```
ActiveTabId 'tab-submitter'          -> 'tab-external-documents'   (click External)
RENDER  activeTab=tab-external-documents
ActiveTabId 'tab-external-documents' -> 'tab-budget-impact'        (click Budget Impact)
RENDER  activeTab=tab-budget-impact
(no further activity)
```
So `ActiveTabIdChanged` fires with the correct id, `ActiveTabId` becomes `tab-budget-impact`, and
the component re-renders exactly once with the correct active tab — yet the browser keeps showing
the External Documents content panel. The subsequent “rescue” clicks that fix the display produce
**no** server activity at all, confirming the mismatch is purely in the component’s client-side
content-panel switching.

### Confirmed trigger: the wrapping
Forcing the tab headers onto a **single row** with CSS (no other change) makes the bug disappear
entirely — every tab activates its correct panel on the first click:
```css
.k-tabstrip-items-wrapper { flex-wrap: nowrap; overflow-x: auto; }
.k-tabstrip-items         { flex-wrap: nowrap; }
```
This is not an acceptable final fix for us (the product requires the wrapped, all-tabs-visible
layout), but it isolates the cause: **`TelerikTabStrip` mismaps the active content panel when its
headers wrap to more than one row.**

---

## Bug 2 — `OverflowMode="Scroll"` throws an exception for this configuration

### Repro
Set `OverflowMode="TabStripOverflowMode.Scroll"` (instead of `None`) on the same TabStrip
(12 tabs, `PersistTabContent="true"`, several tabs with `Visible="@expr"` including one that is
currently `Visible="false"`, and `<HeaderTemplate>`s).

### Actual
The page throws an unhandled exception on load / render (Blazor error UI). Reverting to
`OverflowMode="None"` removes the exception.

> **To complete this section before filing:** capture the exact exception type, message, and the
> top Telerik stack frames from the browser DevTools console or the app’s server log (Aspire
> dashboard → `legislationwebapp` resource) while `OverflowMode="Scroll"` is active. We suspect it
> relates to scroll-width measurement of a `Visible="false"` tab and/or `HeaderTemplate` tabs, but
> the stack trace will confirm.

---

## Why this matters / requested outcome

- Bug 1 forces a poor workaround (users must double-click or approach tabs from a specific
  direction) or a UX compromise (single-row scrolling instead of the required wrapped layout).
- Bug 2 blocks the natural single-row fix (`OverflowMode="Scroll"`).

We would like `TelerikTabStrip` to either (a) correctly map the active content panel when headers
wrap, or (b) provide a supported single-row/wrapping option that does not throw for this
configuration.

Telerik UI for Blazor requires unsafe-inline styles in order to render style attributes from the .NET runtime.

Please add support for strict CSS CSP without the need for unsafe inline styles.

===

TELERIK EDIT:

Due to the complexity and required effort to add strict CSS CSP support:

• The feature request must gather enough votes.
• We may implement it gradually. That's why, everyone who is interested, please specify the exact components and features that you need to be compliant sooner.

So i thought that 
gettting the state x
gridref.rebind()
setting new state x

would re-expand the row automatically - didnt work


added Equal and GetHashCode- still dont work

I my understanding, the simplest way to get a coding agent provide better assistance to a very specific product like telerik blazor, is by just providing the documentation. 

My first experiments with the telerik mcp server are not succesful. I would think that linking the full documentation directly to the coding agent can seriously lead to better results.

AI Coding agents are doing a great job with more standard frontend framework like react, they seem to be common knowledge. We know that Blazor and in particular Telerik blazor is a niche product (not only niche, but also NICE), so coding agents needs to have clear instructions on everything.

Of course, i don't know how your documentation system works, and how easy it would be to generate .md files from this?

Thanks for looking into this matter

Don't hesitate to contact me directly for further questions or whatsoever.

warm regards

paul

I want to be able to use Autocomplete's for strings separated by commas, semicolons, etc. So if a user has a grocery list string and every item is separated by a comma (Apples, Bananas, Cheese, ...) I want them to be able to use the auto complete to quickly find items quicker (think more along the lines of specific brands, quantities, sizes, for every item) and still build out their list of string. 
So the user would have something like: 'Cupcakes (12 count), Mozzarella Cheese - Kraft, ...'
So the autocomplete would filter the string to find the part after the last comma and use that to search, but when the user finds their item and selects it, it needs to append to the string (and add a comma) and not overwrite it. Then continue the cycle.

Attempting to use OnChange does not allow for this to happen. On selection of a dropdown item, it will overwrite the string entirely. 

I noticed that when the ReadTimeout property of the FileSelect's FileInfoStream is read, the code seem to block completely.

You will find a Blazor Web App project attached to this ticket showcasing the issue.

I want a similar server-side filtering experience with the Scheduler as we have with Grid. An OnRead event would fire and include a SchedulerReadEventArgs. The DataSourceRequest would include filters for the current view - day, month, etc (and additional filtering if/when a built-in filter is available). SchedulerReadEventArgs would take Data & Count result of appointments. The benefit is similar to Grid Paging in that the result set would be bound by the relevant range of the scheduler.

When enabling/disabling a form element that is defined in a child component, the element is successfully disabled, however a console error occurs. The error occurs whether the child component makes the update or the parent makes the update through a passed parameter.  The error does not occur for form elements defined in the parent.  The error does not occur for basic html input elements defined in the child. 

Element definition:

<TelerikTextBox 
     Id="ElementMisc" 
     AutoComplete="new-password" 
     @bind-Value="@_searchModel.ElementMisc" 
     Enabled="!_elementSelectMode" 
     class="textbox-75"
     DebounceDelay="0">
 </TelerikTextBox>

Update Code defined in child:

   

 if (results.Data.Count > 1)
 {   
     _elementSelectMode= true;
     StateHasChanged();

 }

 

Console Error:

Uncaught (in promise) Error: Assertion failed - heap is currently locked
    at mr (blazor.web.js:1:158963)
    at Object.beginInvokeDotNetFromJS (blazor.web.js:1:157244)
    at w.invokeDotNetMethodAsync (blazor.web.js:1:3978)
    at C.invokeMethodAsync (blazor.web.js:1:5486)
    at r.invokeMethodAsync (telerik-blazor.js:22:1272553)
    at r.onBlur (telerik-blazor.js:22:1463592)
    at ye.setOrRemoveAttributeOrProperty (blazor.web.js:1:28630)
    at ye.applyAttribute (blazor.web.js:1:27574)
    at ye.applyEdits (blazor.web.js:1:24601)
    at ye.updateComponent (blazor.web.js:1:23606)

I know smart components are still in preview but please make this available as soon as you can in the editor component.  This would be a HUGE deal!

 

Github link

Smart Components

I would like to be able to set the Id on any Blazor component for automated testing purposes.

---

ADMIN EDIT

If you need something different than automated testing selectors, please add your use case in the comments.

For automated testing, you can cascade selectors through a parent element (e.g., a div or span) that has the desired attributes (be that id, class, some data-* attribute, etc.). Adding ID parameters to Blazor components can easily make them brittle because they can be repeated and included in arbitrary hierarchy easily - that's the core concept of a razor component - so such IDs need to be unique, which defeats the predictability you will need for testing.

If you are interested in testing with Selenium, you may find useful this request: https://feedback.telerik.com/blazor/1513117-translators-for-selenium-testing-for-the-telerik-ui-for-blazor-components. If so, Vote for it and Follow it so we can know there is interest, and so you can get status updates.

You can also Follow a separate enhancement for the Grid Command buttons here : https://feedback.telerik.com/blazor/1463164-id-attribute-on-buttons-telerikbuttons-gridcommandbuttons-etc

---

Are you thinking about developing an app builder for Blazor to create a project and add telerik component and finally export it as Blazor app (server or wasm)?

(like this one develop from Infragistics https://appbuilder.indigo.design/app/)
This tool export every single page as razor page.

BR,

Flavio

We'd like to track the community demand for using the Telerik Blazor components as Custom Elements.

Please share example common scenarios for such usage and list the components you want to register as Custom Elements to use in other SPA frameworks such as Angular or React.

Hi,

If Telerik can, at some point, develop a design tool like the Radzen Design Time, that would really be nice!

Thanks