When form contains #vertical_tabs and the tabs are located within the parent without the usage of #group they will not show up. In order for tabs to be displayed at least one tab has to have #group specified. I think this can be related to #601644: Vertical Tabs requires group to be specified before tabs.

Comments

Anonymous’s picture

Anonymous (not verified) commented
Title: vertical_tabs form element does not work if at least one #group is specified » vertical_tabs form element does not work if at least one #group is not specified
Anonymous’s picture

Anonymous (not verified) commented
Version: 8.0-alpha7 » 8.0-alpha8

still present in d8a8

Anonymous’s picture

Anonymous (not verified) commented

If the details/vertical tab children are placed within the vertical_tabs element and they have #group set it still does not work. There has to be a child/vertical tab/details outside of the vertical_tabs element with #group set, then it works.

Anonymous’s picture

Anonymous (not verified) commented
Priority: Normal » Major

Drupal 8 Beta 11 still has this issue. If the helper elemen mentioned in #3 is not used NOTHING is displayed.

Anonymous’s picture

Anonymous (not verified) commented

Still issue in head.

// Create groups.
    if (!empty($groups)) {
      $form['filter_groups'] += [
        '#type' => 'vertical_tabs'
      ];
      foreach ($groups AS $group_name => $group_label) {
        $form['filter_groups'][$group_name] += [
          '#type' => 'details',
          '#title' => $group_label
        ];
      }

      $form['_nothig_'] = [
        '#type' => 'details',
        '#title' => 'nothing',
        '#group' => 'filter_groups'
      ];
    }
Anonymous’s picture

Anonymous (not verified) commented
Title: vertical_tabs form element does not work if at least one #group is not specified » vertical_tabs form element does not work if at least one #group element is not specified outisde
Anonymous’s picture

Anonymous (not verified) commented

bump

Anonymous’s picture

Anonymous (not verified) commented

The issue comes from the \Drupal\Core\Render\Element\RenderElement::processGroup method and the tabs are being hidden in \Drupal\Core\Render\Element\VerticalTabs::preRenderVerticalTabs.

I think in the processGroup the issue is that there are entries like:

$element['group']['#groups'] = [
'foo][1' =>  ['#group_exists' => TRUE],
'foo][2' =>  ['#group_exists' => TRUE],
'foo][3' =>  ['#group_exists' => TRUE],
'foo][4' =>  ['#group_exists' => TRUE],
'foo][5' =>  ['#group_exists' => TRUE],
'foo' =>  ['#group_exists' => TRUE],
];

which are childless entries and therefore the preRenderVerticalTabs() will not show anything.

Adding the "nothing" from my example above will result in something like:

$element['group']['#groups'] = [
  'foo][1' =>  ['#group_exists' => TRUE],
  'foo][2' =>  ['#group_exists' => TRUE],
  'foo][3' =>  ['#group_exists' => TRUE],
  'foo][4' =>  ['#group_exists' => TRUE],
  'foo][5' =>  ['#group_exists' => TRUE],
  'foo' =>  [
    '#group_exists' => TRUE,
    0 => [
      '#type' => 'details',
      '#title' => 'nothing',
      '#group' => 'foo'
    ]
  ],
];

which will tell the preRenderVerticalTabs() that there are children and they are visible so display the tabs properly.

The preRenderVerticalTabs() fires first so there is no time to set the #group for each child details automatically and I think that is the flaw in the workflow.

Anonymous’s picture

Anonymous (not verified) commented
Issue summary: View changes
joelpittet’s picture

joelpittet
he/him
Primary language English
Location Vancouver
commented
Version: 8.0-alpha8 » 8.0.x-dev

Doing a bit of triage, is this still a problem in the latest release?

Anonymous’s picture

Anonymous (not verified) commented

Still present in rc1.

joelpittet’s picture

joelpittet
he/him
Primary language English
Location Vancouver
commented
Priority: Major » Normal
Status: Active » Postponed (maintainer needs more info)
Issue tags: +Needs tests, +Needs issue summary update

@ivanjaros this really needs a better description of the problem. The issue summary is unclear to what the problem is. Can you describe steps to reproduce this problem and maybe a test to prove it's not working as expected?

Until otherwise this issue is normal and not major.

