topic Re: Recommended Way to Programatically Toggle Active calcite-tab in Calcite Design System Questions

Recommended Way to Programatically Toggle Active calcite-tab

Justin_Greco — Thu, 13 May 2021 17:18:25 GMT

What is the recommended method for switching the active calcite-tab with code? I was thinking it would just be adding the active attribute on the new tab and remove it from the old tab. This does work, but the issue I have is that the tab indicator is not changing as well. I have tried dispatching a click event and a touch event on the tab title, but that doesn’t seem to work on touch devices.

Re: Recommended Way to Programatically Toggle Active calcite-tab

paulcpederson — Wed, 19 May 2021 15:48:26 GMT

Hey Justin,

I believe you're meant to update the calcite-tab-title component. You should be able to remove the attribute from the old title and set it on the new one: https://codepen.io/paulcp/pen/WNpoJdW?editors=1010

The correct tab should show after you update the title. Hope that helps!

Re: Recommended Way to Programatically Toggle Active calcite-tab

Justin_Greco — Thu, 20 May 2021 13:37:41 GMT

Thanks for the code Paul. However it seems to only work immediately after it loads. I am trying to toggle the tabs when the user performs an action. Try clicking the Toggle button at the top:

https://codepen.io/justingreco/pen/xxqgERZ

Re: Recommended Way to Programatically Toggle Active calcite-tab

Justin_Greco — Thu, 20 May 2021 13:43:04 GMT

Here is my hack to get around it. I am dispatching a keydown event with the ENTER key. This works on both touch and non-touch devices, I'm not sure why just a click event doesn't work on touch devices.

https://codepen.io/justingreco/pen/wvJgzJX?editors=1111

Re: Recommended Way to Programatically Toggle Active calcite-tab

paulcpederson — Thu, 20 May 2021 19:06:07 GMT

You're totally right, I've opened an issue for this, I think it's just a bug.

https://github.com/Esri/calcite-components/issues/2185