MudTabs: Fix panel show/hide when an element wraps the panels

Merged
DA
3mo ago
+4-1

Fixes #13506

Problem

.mud-tabs-panels > .mud-tab-panel (added in #13288) hides inactive panels with a direct-child combinator. Panels render inside <div class="mud-tabs-panels">@ChildContent</div>, so any element wrapped around them (<MudForm>, a <div>, ...) becomes a real DOM node and the selector stops matching:

  • KeepPanelsAlive="true": every panel shows at once.
  • default mode: the active panel loses display:contents.

Regression from v9.5.0, which set the display inline.

Fix

Switch to a descendant selector that excludes tab-bar buttons:

.mud-tabs-panels .mud-tab-panel:not(.mud-tab) { ... }

:not(.mud-tab) is required because a nested tabs' bar buttons also carry mud-tab-panel (via GetTabClass -> panel.Classname). The rule keys purely on each panel's own mud-tab-panel-active class, so it is position-independent and correct at any nesting depth.

The vertical > .mud-tab-panel-active > * min-width rule (#13365) is intentionally left on the child combinator: with a wrapper the flex item is the wrapper, not the panel's children, so a descendant form would neither help nor be safe (it would over-match nested active panels).