Question: how to update the TabContent active tab programmatically?

[jcalfee]

I see the TabContent is reactive and using a context but the active boolean seems to have been missed. Should the active boolean be reactive?

TabPane

onMount(() => {
if (active) setActiveTab(tabId);
});

let tabOpen = active; //??? $: if ($activeTabId !== undefined) tabOpen = $activeTabId === tabId; $: classes = classnames('tab-pane', className, { active: tabOpen, show: tabOpen }); ...

How to update the active tab without clicking?  Changing the active property is not working.  Shouldn't the TabPane update the activeTabId in the context on any `active` that changes to true?

[jcalfee]

Here is a work-around that re-renders the TabContent only when the exported changeTab is called with a tab name that is not already showing:

<script>
  export let tab = 'one'

  let activeTab = tab
  let updateTab = 1

  export function changeTab(tabId) {
    if(activeTab !== tabId) {
      activeTab = tabId

      // https://github.com/bestguy/sveltestrap/issues/485
      updateTab++
    }
  }

  function tabChanged(tabId) {
    activeTab = tabId.detail
  }
</script>

{#key updateTab}
  <TabContent on:tab={tabChanged}>
    <TabPane tabId="join" tab="Join" active={activeTab === 'one'}>
      // ...
    </TabPane>
    // ...
  </TabContent>
{/key}

[1u0n]

Agree the active attribute should be reactive but it's currently not.

The {#key} approach crashed my app, so in order to programatically change the acive tab I had to resort to finding the <a> element inside the tab I want to move to and .click() on it. It works as expected.

[nikolas]

I ran into this issue as well. It's related to #319