Providing a patch to resolve this issue would be great too but a better summary of the problem would really help resolve this. Also the title could be more clear too. eg "is not specified outisde", outside of what?

Anonymous’s picture

Anonymous (not verified) commented

OK, try this:

$form['group1'] = [
      '#type' => 'vertical_tabs'
    ];
    $form['group1']['test1'] = [
      '#type' => 'details',
      '#title' => 'test1',
    ];
    $form['group1']['test1']['field1'] = [
      '#type' => 'textfield',
      '#title' => 'field1'
    ];
    $form['group1']['test2'] = [
      '#type' => 'details',
      '#title' => 'test2',
    ];
    $form['group1']['test2']['field2'] = [
      '#type' => 'textfield',
      '#title' => 'field2'
    ];
    $form['group1']['test3'] = [
      '#type' => 'details',
      '#title' => 'test3',
    ];
    $form['group1']['test3']['field3'] = [
      '#type' => 'textfield',
      '#title' => 'field3'
    ];

result: nothing is being displayed.

$form['group1'] = [
      '#type' => 'vertical_tabs'
    ];
    $form['group1']['test1'] = [
      '#type' => 'details',
      '#title' => 'test1',
      '#group' => 'group1'
    ];
    $form['group1']['test1']['field1'] = [
      '#type' => 'textfield',
      '#title' => 'field1'
    ];
    $form['group1']['test2'] = [
      '#type' => 'details',
      '#title' => 'test2',
    ];
    $form['group1']['test2']['field2'] = [
      '#type' => 'textfield',
      '#title' => 'field2'
    ];
    $form['group1']['test3'] = [
      '#type' => 'details',
      '#title' => 'test3',
    ];
    $form['group1']['test3']['field3'] = [
      '#type' => 'textfield',
      '#title' => 'field3'
    ];

result: group 2 and 3 are displayed

$form['group1'] = [
      '#type' => 'vertical_tabs'
    ];
    $form['group1']['test1'] = [
      '#type' => 'details',
      '#title' => 'test1',
      '#group' => 'group1'
    ];
    $form['group1']['test1']['field1'] = [
      '#type' => 'textfield',
      '#title' => 'field1'
    ];
    $form['group1']['test2'] = [
      '#type' => 'details',
      '#title' => 'test2',
      '#group' => 'group1'
    ];
    $form['group1']['test2']['field2'] = [
      '#type' => 'textfield',
      '#title' => 'field2'
    ];
    $form['group1']['test3'] = [
      '#type' => 'details',
      '#title' => 'test3',
    ];
    $form['group1']['test3']['field3'] = [
      '#type' => 'textfield',
      '#title' => 'field3'
    ];

result: group 3 is is displayed

$form['group1'] = [
      '#type' => 'vertical_tabs'
    ];
    $form['group1']['test1'] = [
      '#type' => 'details',
      '#title' => 'test1',
      '#group' => 'group1'
    ];
    $form['group1']['test1']['field1'] = [
      '#type' => 'textfield',
      '#title' => 'field1'
    ];
    $form['group1']['test2'] = [
      '#type' => 'details',
      '#title' => 'test2',
      '#group' => 'group1'
    ];
    $form['group1']['test2']['field2'] = [
      '#type' => 'textfield',
      '#title' => 'field2'
    ];
    $form['group1']['test3'] = [
      '#type' => 'details',
      '#title' => 'test3',
      '#group' => 'group1'
    ];
    $form['group1']['test3']['field3'] = [
      '#type' => 'textfield',
      '#title' => 'field3'
    ];

result: nothing is displayed

$form['group1'] = [
      '#type' => 'vertical_tabs'
    ];
    $form['test1'] = [
      '#type' => 'details',
      '#title' => 'test1',
      '#group' => 'group1'
    ];
    $form['test1']['field1'] = [
      '#type' => 'textfield',
      '#title' => 'field1'
    ];
    $form['test2'] = [
      '#type' => 'details',
      '#title' => 'test2',
      '#group' => 'group1'
    ];
    $form['test2']['field2'] = [
      '#type' => 'textfield',
      '#title' => 'field2'
    ];
    $form['test3'] = [
      '#type' => 'details',
      '#title' => 'test3',
      '#group' => 'group1'
    ];
    $form['test3']['field3'] = [
      '#type' => 'textfield',
      '#title' => 'field3'
    ];

