[SalesForce] Lightning Web Components and Change the Focused Tab in a Tabset with Javascript

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

Best Answer

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>
Related Topic