9

In Lightning Web Components (lwc), not Aura, a lightning-tabset has an active-value-tab attribute. How do I change the tab in focus.

In a two tab (lightning-tab) based lightning-tabset, the main (default) tab has a list of tiles. The second tab contains the details of the selected tile.

I want the second tab to refresh with the data of the selected tile and become focused when the tile is clicked.

At the moment you cannot create a component dynamically with lwc so I want to reuse an existing tab.

This lightning-tabset has a lightning-tab child component (containing a list). This child component has a child component (tile) that generates a CustomEvent when selected.

When the custom event is passed up through the parents to the lwc that contains the lightning-tabset. How do I get the correct lightning-tab to open (set focus).

Do I use querySelector and setAttribute('active-tab-value' ...) or some other means?

Thanks

4 Answers 4

10

It is very easy to put focus on specific tab on Tabset control in LWC... here is below running snippet

import { LightningElement, track } from 'lwc';
export default class TabsetBasic extends LightningElement {
   handleClick(){
       this.template.querySelector('lightning-tabset').activeTabValue = 'Item Three';
   }
}

<template>
   <lightning-tabset variant="scoped" active-tab-value ="">
       <lightning-tab label="Item One" value="Item One">
           One Content !
       </lightning-tab>
       <lightning-tab label="Item Two" value="Item Two" title="2nd tab extended title">
           Two Content !
       </lightning-tab>
       <lightning-tab label="Item Three" value="Item Three">
           Three Content !
       </lightning-tab>
   </lightning-tabset>
    <lightning-button onclick={handleClick} label="Click Me"></lightning-button>
</template>
1

SetAttribute is meant for DOM Element Attributes. Attributes of web components are directly accessible on the element (when decorated via @api).

So when you want to change the tab you can use

this.template.querySelector('lightning-tabset').activeTabValue = '<id_value_of_your_tab';
0

All tabset components have an attribute called active-tab-value. Simply create a class attribute and bind it to it. Note, ensure your tab have its value attribute populated first though because it's the same value you should use.

0

If you're trying to give focus to a tab you're creating on the fly, you'll need to put code into renderedCallback() to address this. For example:

renderedCallback() {

        if(this.individualTabValue !== undefined) {
            this.template.querySelector('.mainTabset').activeTabValue = this.individualTabValue;
            this.individualTabValue = undefined;
        }
    }

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .