sveltestrap icon indicating copy to clipboard operation
sveltestrap copied to clipboard

Can't activate a Tab programmatically

Open MDesharnaisX opened this issue 2 years ago • 1 comments

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>

MDesharnaisX avatar Feb 21 '23 10:02 MDesharnaisX

Yeah, this is documented here:

  • https://github.com/bestguy/sveltestrap/issues/485
  • https://github.com/bestguy/sveltestrap/issues/319

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

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

nikolas avatar Feb 22 '23 17:02 nikolas