---
title: "Deprecation: #109171 - Bootstrap tab events"
manual: "TYPO3 Core Changelog"
version: "main"
permalink: "https://docs.typo3.org/permalink/changelog:deprecation-109171-1741254000"
source: "Changelog/14.2/Deprecation-109171-BootstrapTabEvents.rst"
typo3-version: "14.2"
typo3-major: 14
type: "deprecation"
issue: 109171
forge: "https://forge.typo3.org/issues/109171"
tags: ["Backend", "JavaScript", "NotScanned", "ext:backend"]
rendered: "2026-09-20T18:31:11+00:00"
---

# Deprecation: #109171 - Bootstrap tab events {#deprecation-109171-1741254000}

See [forge#109171](https://forge.typo3.org/issues/109171)

## Description {#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 {#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 {#affected-installations}

All extensions that listen to `show.bs.tab` or `shown.bs.tab` events
on tab buttons are affected.

## Migration {#migration}

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

Before:

```js
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
  );
});
```

After:

```js
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);
});
```