The page is reloaded and the location tab is opened.
The page reloads and the first tab is opened.
Joomla 4
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.
Labels |
Added:
No Code Attached Yet
|
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?
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.
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.
Since I was the one that removed that script let me explain the reasons for that action:
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
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.
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:
Status | New | ⇒ | Closed |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2022-11-23 10:17:07 |
Closed_By | ⇒ | laoneo |
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.