Problem/Motivation

Background

We have content displayed in a tabbed fieldgroups as illustrated below...

1-bootstrap-5-bug-mange-display

Everything works nicely; we have a step-by-step presentation in the first tab, and YouTube video in the second tab...

2-bootstrap-5-bug-fieldset-tabbed-working-fine

Underlying markup

The underlaying markup (below) shows the detail of each tab rendered as expected as <detail> elements with classes: card horizontal-tabs-pane...

<div class=" explanation-tabs field-group-tabs-wrapper">
  <div data-horizontal-tabs="" class="horizontal-tabs clearfix" data-once="horizontal-tabs">
    <ul data-horizontal-tabs-list="" class="horizontal-tabs-list">
      <li class="horizontal-tab-button horizontal-tab-button-0 first selected" tabindex="-1"
        data-horizontaltabbutton="0"><a href="#edit-group-tab-self-paced"><strong>Go step-by-step at your own
            pace</strong><span class="summary"></span><span id="active-horizontal-tab" class="visually-hidden">(active
            tab)</span></a></li>
      <li class="horizontal-tab-button horizontal-tab-button-1 last" tabindex="-1" data-horizontaltabbutton="1"><a
          href="#edit-group-video-version"><strong>Watch and listen</strong><span class="summary"></span></a></li>
    </ul>
    <div data-horizontal-tabs-panes="" class="horizontal-tabs-panes">
      <input class="horizontal-tabs-active-tab" type="hidden" value="edit-group-tab-self-paced">

      <details class="tab-self-paced js-form-wrapper form-wrapper card horizontal-tabs-pane"
        id="edit-group-tab-self-paced" open="open" data-once="details">
        ...
      </details>

After theme update

Immediately after updating 3.0.11 => 3.012 these fieldgroups are smashed and don't render at all.

Debugging

Digging into the markup, it seems that after the update, the <detail> HTML elements are incorrectly rendered as accordions! as show in the markup below...

<details class="accordion-item" data-once="details">
  <summary role="button" aria-controls="edit-group-tab-self-paced" aria-expanded="false" class="accordion-header">
  </summary>
</details>

That's quite a hard-hitting bug ;-)

Versions affected

We have experimented with updates both 3.011 => 3.0.12 and 3.011 => 3.0.12 and we can confirm that we are seeing the same symptoms with both.

Rolling back to 3.0.11 fixes it all back up immediately

Comments

sirclickalot’s picture

Title: Tabbed fieldgroups broken after update 3.0.11 => 30.12 » Tabbed fieldgroups broken after update 3.0.11 => 3.0.12
Issue summary: View changes
sirclickalot’s picture

Priority: Normal » Major
vladimiraus’s picture

Version: 3.0.12 » 3.0.x-dev
Status: Active » Needs work

Seems like #3337643: Apply B5 accordion styles to HTML element details was broken the tabs and needs to be reverted.

vladimiraus’s picture

Status: Needs work » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.