result: all groups are properly displayed

$form['group1'] = [
      '#type' => 'vertical_tabs'
    ];
    $form['group1']['test1'] = [
      '#type' => 'details',
      '#title' => 'test1',
      '#group' => 'group1'
    ];
    $form['group1']['test1']['field1'] = [
      '#type' => 'textfield',
      '#title' => 'field1'
    ];
    $form['test2'] = [
      '#type' => 'details',
      '#title' => 'test2',
      '#group' => 'group1'
    ];
    $form['test2']['field2'] = [
      '#type' => 'textfield',
      '#title' => 'field2'
    ];
    $form['test3'] = [
      '#type' => 'details',
      '#title' => 'test3',
      '#group' => 'group1'
    ];
    $form['test3']['field3'] = [
      '#type' => 'textfield',
      '#title' => 'field3'
    ];

result: group 2 and 3 are displayed

 $form['group1'] = [
      '#type' => 'vertical_tabs'
    ];
    $form['group1']['test1'] = [
      '#type' => 'details',
      '#title' => 'test1',
    ];
    $form['group1']['test1']['field1'] = [
      '#type' => 'textfield',
      '#title' => 'field1'
    ];
    $form['test2'] = [
      '#type' => 'details',
      '#title' => 'test2',
      '#group' => 'group1'
    ];
    $form['test2']['field2'] = [
      '#type' => 'textfield',
      '#title' => 'field2'
    ];
    $form['test3'] = [
      '#type' => 'details',
      '#title' => 'test3',
      '#group' => 'group1'
    ];
    $form['test3']['field3'] = [
      '#type' => 'textfield',
      '#title' => 'field3'
    ];

result: all groups are displayed

$form['group1'] = [
      '#type' => 'vertical_tabs'
    ];
    $form['group1']['test1'] = [
      '#type' => 'details',
      '#title' => 'test1',
      '#group' => 'group1'
    ];
    $form['group1']['test1']['field1'] = [
      '#type' => 'textfield',
      '#title' => 'field1'
    ];
    $form['group1']['test2'] = [
      '#type' => 'details',
      '#title' => 'test2',
      '#group' => 'group1'
    ];
    $form['group1']['test2']['field2'] = [
      '#type' => 'textfield',
      '#title' => 'field2'
    ];
    $form['group1']['test3'] = [
      '#type' => 'details',
      '#title' => 'test3',
      '#group' => 'group1'
    ];
    $form['group1']['test3']['field3'] = [
      '#type' => 'textfield',
      '#title' => 'field3'
    ];

    $form['dummy_details'] = [
      '#type' => 'details',
      '#title' => 'dummy_details',
      '#group' => 'group1'
    ];
    $form['dummy_details']['dummy_field'] = [
      '#type' => 'textfield',
      '#title' => 'dummy field'
    ];

result: dummy group is displayed

$form['group1'] = [
      '#type' => 'vertical_tabs'
    ];
    $form['group1']['test1'] = [
      '#type' => 'details',
      '#title' => 'test1',
    ];
    $form['group1']['test1']['field1'] = [
      '#type' => 'textfield',
      '#title' => 'field1'
    ];
    $form['group1']['test2'] = [
      '#type' => 'details',
      '#title' => 'test2',
      '#group' => 'group1'
    ];
    $form['group1']['test2']['field2'] = [
      '#type' => 'textfield',
      '#title' => 'field2'
    ];
    $form['group1']['test3'] = [
      '#type' => 'details',
      '#title' => 'test3',
      '#group' => 'group1'
    ];
    $form['group1']['test3']['field3'] = [
      '#type' => 'textfield',
      '#title' => 'field3'
    ];

    $form['dummy_details'] = [
      '#type' => 'details',
      '#title' => 'dummy_details',
      '#group' => 'group1'
    ];
    $form['dummy_details']['dummy_field'] = [
      '#type' => 'textfield',
      '#title' => 'dummy field'
    ];

result: group1 and dummy group are displayed

and so on...

Version: 8.0.x-dev » 8.1.x-dev

Drupal 8.0.6 was released on April 6 and is the final bugfix release for the Drupal 8.0.x series. Drupal 8.0.x will not receive any further development aside from security fixes. Drupal 8.1.0-rc1 is now available and sites should prepare to update to 8.1.0.

