topic Re: Get tab name onclick in Calcite Design System Questions

Get tab name onclick

LefterisKoumis — Fri, 01 Apr 2022 00:39:28 GMT

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

Re: Get tab name onclick

BenElan — Fri, 01 Apr 2022 00:48:27 GMT

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-calciteTabChange

Re: Get tab name onclick

LefterisKoumis — Fri, 01 Apr 2022 16:17:17 GMT

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.

Re: Get tab name onclick

BenElan — Fri, 01 Apr 2022 18:00:37 GMT

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

Re: Get tab name onclick

BenElan — Fri, 01 Apr 2022 17:42:26 GMT

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

Re: Get tab name onclick

Wittawat — Sun, 05 Mar 2023 15:02:08 GMT

@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.

Re: Get tab name onclick

LefterisKoumis — Sun, 05 Mar 2023 19:22:21 GMT

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

Re: Get tab name onclick

Wittawat — Mon, 06 Mar 2023 05:57:56 GMT

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

Re: Get tab name onclick

LefterisKoumis — Tue, 07 Mar 2023 21:25:51 GMT

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

Please use this instead.

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