Problem/Motivation

Tabs (Field Group Module) display as an Accordion after update from 4.0.7 to 4.0.8.

Steps to reproduce

Update Bootstrap 5 module to 4.0.8 and Field Group Tabs become an Accordian.

Proposed resolution

Had to roll back to 4.0.7. Not sure what changes were made between versions 4.0.8 and 4.0.7.

Remaining tasks

N/A

User interface changes

Field Group Tabs are displayed as an Accordion menu. Accordion classes were added to Field Group tabs.

API changes

N/A

Data model changes

N/A

4.0.8 HTML Example 

<div class="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 visually-hidden"></ul>
  <div data-horizontal-tabs-panes="" class="horizontal-tabs-panes">
  <input class="horizontal-tabs-active-tab" type="hidden" data-once="field-group-tabs-validation">

<div id="data-access" class="js-form-wrapper form-wrapper accordion">
	<details class="accordion-item" data-once="details">			<summary role="button" aria-controls="data-access" aria-expanded="false" class="accordion-header accordion-button">Data Access<span class="summary"></span></summary><div class="accordion-body">

4.0.7 HTML Example 
<div class="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 js-form-wrapper form-wrapper card horizontal-tab-button-0 first selected" tabindex="-1" data-horizontaltabbutton="0"><a href="#data-access"><strong>Data Access</strong><span id="active-horizontal-tab" class="visually-hidden">(active tab)</span></a></li><li class="horizontal-tab-button js-form-wrapper form-wrapper card horizontal-tab-button-1" tabindex="-1" data-horizontaltabbutton="1"><a href="#product-overview"><strong>Product Overview</strong></a></li><li class="horizontal-tab-button js-form-wrapper form-wrapper card horizontal-tab-button-2" tabindex="-1" data-horizontaltabbutton="2"><a href="#product-details"><strong>Product Details</strong></a></li><li class="horizontal-tab-button js-form-wrapper form-wrapper card horizontal-tab-button-3" tabindex="-1" data-horizontaltabbutton="3"><a href="#documentation"><strong>Documentation</strong></a></li><li class="horizontal-tab-button js-form-wrapper form-wrapper card horizontal-tab-button-4 last" tabindex="-1" data-horizontaltabbutton="4"><a href="#citation"><strong>Citation</strong></a></li></ul>
  <div data-horizontal-tabs-panes="" class="horizontal-tabs-panes">
  <input class="horizontal-tabs-active-tab" type="hidden" value="data-access" data-once="field-group-tabs-validation">

<details id="data-access" class="js-form-wrapper form-wrapper card horizontal-tabs-pane" open="true" data-once="details">
    <summary role="button" aria-controls="data-access" aria-expanded="false" class="card-header">Data Access<span class="summary"></span></summary><div class="details-wrapper card-body">

p.s. Thank you for your hard work in developing and maintaining this awesome module :)

CommentFileSizeAuthor
#2 bootstrap5-field_group_tabs_as_accordion-3574890-2.patch1.84 KBvelmir_taky
Field-Group-Tabs-4.0.7.png4.72 KBjebjeffery
Field-Group-Tabs-4.0.8.png10.84 KBjebjeffery

Comments

jebjeffery created an issue. See original summary.

velmir_taky’s picture

velmir_taky commented
Status: Active » Needs review
StatusFileSize
new bootstrap5-field_group_tabs_as_accordion-3574890-2.patch1.84 KB

Root cause

The details.html.twig template was rewritten in 4.0.8 to use Bootstrap accordion markup. This introduces two breaking changes:

1. A wrapping <div> was added around <details>, and attributes (including id, data-*, classes) were moved to this <div> instead of <details>. Field Group's JavaScript locates tab panes by targeting <details> elements by their id — with the id on the wrapper <div>, it can no longer find them.
2. Bootstrap's accordion classes (accordion, accordion-item, accordion-button) apply collapse behavior that conflicts with Field Group's horizontal tab JavaScript.

4.0.8 (broken):

<div id="test-tab" class="horizontal-tab-pane accordion">
    <details class="accordion-item">

4.0.7 (correct):

<details id="test-tab" class="horizontal-tab-pane card">

Fix

Reverts the template to use Bootstrap card classes (card, card-header, card-body) with <details> as the root element, preserving the error/description styling improvements from 4.0.8.

Steps to test

1. Apply patch to themes/contrib/bootstrap5/
2. Enable Bootstrap5 as default theme and enable Field Group module
3. Create a content type with horizontal tabs (Field Group → Tabs)
4. Verify tabs render as horizontal tabs, not as an accordion

jannakha’s picture

jannakha commented
Related issues: +#3576867: Implement vertical (group) tabs (instead of <details>)