bestguy / sveltestrap

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

Dropdown - setActiveFromChild is not working #502

Open Swoopy opened 1 year ago

Swoopy commented 1 year ago

Dropdown - setActiveFromChild is not working with latest Sveltekit. The 'ACTIVE' class is initialized on mount (based on child element .active classes) for once, but doesn't refresh when child elements classes change later. It seems the child-element-observer doesent trigger on dom change. I've used the same code as on the site: Sveltestrap - Dropdown (setActiveFromChild)

<Dropdown nav setActiveFromChild>
  <DropdownToggle nav caret>{nav.name}</DropdownToggle>
    <DropdownMenu class="shadow">
      {#each nav.submenu as submenu}
        <DropdownItem class="text-uppercase" href={submenu.href} active={$page.url.pathname === submenu.href}> 
          {submenu.name}
       </DropdownItem>
     {/each}
  </DropdownMenu>
</Dropdown>
dysfunc commented 1 year ago

Thank you for opening an issue @Swoopy. Did you define the styles for the dropdown active class?

See this REPL

:global(.dropdown.active) {
  background-color: red;
}