Skeleton V3 Navigation.Rail/Tile selection not updated correctly #3197

[ktarmyshov]

Current Behavior

Since I cannot reopen, I'm submitting again,
Function runs on each tap. You can close it again, if you insist it's a feature.

Expected Behavior

Skeleton V3 Navigation.Rail/Tile selection not updated correctly #3197

Steps To Reproduce

No response

Link to Reproduction / Stackblitz

No response

More Information

No response

[ktarmyshov]

Manual span with background

<script lang="ts">
	import { Navigation } from '@skeletonlabs/skeleton-svelte';
	// Icons
	import IconFolder from 'lucide-svelte/icons/folder';
	import IconImage from 'lucide-svelte/icons/image';
	import IconMusic from 'lucide-svelte/icons/music';
	import IconSettings from 'lucide-svelte/icons/settings';
	import IconVideo from 'lucide-svelte/icons/video';

	let hrefExample = '#';

	import { page } from '$app/state';
	import '../app.css';
	let { children } = $props();

	function isRouteSelected(route: string) {
		console.log('I ran', page.url.pathname, route);
		return page.url.pathname?.startsWith(route);
	}
</script>

<a href="/route1" class="anchor">App Bar Main Route</a>
<div class="card grid h-[640px] w-full grid-cols-[auto_1fr] border-[1px] border-surface-100-900">
	<!-- Component -->
	<Navigation.Rail>
		{#snippet tiles()}
			<span class={isRouteSelected('/route1') ? 'bg-primary-500' : ''}> active </span>
			<Navigation.Tile id="0" label="Files" href={'/route1'} selected={isRouteSelected('/route1')}>
				<IconFolder />
			</Navigation.Tile>
			<span class={isRouteSelected('/route2') ? 'bg-primary-500' : ''}> active </span>
			<Navigation.Tile id="1" label="Images" href={'/route2'} selected={isRouteSelected('/route2')}>
				<IconImage />
			</Navigation.Tile>
			<span class={isRouteSelected('/route3') ? 'bg-primary-500' : ''}> active </span>
			<Navigation.Tile id="2" label="Music" href={'/route3'} selected={isRouteSelected('/route3')}>
				<IconMusic />
			</Navigation.Tile>
			<span class={isRouteSelected('/route4') ? 'bg-primary-500' : ''}> active </span>
			<Navigation.Tile id="3" label="Videos" href={'/route4'} selected={isRouteSelected('/route4')}>
				<IconVideo />
			</Navigation.Tile>
		{/snippet}
		{#snippet footer()}
			<Navigation.Tile labelExpanded="Settings" href="/settings" title="settings"
				><IconSettings /></Navigation.Tile
			>
		{/snippet}
	</Navigation.Rail>
	<!-- Content -->
	<div class="flex items-center justify-center">
		<p class="opacity-20">(Content)</p>
	</div>
</div>

{@render children()}

[endigo9740]

As I stated before, this is a different bug than originally reported in #3197, so it will be treated as such can can remain.

The original bug was in regards to why selection state didn't change when navigating outside the component.

This is in regards to why the function for selected is running multiple times.

The first issue was addressed in the prior ticket, we'll address the second here.

[phamduylong]

This is broken due to ctx not handling external navigation (so navigation happening outside of the component). The value property of ctx doesn't change when navigation was done outside the component.

@ktarmyshov A temporary fix for this could just be removing the Navigation.Tile id completely for each of them. Something like this should work:

<Navigation.Rail>
{#snippet tiles()}
  <Navigation.Tile label="Files" href={'/route1'} selected={page.url.pathname.startsWith('/route1')}>
    <IconFolder />
  </Navigation.Tile>
  <Navigation.Tile label="Images" href={'/route2'} selected={page.url.pathname.startsWith('/route2')}>
    <IconImage />
  </Navigation.Tile>
  <Navigation.Tile label="Music" href={'/route3'} selected={page.url.pathname.startsWith('/route3')}>
    <IconMusic />
  </Navigation.Tile>
  <Navigation.Tile label="Videos" href={'/route4'} selected={page.url.pathname.startsWith('/route4')}>
    <IconVideo />
  </Navigation.Tile>
{/snippet}
</Navigation.Rail>