# 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.