The VerticalTabs render component needs the hidden input field for "'#default_value" to have its class attribute updated to match the BEM standard being used by the JavaScript library to set the #default_tab.

Line 139: /core/lib/Drupal/Core/Render/Element/VerticalTabs.php

'#attributes' => array('class' => array('vertical-tabs-active-tab')),

... should be

'#attributes' => array('class' => array('vertical-tabs__active-tab')),

... so that the vertical-tabs.js

var focusID = $this.find(':hidden.vertical-tabs__active-tab').val();

... will find and set the default tab.

Patch attached.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

blue_waters created an issue. See original summary.

imalabya’s picture

Status: Active » Needs review
anthony.bouch’s picture

Version: 8.0.x-dev » 8.1.x-dev
Issue tags: +render, +vertical tabs, +default value
anthony.bouch’s picture

Issue tags: +form elements, +elements
Wim Leers’s picture

Title: VerticalTabs - Default Tab Not Set » VerticalTabs' #default_tab broken due to wrong/mismatching class name
Status: Needs review » Reviewed & tested by the community
Issue tags: -render, -default value, -form elements, -elements +Contributed project soft blocker, +JavaScript, +Usability
Related issues: +#2294613: Port CDN to Drupal 8

Confirmed, ran into this problem over at #2294613: Port CDN to Drupal 8.

I independently arrived at the same patch.

alexpott’s picture

Status: Reviewed & tested by the community » Fixed

Committed c4be3d5 and pushed to 8.0.x, 8.1.x and 8.2.x. Thanks!

I've committing this to 8.0.x as well because whilst this is changing a class name it intended use in the js is completely broken.

  • alexpott committed 48e0852 on 8.2.x
    Issue #2677414 by blue_waters: VerticalTabs' #default_tab broken due to...

  • alexpott committed 894e605 on 8.1.x
    Issue #2677414 by blue_waters: VerticalTabs' #default_tab broken due to...

  • alexpott committed c4be3d5 on 8.0.x
    Issue #2677414 by blue_waters: VerticalTabs' #default_tab broken due to...
anthony.bouch’s picture

w00t! my first (albeit tiny) commit to core. Thanks for the review and confirmation @malavya @Wim Leers, and the fast commit @alexpott.

Wim Leers’s picture

Congrats, @blue_waters! Great work :)

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.