-
-
Notifications
You must be signed in to change notification settings - Fork 373
Description
Current Behavior
When using anchors in the <Tabs> component, the entire page reloads on navigation.
On hover, the SvelteKit invalidation works as intended, and there is a moment after the navigation where it seems to work, but then the entire page reloads.
Expected Behavior
The app should not have to reload everything, just the necessary invalidated load functions.
Steps To Reproduce
Bind the value of <Tabs> to page.url.pathname, and then have anchors inside <Tabs.Trigger>, and have the body of the children of the +layout.svelte file act as the <Tabs.Content>, like such:
<Tabs value={page.url.pathname}>
<Tabs.List>
<Tabs.Trigger value="/foo">
{#snippet element(attributes: Record<string, unknown>)}
<a href="/foo" {...attributes}> Foo </a>
{/snippet}
</Tabs.Trigger>
<!-- ... -->
</Tabs.List>
{@render children?.()}
</Tabs>Then, navigate the tabs, and observe that everything around the tabs also reload.
Stackblitz or Reproduction URL
https://www.sveltelab.dev/?provider=github&owner=tinggaard&repo=skeleton-tabs-navigate
Environment Information
System:
OS: Linux 6.17 Arch Linux
CPU: (16) x64 AMD Ryzen 7 8845HS w/ Radeon 780M Graphics
Memory: 7.25 GB / 27.15 GB
Container: Yes
Shell: 5.9 - /bin/zsh
Binaries:
Node: 25.2.1 - /usr/bin/node
npm: 11.6.4 - /usr/bin/npm
pnpm: 10.23.0 - /usr/bin/pnpm
Browsers:
Brave Browser: 139.1.81.137
Chromium: 142.0.7444.175
Firefox: 145.0.2
Firefox Developer Edition: 145.0.2
npmPackages:
@skeletonlabs/skeleton: ^4.7.1 => 4.7.1
@skeletonlabs/skeleton-svelte: ^4.7.1 => 4.7.1
More Information
I know that using tabs for navigation is an anti-pattern, but this used to work in Skeleton v3, and I would really like to have this available when we migrate to v4, until we find a better solution in the team.