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
- Write a patch
- Review
- 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.