Deprecation: #109171 - Bootstrap tab events 

See forge#109171

Description 

Bootstrap's tab JavaScript has been replaced with a custom implementation tailored to TYPO3. 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 that points 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 will be removed.

Affected installations 

All extensions that listen 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!