2

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

2

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>
New contributor
user75953 is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
0

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';

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.