Recommended Way to Programatically Toggle Active calcite-tab

[Justin_Greco]

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.

[paulcpederson]

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!

[Justin_Greco]

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

[Justin_Greco]

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

[paulcpederson]

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