Lightning Tabset tab change callback (LWC)

Question

I am looking to track when the tabs are changed using the lightning-tabset component. The aura version used to have the onselect callback, but there is no equivalent in LWC. Do I have to recreate my own version with a proper callback or is there some other method that I can use?

Answer 1

Edit: there is an example for the active event under documentation (section Add Content To Tab Programmatically):

https://developer.salesforce.com/docs/component-library/bundle/lightning-tabset/documentation

Template:

<template>
    <lightning-tabset>
        <lightning-tab label="Item One" value="1" onactive={handleActive}>
            Here's the content for Item One: {tabContent}
        </lightning-tab>
        <lightning-tab label="Item Two" value="2" onactive={handleActive}>
            Here's the content for Item Two: {tabContent}
        </lightning-tab>
    </lightning-tabset>
</template>

Controller:

import { LightningElement } from 'lwc';

export default class ActiveTabExample extends LightningElement {
    tabContent = '';

    handleActive(event) {
        const tab = event.target;
        this.tabContent = `Tab ${event.target.value} is now active`;
    }
}

Old Answer:

The Tab Component have an active Event which is fired everytime their content gets activated.

Example: https://developer.salesforce.com/docs/component-library/tools/playground/iLdDbNpDm/1/edit

Note though that it is not documentated (and i don`t know if it is just missing or by purpose). It is used though for the lazy loading example so i guess you should be fine

If that not fulfill your needs then you have to implement a custom component.