Fieldgroup vertical tabs

I'm seeing this issue as well, using 8.x-3.4 and Gin 8.x-3.0-rc1. Therefor I think this may be reopened.

@nielsva, it might be better to open an issue against Gin. IF this can't be reproduced without Gin, then this is a bug with Gin (even though Gin extends Claro).

Hi @danflanagan8, thanks for the reply. I narrowed it down to the following conditions:

1. This only occurs on Claro (based) themes
2. This only occurs on non Form API based usages of field_group's vertical tabs, eg. view mode of a node.

I noticed that core/themes/claro/src/ClaroPreRender.php:88 seems to be dependent on a `$element['group']['#groups'][$group_key][$child_key]['#type']` variable which is not set at this point. This seems to make sense when I look into `field_group` which seems to not set these when rendered outside a Form API context, see: field_group/src/Element/VerticalTabs.php:26.

The `\Drupal\claro\ClaroPreRender::verticalTabs` should be setting a `vertical-tabs__item` class on the `` element. If that is done, it would hide the `` and I think that everything should be fine.

Though, the `$element['group']['#groups']` element does not seem to be the right place to add the attributes to. I'm guessing the Claro prerender should be revisited, but I'm not entirely sure. What's your assessment on this?

Since we need to fix this issue yesterday, I've cooked up the following preprocess method which now lives in a custom module. Placing it here for anyone in need.

```
/**
* Sets the correct Claro / Gin classes.
*
* This is a workaround until the following issue is solved.
* https://www.drupal.org/project/drupal/issues/3093189#comment-15053368 🐛 Fieldgroup vertical tabs Active
*
* @param array $element
* The element containing vertical tabs.
*
* @return array
* The resulting pre-rendered element.
*/
public static function verticalTabs(array $element): array {
$groupTypeIsDetails = isset($element['group']['#type']) && $element['group']['#type'] === 'details';
$groupsArePresent = isset($element['group']['#groups']) && is_array($element['group']['#groups']);

if ($groupTypeIsDetails && $groupsArePresent) {
$groupName = $element['#group_name'];
$childrenKeys = Element::children($element, TRUE);
foreach ($childrenKeys as $childKey) {
if (!isset($element[$childKey]['#group']) || $element[$childKey]['#group'] !== $groupName) {
continue;
}

$type = $element[$childKey]['#type'] ?? NULL;
if ($type === 'details') {
// Add BEM class to specify the details element is in a vertical
// tabs group.
$element[$childKey]['#attributes']['class'][] = 'vertical-tabs__item';
$element[$childKey]['#vertical_tab_item'] = TRUE;
}
}
}

return $element;
}

```

I just encountered the same issue with vertical tabs showing another fieldset inside the tab pane.
For my case I was configuring the user view display mode to use vertical tabs (not an input form)
Running the latest field_group module 8.x-3.6 and (not sure if Claro or Gin issue), but Gin 8.x-3.0-rc13

The fix for my case was a bit simpler, without needing a preprocess function, I manually added the vertical-tabs__item class in the field group config settings, then the display appears as expected (see screenshot)