diff --git a/core/misc/vertical-tabs.js b/core/misc/vertical-tabs.js index 85f200f5f80972442a1970fc7d4fed1ad298421f..67a9b3ea4de079c0f43bea0b003299c7934485e0 100644 --- a/core/misc/vertical-tabs.js +++ b/core/misc/vertical-tabs.js @@ -118,6 +118,21 @@ } }, ); + + // If a validation error is within a vertical tab, open that tab. + context.querySelectorAll('details .form-item .error').forEach((item) => { + const details = item.closest('details'); + + if (details.style.display === 'none') { + const tabSelect = document.querySelector( + "[href='#".concat(details.id, "']"), + ); + + if (tabSelect) { + tabSelect.click(); + } + } + }); }, }; diff --git a/core/modules/ckeditor5/js/ckeditor5.admin.js b/core/modules/ckeditor5/js/ckeditor5.admin.js index 0e3d3487eb8eddddfcf8a1430dd46b585f89c14d..0cb64ee2f5f51cd6a09dbfb35f92996f2d18aa98 100644 --- a/core/modules/ckeditor5/js/ckeditor5.admin.js +++ b/core/modules/ckeditor5/js/ckeditor5.admin.js @@ -1057,21 +1057,4 @@ // Call the original behavior. originalFilterStatusAttach(context, settings); }; - - // Activates otherwise-inactive tabs that have form elements with validation - // errors. - // @todo Remove when https://www.drupal.org/project/drupal/issues/2911932 lands. - Drupal.behaviors.tabErrorsVisible = { - attach(context) { - context.querySelectorAll('details .form-item .error').forEach((item) => { - const details = item.closest('details'); - if (details.style.display === 'none') { - const tabSelect = document.querySelector(`[href='#${details.id}']`); - if (tabSelect) { - tabSelect.click(); - } - } - }); - }, - }; })(Drupal, drupalSettings, jQuery, JSON, once, Sortable, tabbable); diff --git a/core/modules/system/tests/modules/form_test/src/Form/FormTestGroupVerticalTabsForm.php b/core/modules/system/tests/modules/form_test/src/Form/FormTestGroupVerticalTabsForm.php index 7a29d7d7ee000c0136ad61253da23cc3029f6282..3e47c908c8c14763da53bca6ee1a862d4b62b3b5 100644 --- a/core/modules/system/tests/modules/form_test/src/Form/FormTestGroupVerticalTabsForm.php +++ b/core/modules/system/tests/modules/form_test/src/Form/FormTestGroupVerticalTabsForm.php @@ -44,9 +44,22 @@ public function buildForm(array $form, FormStateInterface $form_state) { '#type' => 'textfield', '#title' => 'Second nested element in details element', ]; + $form['submit'] = [ + '#type' => 'submit', + '#value' => 'Save', + ]; return $form; } + /** + * {@inheritdoc} + */ + public function validateForm(array &$form, FormStateInterface $form_state) { + if ($form_state->getValue('element_2') === 'bad') { + $form_state->setErrorByName('element_2', $this->t('there was an error')); + } + } + /** * {@inheritdoc} */ diff --git a/core/tests/Drupal/FunctionalJavascriptTests/Core/Form/FormGroupingElementsTest.php b/core/tests/Drupal/FunctionalJavascriptTests/Core/Form/FormGroupingElementsTest.php index e4cfcb9bec236811e37c08d4135633f4cdbb415f..488e07d20a72840e697ef28ca588dce075000c1d 100644 --- a/core/tests/Drupal/FunctionalJavascriptTests/Core/Form/FormGroupingElementsTest.php +++ b/core/tests/Drupal/FunctionalJavascriptTests/Core/Form/FormGroupingElementsTest.php @@ -135,4 +135,33 @@ public function testDetailsChildVisibility() { $this->assertEquals('true', $summary->getAttribute('aria-pressed')); } + /** + * Confirms tabs containing a field with a validation error are open. + */ + public function testVerticalTabValidationVisibility() { + $page = $this->getSession()->getPage(); + $assert_session = $this->assertSession(); + + $this->drupalGet('form-test/group-vertical-tabs'); + $page->clickLink('Second group element'); + $input_field = $assert_session->waitForField('element_2'); + $this->assertNotNull($input_field); + + // Enter a value that will trigger a validation error. + $input_field->setValue('bad'); + + // Switch to a tab that does not have the error-causing field. + $page->clickLink('First group element'); + $this->assertNotNull($assert_session->waitForElementVisible('css', '#edit-meta')); + + // Submit the form. + $page->pressButton('Save'); + + // Confirm there is an error. + $assert_session->waitForText('there was an error'); + + // Confirm the tab containing the field with error is open. + $this->assertNotNull($assert_session->waitForElementVisible('css', '[name="element_2"].error')); + } + }