Fieldgroup vertical tabs

Thank you for the bug report! I'm moving this to the Drupal core issue queue because Claro is now in Drupal core and we will handle bug fixes there.

I was not able to reproduce this bug in D9.3.x with field_group 3.2, which is the supported version. I'm going to close this as Outdated.

I was able to reproduce using field_group 1.0 and D8.9.x. However, when I updated to field_group 3.2, the bug went away. Seeing as field_group 1.0 is no longer supported since it is only compatible with D8, which is also no longer supported, this bug is outdated.

Thanks all!

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 and therefor this issue should probably be addressed in Claro, but I'm not entirely sure. I also think that the `$element['group']['#groups']` element is somewhat awkwardly placed in this render array. 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, but please beware, this is only a workaround until this issue is resolved.

  /**
   * 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
   *
   * @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) {
      return $element;
    }

    $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') {
        continue;
      }

      // 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)