No Code Attached Yet
avatar laoneo
laoneo
21 Nov 2022

Steps to reproduce the issue

  • Install DPCalendar Free
  • Create a location in the component
  • Open the event form in the back end
  • Go to the location tab
  • Select a location

Expected result

The page is reloaded and the location tab is opened.

Actual result

The page reloads and the first tab is opened.

System information (as much as possible)

Joomla 4

Additional comments

I'v reported the issue with DPCalendar as it can't be reproduced with core, because there only the custom element tabs are used.

So when an extension dev is using the bootstrap tabs like:

<?php echo HTMLHelper::_('bootstrap.startTabSet', 'com-dpcalendar-form-', ['active' => 'general']); ?>
<?php echo HTMLHelper::_('bootstrap.addTab', 'com-dpcalendar-form-', 'content'); ?>
<?php echo HTMLHelper::_('bootstrap.endTab'); ?>
<?php echo HTMLHelper::_('bootstrap.addTab', 'com-dpcalendar-form-', 'location'); ?>
<?php echo HTMLHelper::_('bootstrap.endTab'); ?>
<?php echo HTMLHelper::_('bootstrap.endTabSet'); ?>

Then the last opened tab is not opened on page refresh. This was handled before with HTMLHelper::_('behavior.tabstate');, but on Joomla 4, the tab state is only supported with the custom element tabs.

pinging here @dgrammatiko or @Fedik as it would be nice to get a solution for extensions which do want to use the bootstrap tabs for compatibility reasons.

avatar laoneo laoneo - open - 21 Nov 2022
avatar joomla-cms-bot joomla-cms-bot - change - 21 Nov 2022
Labels Added: No Code Attached Yet
avatar joomla-cms-bot joomla-cms-bot - labeled - 21 Nov 2022
avatar Fedik
Fedik - comment - 21 Nov 2022

As far as I remember Bootstrap does not support a "state" for their tabs.

Can be a feature request, but I doubt that it will get much attention.

avatar crystalenka
crystalenka - comment - 22 Nov 2022

Bootstrap doesn't support that natively, sadly. https://getbootstrap.com/docs/5.0/components/navs-tabs/#javascript-behavior

I am not sure we would want to implement our own solution for that in core on top of bootstrap. (Maybe? Maybe not?)

But perhaps a session cookie in your extension would do the job for now?

avatar joomdonation
joomdonation - comment - 22 Nov 2022

In my extensions, I just use a simple if else command like below:

if ($isJoomla4)
{
	$tabApiPrefix = 'uitab.';
}
else
{
	$tabApiPrefix = 'bootstrap.';
}

Then replace bootstrap. in original code with $tabApiPrefix variable, works well for me.

avatar laoneo
laoneo - comment - 22 Nov 2022

I opened the issue because in Joomla 3 it works. So I was wondering why it doesn't in 4. Even the tab state script is there https://github.com/joomla/joomla-cms/blob/4.2-dev/build/media_source/legacy/js/tabs-state.es5.js, but it doesn't work when I load it the same way as https://github.com/joomla/joomla-cms/blob/3.10-dev/libraries/cms/html/behavior.php#L895. So for me it looks like a compatibility bug.

avatar dgrammatiko
dgrammatiko - comment - 22 Nov 2022

Since I was the one that removed that script let me explain the reasons for that action:

  • The script was jQuery and nobody wanted to vanillify that code
  • The code was extremely inefficient. It was using XPATH for traversing the DOM and the whole logic was happening AFTER the normal BS logic
  • The code was also loading a polyfill (total size, jQ+BS+tabastate ~300kb, the new tabs/accordion with the tab state logic is less than 10Kb)
  • The code exists in the legacy folder so if someone wants to use it all it needs is 3 lines:
HTMLHelper::_('behavior.jquery');
HTMLHelper::_('bootstrap.tabs');
HTMLHelper::_('script', 'legacy/tab-state.es5.js', ['version' => 'auto', 'relative' => true], []);

So, should the project resurrect the old HTMLHelper behaviour?
I'll vote against it as it's already possible with 3 lines of code, but as the folder that holds that script denotes it's legacy and probably nobody should use it.

My 2c

avatar laoneo
laoneo - comment - 22 Nov 2022

I tried

HTMLHelper::_('behavior.jquery');
HTMLHelper::_('bootstrap.tabs');
HTMLHelper::_('script', 'legacy/tab-state.es5.js', ['version' => 'auto', 'relative' => true], []);

and it doesn't work. That's why I opened the issue. Not to revert the changes and load the bloat, but because it is not working the expected way with the legacy code.

avatar dgrammatiko
dgrammatiko - comment - 22 Nov 2022

and it doesn't work.

Ok, so when the project decided to use BS v5 should have updated that script as well. It should be a simple search/replace IIRC:
Search data-toggle
Replace: data-bs-toggle
Eg:

var alltabs = $("a[data-toggle='tab']");

avatar laoneo laoneo - change - 23 Nov 2022
Status New Closed
Closed_Date 0000-00-00 00:00:00 2022-11-23 10:17:07
Closed_By laoneo
avatar laoneo laoneo - close - 23 Nov 2022

Add a Comment

Login with GitHub to post a comment