Deprecation: #109171 - Bootstrap tab events 

See forge#109171

Description 

Bootstrap's tab JavaScript has been replaced with a custom implementation tailored for TYPO3 needs. The Bootstrap tab events show.bs.tab and shown.bs.tab are now deprecated and will be removed in TYPO3 v15.

The following new custom events are available as replacements:

  • typo3:tab:show — dispatched before a tab switch, cancelable via event.preventDefault()
  • typo3:tab:shown — dispatched after a tab switch

Both events bubble from the tab button and carry a detail.relatedTarget property pointing to the previously active tab button (or null).

Impact 

Listening for show.bs.tab or shown.bs.tab events will continue to work in TYPO3 v14 but will stop working in TYPO3 v15 when the backward compatibility events are removed.

Affected installations 

All extensions listening to show.bs.tab or shown.bs.tab events on tab buttons are affected.

Migration 

Replace Bootstrap tab event listeners with the new TYPO3 tab events.

Before:

document.addEventListener('show.bs.tab', (e) => {
  console.log('Tab is about to show', e.target, e.detail.relatedTarget);
});

document.addEventListener('shown.bs.tab', (e) => {
  console.log('Tab was shown', e.target, e.detail.relatedTarget);
});
Copied!

After:

document.addEventListener('typo3:tab:show', (e) => {
  console.log('Tab is about to show', e.target, e.detail.relatedTarget);
});

document.addEventListener('typo3:tab:shown', (e) => {
  console.log('Tab was shown', e.target, e.detail.relatedTarget);
});
Copied!