Recommended Way to Programatically Toggle Active calcite-tab

Question

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 · Answer

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

Justin_Greco · Answer

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 · Answer

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