Problem/Motivation

If a form includes nested horizontal tabs (e.g. paragraph tabs within node tabs), the child tabs break the default open state of the parent ones.

This issue only surfaces in edge cases when the default tab is configured to be something other than the 1st tab.

Steps to reproduce

  1. Install the Field Group and Paragraphs modules.
  2. Create a Paragraph type with two text fields.
  3. Go to the Paragraph type's Manage Form Display page:
    • Add a Tabs group (horizontal), with two Tab sub-groups.
    • Place one text field under each tab.
  4. Create a new Content type with one Paragraph field that allows only the paragraph type created above.
  5. Go to the Content type's Manage Form Display page:
    • Add a Tabs group (horizontal), with two Tab sub-groups.
    • Place the Title field under the 1st tab, and the Paragraph field under the 2nd.
    • Set the 2nd tab to be open by default
  6. Open the node add form for that content type.

Observed behavior: The 1st tab is open by default, not the configured 2nd tab.

Proposed resolution

Update formatters/tabs/horizontal-tabs.js to use a stricter selector, so nested tab structures don't interfere with the parent's default state. Change :hidden.horizontal-tabs-active-tab to > :hidden.horizontal-tabs-active-tab.

Remaining tasks

Review. Test.

User interface changes

None.

API changes

None.

Data model changes

None.

CommentFileSizeAuthor
#5 field_group_horizontal_tabs.png55.27 KBbember
#4 Screenshot 2025-07-22 at 12.51.33 PM.png258.31 KBsandeep_k

Issue fork field_group-3535860

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

bember created an issue. See original summary.

bember opened merge request !117

bember’s picture

bember commented
Issue summary: View changes
Status: Active » Needs review

MR is ready for review.

sandeep_k’s picture

sandeep_k commented
StatusFileSize
new Screenshot 2025-07-22 at 12.51.33 PM.png258.31 KB

I tried to reproduce this by following the steps as shared above, but was unable to do so. I checked this on- Drupal Version 10.3.1-dev.
Let me know if I have missed any steps here.

bember’s picture

bember commented
Issue summary: View changes
StatusFileSize
new field_group_horizontal_tabs.png55.27 KB

Hi @sandeep_k, thanks for testing. To clarify, the issue is about horizontal tabs (see the attached example).

anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented
Issue tags: +Needs tests

Can we have a (broken without fix) test for this maybe? That would be great!

benstallings’s picture

benstallings commented
Status: Needs review » Needs work

pending requested tests

benstallings’s picture

benstallings commented
Assigned: Unassigned » benstallings
benstallings’s picture

benstallings commented
Assigned: benstallings » Unassigned
Status: Needs work » Needs review
anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented
Issue tags: -Needs tests

Thanks @benstallings!!

@bember or anyone else could you please test manually that this issue is resolved?
@benstallings I guess you already were able to reproduce this manually and tested the fix?

anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented
Status: Needs review » Reviewed & tested by the community
anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented
Status: Reviewed & tested by the community » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

  • anybody committed 7f046e93 on 4.x authored by bember 
    Issue #3535860: Fix nested horizontal tabs breaking parent default tab

Status: Fixed » Closed (fixed)

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