Contrib.social

Applying #states to a vertical tab does not update the vertical tabs menu

Open on Drupal.org →
Created on 6 May 2011, over 13 years ago
Updated 30 January 2023, almost 2 years ago

Problem/Motivation

Applying the states API to a vertical tab removes the tab content, but not the link in the vertical tab menu:

Steps to reproduce:

$form['toggle_visible'] = array(
      '#type' => 'checkbox',
      '#title' => $this->t('Toggle visibility'),
      '#default_value' => FALSE,
    );
    $form['vertical_tabs1'] = array(
      '#type' => 'vertical_tabs',
      '#default_tab' => 'edit-details1',
    );
    $form['details1'] = array(
      '#type' => 'details',
      '#title' => $this->t('details1'),
      '#open' => TRUE,
      '#group' => 'vertical_tabs1',
      '#states' => array(
        'visible' => array(
          'input[name=toggle_visible]' => array('checked' => FALSE),
        ),
      ),
    );

Proposed resolution

Make states apply to the vertical tab and update the vertical tab menu accordingly.

Remaining tasks

  1. Write a patch
  2. Review
  3. Commit

User interface changes

States are applied to the vertical tab and update the vertical tab menu accordingly.

API changes

To be determined.

Data model changes

None.

Original report by Berdir:

See #767212-12: #states can't hide/show fieldsets → .

The attached patch fixes it, it's probably a bit hackish, but that was the best I could come up with my limited JS skills :)

What it does is add a derived id (based on the fieldset id) to each vertical tab li element. Then it overrides the state:visibile handler for those fieldsets and instead hides/shows the corresponding button. It also switches back to the nearest fieldset if it is currently active when hidden again.

I guess it might be possible to pass the vertical_tab element somehow directly to that bind callback, which would make that id stuff unecessary.

🐛 Bug report
Status

Needs work

Version

10.1 ✨

Component
Javascript  →

Last updated 6 days ago

Created by

🇨🇭Switzerland berdir Switzerland

Live updates comments and jobs are added and updated live.
  • Needs backport to D7

    After being applied to the 8.x branch, it should be considered for backport to the 7.x branch. Note: This tag should generally remain even after the backport has been written, approved, and committed.

  • Needs tests

    The change is currently missing an automated test that fails when run with the original code, and succeeds when the bug has been fixed.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Comment almost 2 years ago →
    needs-review-queue-bot

    The Needs Review Queue Bot → tested this issue. It either no longer applies to Drupal core, or fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

    Apart from a re-roll or rebase, this issue may need more work to address feedback in the issue or MR comments. To progress an issue, incorporate this feedback as part of the process of updating the issue. This helps other contributors to know what is outstanding.

    Consult the Drupal Contributor Guide → to find step-by-step guides for working with issues.

  • Comment about 1 year ago →
    🇬🇧United Kingdom andreastkdf

    Reroll for 10.2.x

  • Open in Jenkins → Open on Drupal.org →
    Environment: PHP 8.1 & MariaDB 10.3.22
    last update about 1 year ago
    29,722 pass
  • Open in Jenkins → Open on Drupal.org →
    Environment: PHP 8.1 & MySQL 5.7
    last update about 1 year ago
    Custom Commands Failed
  • Comment 7 days ago →
    🇩🇪Germany CHiLi.HH

    The patch from #91 works as far as #states are usable for vertical tabs. However, with Drupal v10.4.0 I currently encounter the problem, that the initial state of impacted tabs is not set correctly. In other words, in my form I have a checkbox that should determine if a tab and it's corresponding menu entry should be visible as long as the checkbox is actually checked. If the initial state of the checkbox is unchecked, the corresponding tab and it's menu entry still get displayed nevertheless until I uncheck and re-check the controlling checkbox.

    It seems to me as if only the visibility state of the tab and its menu entry is set wrong for the initial state and it's not a fault of the controlling checkbox/form element. Why do I think that? Because in the tab that is to be conditionally displayed there are form elements contained that should receive a "required" flag when the same checkbox that is controlling the tab visibility is checked - and this works. In the initial state (so, when the tab itself is wrongly displayed) the dependant form elements within that tab are NOT required and only get required once the checkbox is actually ticked.

    Unfortunately I was not able to spot the code fragment that's responsible for the state initialization and therefore can't provide an updated patch. :-(

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024