Horizontal tab required marker can wrap due to duplicate summary span

Created on 9 January 2025, 3 months ago

Problem/Motivation

Usually Drupal.behaviors.horizontalTabs() will run before core's Drupal.behaviors.detailsSummary(). So the former makes its own tab title element and adds a <span class="summary"> element to it. But if a page brings the horizontal tabs library into a page over AJAX that already had core's drupal.collapse library on it, the behavior to insert that span element into the <summary> of the details element that will be transformed into a tab, will run first. So when the tab title is set up, that existing span.summary element is copied into it, before a duplicate span.summary is also appended. This means any required marker in the tab title will be wrapped below the tab title text, because the span.summary is (rightly) set to display:block;:

The scenario in the screenshot uses the layout_paragraphs' modal editing UI - so the horizontal tabs within entity editing forms are loaded into the page over AJAX. I've included devtools in the screenshot to highlight the duplicate span.summary element, as well as showing the original (hidden) <summary> element that has its own span.summary element.

Proposed resolution

Before adding a span.summary element to horizontal tabs' titles, remove any existing one that may have already been added by Drupal.behaviors.detailsSummary() first.

🐛 Bug report
Status

Active

Version

3.0

Component

User interface

Created by

🇬🇧United Kingdom james.williams

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024