Bug reports should be targeted against the 8.1.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.9 was released on September 7 and is the final bugfix release for the Drupal 8.1.x series. Drupal 8.1.x will not receive any further development aside from security fixes. Drupal 8.2.0-rc1 is now available and sites should prepare to upgrade to 8.2.0.

Bug reports should be targeted against the 8.2.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.6 was released on February 1, 2017 and is the final full bugfix release for the Drupal 8.2.x series. Drupal 8.2.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.3.0 on April 5, 2017. (Drupal 8.3.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.3.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented
Version: 8.3.x-dev » 8.4.x-dev
Status: Postponed (maintainer needs more info) » Active

I'm seeing some weird behavior regarding the #group property. It seems similar/related to what Ivanjaros has found, so I'm setting this back to active. Hopefully we can get this issue going again.

My situation:
I needed to add two form elements to the 'author' group on a node: one 'checkbox' and one 'email'. I assumed this would work:

$form['my_checkbox'] = array(
  '#type' => 'checkbox',
  '#title' => 'Checkbox',
  '#group' => 'author',
);

$form['my_email'] = array(
  '#type' => 'email',
  '#title' => 'Email',
  '#group' => 'author',
);

This did indeed work for the checkbox, but not for the email field. The email field was rendered on the left side of the form, outside the vertical tabs. When I changed '#type' => 'email', to '#type' => 'textfield',, it worked as expected.

I suspected that the processGroup() method had something to do with this, so I tried:

$form['my_checkbox'] = array(
  '#type' => 'checkbox',
  '#title' => 'Checkbox',
  '#group' => 'author',

);

$form['my_email'] = array(
  '#type' => 'email',
  '#title' => 'Email',
  '#group' => 'author',
  '#process' => array(
    array('\Drupal\Core\Render\Element\Email', 'processGroup'),
  ),
);

This caused the email field to be rendered twice; on the left side and in the vertical tab. I don't know why. I also tried messing with the #parents property, but that didn't help.

Eventually, this did the trick (nesting the email form element inside $form['author']):

$form['author']['my_checkbox'] = array(
  '#type' => 'checkbox',
  '#title' => 'Checkbox',
  '#group' => 'author',
);

$form['author']['my_email'] = array(
  '#type' => 'email',
  '#title' => 'Email',
  '#group' => 'author',
);

This shouldn't be necessary (other elements inside the author vertical tab are not nested in $form['author'] either) but at least I found a workaround.

I think it's clear that something is pretty broken here, but I'm not sure where to start fixing it.

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.0-alpha1 will be released the week of July 31, 2017, which means new developments and disruptive changes should now be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.0-alpha1 will be released the week of January 17, 2018, which means new developments and disruptive changes should now be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.6.x-dev » 8.7.x-dev

Drupal 8.6.0-alpha1 will be released the week of July 16, 2018, which means new developments and disruptive changes should now be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.7.x-dev » 8.8.x-dev

Drupal 8.7.0-alpha1 will be released the week of March 11, 2019, which means new developments and disruptive changes should now be targeted against the 8.8.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

luke.stewart’s picture

luke.stewart commented
Status: Active » Closed (works as designed)
Related issues: +#1856178: '#group' Form API property only works with <details> elements, +#1168246: Freedom For Fieldsets! Long Live The DETAILS.

Can confirm the behaviour in 13 still present in Drupal 10.

Found #1856178: '#group' Form API property only works with <details> elements which appears to relate and down the rabbit hole further we have #1168246: Freedom For Fieldsets! Long Live The DETAILS..

This details a solution that includes 'Use details everywhere we're (ab)using fieldsets currently. (including vertical tabs)'

Suggesting that perhaps vertical tabs shouldn't be used for this behaviour.

If we look at the author example in #17 we see that the side bar where the author lives no longer uses vertical tabs.

Grepping the core code base for 'vertical_tabs' we still see reference to vertical tabs in various places. And if we check the documentation in the comments for
web/core/lib/Drupal/Core/Render/Element/VerticalTabs.php

we get usage which suggests that having to specify the group and not use a child element is how these elements are suppose to work.

Given this I think this is closed works as designed. Apologies if I have misunderstood.