Get tab name onclick

[LefterisKoumis]

Using the tabs and wondering of how to capture the title of the tab when it's clicked on.

Tried:

 document.querySelector("calcite-tab-title").addEventListener("click", handleActionBarClick1);

[BenElan]

Calcite Components have custom events which you can find on their doc page. For example, here is the event for `calcite-tab-title`:

https://developers.arcgis.com/calcite-design-system/components/tab-title/#component-api-events

calcite-tab-nav also has an event:

https://developers.arcgis.com/calcite-design-system/components/tab-nav/#component-api-events-calcite...

[LefterisKoumis]

Thanks.

I setup id: 

<calcite-tab-nav slot="tab-nav" id="thetabs">
 
//then wanted to capture the event:
const controlTabs = document.getElementById("thetabs")
  controlTabs.addEventListener("calciteTabChange", async (event) => { console.log(event.target.value) });

When you click the first tab it works. but when you click the other tabs it return undefined. 

[BenElan]

The event's callback function doesn't need to be async in your code snippet. Also, the tab info is event.detail.tab. Here is the code:

document.addEventListener("calciteTabChange", (event) => console.log(event.detail.tab));

[BenElan · Accepted solution]

Here is a codepen: https://codepen.io/benesri/pen/wvprVQd?editors=1010

[Wittawat]

@BenElan could you please share the code with calcite v1.0.7? It seems like the event.detail.tab did not work with new version.

[LefterisKoumis]

Since version 1.0.3 the event.detail.tab is depreciated. 

See: 

https://github.com/Esri/calcite-components/blob/master/CHANGELOG.md

use instead:

event.target.selectedTitle

[Wittawat]

Thank you for your reply. I've tried the event.target.selectedTitle but I have received an incorrect tab name.

Please kindly see the example here: https://codepen.io/aonwittawat/pen/vYzZozd 

[LefterisKoumis]

There are current issues with the selectedTitle as acknowledged by ESRI.

Please use this instead.

https://codepen.io/lkoumis1/pen/GRXEwyN?editors=1111