Drupal
/
drupal
mirror of https://git.drupalcode.org/project/drupal.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Issue #2911932 by bnjmnm, arnaud-brugnon, EthanT, leslie.cordell, Gauravvvv, smustgrave, lauriii, nod_: Correct vertical tab does not focus on form validation

merge-requests/3947/head
Lauri Eskola 2023-05-05 10:11:56 +03:00
parent 504500280f
commit 5b7e07a2cc
No known key found for this signature in database
GPG Key ID: 382FC0F5B0DF53F8
6 changed files with 66 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
core/misc/vertical-tabs.es6.js
View File

@ -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();
}
}
});
},
};

9
core/misc/vertical-tabs.js
View File

@ -55,6 +55,15 @@
tabFocus.data('verticalTab').focus();
}
});
context.querySelectorAll('details .form-item .error').forEach(function (item) {
var details = item.closest('details');
if (details.style.display === 'none') {
var tabSelect = document.querySelector("[href='#".concat(details.id, "']"));
if (tabSelect) {
tabSelect.click();
}
}
});
}
};
Drupal.verticalTab = function (settings) {

17
core/modules/ckeditor5/js/ckeditor5.admin.es6.js
View File

@ -1049,21 +1049,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);

13
core/modules/ckeditor5/js/ckeditor5.admin.js
View File

@ -513,17 +513,4 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
$(filterStatusCheckboxes).off('click.filterUpdate');
originalFilterStatusAttach(context, settings);
};
Drupal.behaviors.tabErrorsVisible = {
attach: function attach(context) {
context.querySelectorAll('details .form-item .error').forEach(function (item) {
var details = item.closest('details');
if (details.style.display === 'none') {
var tabSelect = document.querySelector("[href='#".concat(details.id, "']"));
if (tabSelect) {
tabSelect.click();
}
}
});
}
};
})(Drupal, drupalSettings, jQuery, JSON, once, Sortable, tabbable);

13
core/modules/system/tests/modules/form_test/src/Form/FormTestGroupVerticalTabsForm.php
View File

@ -44,9 +44,22 @@ class FormTestGroupVerticalTabsForm extends FormBase {
'#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}
*/

29
core/tests/Drupal/FunctionalJavascriptTests/Core/Form/FormGroupingElementsTest.php
View File

@ -135,4 +135,33 @@ class FormGroupingElementsTest extends WebDriverTestBase {
$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'));
}
}