- Issue created by @aaron.ferris
- 🇳🇿New Zealand quietone
Changes are made on on 11.x (our main development branch) first, and are then back ported as needed according to the Core change policies → . Also, Drupal 10.4 is in maintenance mode.
Im noticing what feels like an odd behaviour when using vertical tabs (via field group). It only happens in a particular setup, but given this behaviour is coming from the vertical-tabs.js I'm raising it here.... it's worth noting that I'm using other modules as well to achieve this setup. As below.
When adding a node with paragraphs, if a previous validation failure has occurred, the tab that contains the complaint is reopened, even if the validation issue has been resolved.
Example below.
1. Drupal 10.4
2. Latest Field Group
3. Latest Paragraphs
4. Disable html5 validation on the basic page form
5. Enable the 2 above modules
6. Add a new paragraph type, with a single plain text field - make it required
7. Add a paragraphs field to the basic page content type
8. Configure the basic page into tabs using field group. One tab for the title (which should be required) and one tab for the paragraphs
9. Add a new basic page
10. Leave the node title empty
11. Open the paragraphs tab
12. Add a new paragraph - new paragraph is added as expected
13. Try and save the node
14. The validation will fail because the node title was empty, and the title tab is opened as you'd expect
15. Now add a node title (to resolve the validation complaint)
16. Reopen the components tab again
17. Add a new paragraph
18. On AJAX complete, the title tab is reopened with the title field showing a validation complaint even though its been resolved
As far as I can tell this is what's reopening the tab
// 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();
}
}
});
},
};Unsure at this point whether this issue can be resolved in the field group module given the JS that fires this behaviour is in the vertical tabs js from Core.
Im not a UX expert but to me the title tab shouldn't have been reopened because the validation complaint has been resolved. It also feels odd that it would open this tab at all on AJAX complete, given I haven't tried to resave the node yet.
Active
10.4 ✨
other
Changes are made on on 11.x (our main development branch) first, and are then back ported as needed according to the Core change policies → . Also, Drupal 10.4 is in maintenance mode.