Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can't activate a Tab programmatically #532

Open
MDesharnaisX opened this issue Feb 21, 2023 · 1 comment
Open

Can't activate a Tab programmatically #532

MDesharnaisX opened this issue Feb 21, 2023 · 1 comment

Comments

@MDesharnaisX
Copy link

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
Copy link

nikolas commented Feb 22, 2023

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();

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants