Titles are missing in horizontal tabs

We have noticed this Bug also, while checking out core 8.9.x-dev. The titles of the tabs seem to be missing in the markup.

Tracked this down a bit. The tabs still render as expected using the Claro theme, but not in Seven anymore.

The Seven theme in core 8.9.x-dev added/will add a <span> element around the title in <summary>

/* File: /core/themes/seven/templates/details.html.twig */

     <summary{{ summary_attributes.addClass(summary_classes) }}>
-      {{- title -}}
+      <span>{{ title }}</span>
     </summary>

This seems to break the following line in '/modules/field_group/formatters/tabs/horizontal-tabs.js':

var summaryElement = $this.find('> summary .details-title');

If I remove the span from Seven's template OR replace '.details-title' with 'span' inside the function the tabs will be rendered correctly.

var summaryElement = $this.find('> summary span');

Could this break things in another place? I am also not sure where this issue belongs, so help would be highly appreciated.

Thanks!

Adding the issue where this new <span> was implemented.

I've added the following patch.

Patch doesn't work for me either using seven theme. My content edit screen is fairly unusable at this point.

If anyone could check this with ie11, that would be great.

Added a Nightwatch test (so at least Chrome should be fine).
The interdiff is the test-only patch itself.

@the_glitch, what browser do you use?

I had a similar problem with Drupal 8.9.0. final. But it is realted to the JS and the Jquery update on 8.9.0

#3145717: Empty tab labels Drupal 8.9.0

The attached patches aren't fixing the issue (which happens on the Bootstrap theme, I guess with version 8.x-3.x).

Setting back to active, and added #3145717: Empty tab labels Drupal 8.9.0 as related issue. I guess that one should be fixed first.

Similar to @the_glitch we are using Horizontal tabs and the seven admin theme. I've tried patches from this ticket as well as from #3145717 but no luck so far.

Updated: Ignore that, I've upgraded to field_group 3.1 and Drupal 8.9.0 and the tabs are working correctly. Not sure what I did wrong but I can't replicate anymore.

Can confirm, field_group 3.1 fixes it.

I see the same bug for Field Group 3.0 and Adminimal Theme

@platico You should check it with 3.1 not with an older version.
I also use adminimal and the patch has fixed it here. I use chrome/vivaldi

@platico try Field Group 3.1 first, it seems to fix it for some (not all, see #22) people.

I confirm that it is solved when using Adminimal theme and Field Group version 3.1

@the_glitch i also use bootstrap as a frontend. You mean botstrap as a backend?

I use:
- frontend radix = bootstrap 4
- backend adminimal/seven
- drupal 8.9.1
- latest field_groups module

This sounds like a bootstrap 3.2 issue. I got past this by overriding the template in my theme to add .details-title as a class on the span. Better fix my theme than to force a bespoke fix in a contrib module.

Weird.
I am using seven theme and I had to tweak the template to add the .details-title to the span

I am also seeing this with Adminimal. Switching to Claro for now

I can confirm upgrading to 3.1 with core 8.9.5 works for me with the Seven admin theme.

Cheers

Tom

I confirm to upgrading to 3.1 with core 8.9.8 works for me with the adminimal admin theme.
Thks,

Confirming on 8.9.9 the patch fixes the issue.

Updating to 3.1 on Drupal 8.9.11 fixed the issue for us when using the seven theme!

I think this is duplicate to #3145717: Empty tab labels Drupal 8.9.0 and probably can be closed. The fix in the other ticket is merged in 3.0

I'm no longer seeing this issue in D9 with field_group 8.x-3.2 with seven admin theme. I agree that it can be marked as fixed.