bestguy / sveltestrap

Bootstrap 4 & 5 components for Svelte
https://sveltestrap.js.org
MIT License
1.31k stars 183 forks source link

Can't activate a Tab programmatically #532

Open MDesharnaisX opened 1 year ago

MDesharnaisX commented 1 year ago

When using Tabs and trying to change the active one programmatically, nothing happens. I can't change the active one at load time but not afterwards (that excludes onMount). Example

  import "bootstrap/dist/css/bootstrap.min.css";
  import { TabContent, TabPane, Button } from "sveltestrap";

  let active = 1;

  function increase() {
    active = (active + 1) % 3;
  }
</script>

<style>
</style>
<Button on:click={increase}>Another tab</Button>
{active}
<TabContent>
  <TabPane tabId="alpha" tab="Alpha" active={active==0}>
    <h2>Alpha</h2>
    <img
      alt="Alpha Flight"
      src="https://upload.wikimedia.org/wikipedia/en/4/49/Alpha_Flight_cast_picture_%28John_Byrne_era%29.gif"
    />
  </TabPane>
  <TabPane tabId="bravo" tab="Bravo" active={active==1}>
    <h2>Bravo</h2>
    <img
      alt="Johnny Bravo"
      src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Johnny_Bravo_series_logo.png/320px-Johnny_Bravo_series_logo.png"
    />
  </TabPane>
  <TabPane tabId="charlie" tab="Charlie" active={active==2}>
    <h2>Charlie</h2>
    <img
      alt="Charlie Brown"
      src="https://upload.wikimedia.org/wikipedia/en/2/22/Charlie_Brown.png"
    />
  </TabPane>
</TabContent>
nikolas commented 1 year ago

Yeah, this is documented here:

I've been able to work around the issue with something like this:

         const tabEl = querySelectorIncludesText(                  
             '.polls-modal .nav-tabs a', 'Responses');                   
         tabEl.click();