No Code Attached Yet
avatar Ruud68
Ruud68
11 Feb 2025

Steps to reproduce the issue

in a back-end view ./administrator/components/com_content/tmpl/articles/default.php create an accordion with the joomla core htmlhelpers, add the following lines before the line starting with <form action=

<?php echo HTMLHelper::_('bootstrap.startAccordion', 'accordion-test'); ?>
<?php echo HTMLHelper::_('bootstrap.addSlide', 'accordion-test', Text::_('TEST'), 'test-collapse', 'test'); ?>
   <h1>TEST-ACCORDION</h1>
<?php echo HTMLHelper::_('bootstrap.endSlide'); ?>
<?php echo HTMLHelper::_('bootstrap.endAccordion'); ?>

When you now go to the view articles, you see the closed accordion.
Click on the accordion to open it.
The accordion opens.

now click on the topbar menu 'User Menu'

The accordion now closes although it should stay open.

The issue here is that the template.js selects all elements with [data-bs-toggle="collapse"]

and the closes these.

This is not correct! it should only close dropdowns (used in the menus) and no other elements.

Expected result

accordion should stay open

Actual result

accordion (and if multiple set on the page, accordions) are closed

System information (as much as possible)

J5.2 (latest)

Additional comments

avatar Ruud68 Ruud68 - open - 11 Feb 2025
avatar Ruud68 Ruud68 - change - 11 Feb 2025
Labels Removed: ?
avatar joomla-cms-bot joomla-cms-bot - change - 11 Feb 2025
Labels Added: No Code Attached Yet
avatar joomla-cms-bot joomla-cms-bot - labeled - 11 Feb 2025
avatar richard67
richard67 - comment - 11 Feb 2025

Duplicate report to issue #44140 ? If yes, please test if this PR helps: #44221 . It will need to use the package created by Drone for testing, or if you have a development environment run npm ciafter applying the changes from the PR.

avatar Ruud68
Ruud68 - comment - 11 Feb 2025

hi @richard67 thanks for following up, appreciate it.
unfortunately this is not related. The PR you linked is for the front-end template, not the back-end (the metismenu.js it is not used in the back-end).
As pointed out, this is an issue in atum template.js

avatar richard67
richard67 - comment - 11 Feb 2025

As pointed out, this is an issue in atum template.js

@Ruud68 Ah, sorry, seems I did read too fast.

avatar brianteeman
brianteeman - comment - 11 Feb 2025

The relevant js cane be found at

/**
* Close any open data-bs-toggle="collapse" when opening a data-bs-toggle="dropdown"
*
* @since 4.4
*/
document.querySelectorAll('[data-bs-toggle="dropdown"]').forEach((button) => {
button.addEventListener('click', () => {
document.querySelectorAll('[data-bs-toggle="collapse"]').forEach((cb) => {
const target = document.querySelector(cb.getAttribute('data-bs-target'));
if (target.contains(button)) {
return;
}
const collapseMenu = bootstrap.Collapse.getInstance(target) || new bootstrap.Collapse(target, {
toggle: false,
});
collapseMenu.hide();
});
});

avatar brianteeman
brianteeman - comment - 11 Feb 2025

Please test #44858

avatar richard67 richard67 - change - 11 Feb 2025
Status New Closed
Closed_Date 0000-00-00 00:00:00 2025-02-11 14:43:11
Closed_By richard67
avatar richard67 richard67 - close - 11 Feb 2025
avatar richard67
richard67 - comment - 11 Feb 2025

Closing as having a pull request. Please test #44858 . Thanks in advance.

Add a Comment

Login with GitHub to post a comment