fix: Navigation action firing another action

src/lib/components/HeroCarousel/HeroCarousel.svelte

@@ -41,7 +41,7 @@
 		navigationActions={{
 			right: onNext,
 			left: onPrevious,
-			up: () => Selectable.giveFocus('left') || true
+			up: () => Selectable.giveFocus('left', true) || true
 		}}
 	/>
 	<div class="flex flex-1 z-10 p-4">

src/lib/components/HeroShowcase/HeroShowcase.svelte

@@ -1,10 +1,5 @@
 <script lang="ts">
-	import Container from '../../../Container.svelte';
-	import PageDots from './PageDots.svelte';
 	import type { ShowcaseItemProps } from './HeroShowcase';
-	import HeroBackground from '../HeroCarousel/HeroBackground.svelte';
-	import { Selectable } from '../../selectable';
-	import IconButton from '../IconButton.svelte';
 	import { ChevronRight, DotFilled } from 'radix-icons-svelte';
 	import CardPlaceholder from '../Card/CardPlaceholder.svelte';
 	import classNames from 'classnames';
@@ -15,27 +10,6 @@
 	export let items: Promise<ShowcaseItemProps[]> = Promise.resolve([]);
 
 	let showcaseIndex = 0;
-	let showcaseLength = 0;
-	$: items.then((i) => (showcaseLength = i?.length || 0));
-
-	function onNext() {
-		showcaseIndex = (showcaseIndex + 1) % showcaseLength;
-		return true;
-	}
-
-	function onPrevious() {
-		if (showcaseIndex === 0) {
-			Selectable.giveFocus('left');
-		} else {
-			showcaseIndex = (showcaseIndex - 1 + showcaseLength) % showcaseLength;
-		}
-		return true;
-	}
-
-	function onJump(index: number) {
-		showcaseIndex = index;
-		return true;
-	}
 </script>
 
 <HeroCarousel
@@ -52,14 +26,6 @@
 					<div>genres</div>
 				</div>
 			</div>
-			<div class="flex flex-col justify-end">
-				<div class="flex flex-1 justify-end items-center">
-					<IconButton on:click={onNext}>
-						<ChevronRight size={38} />
-					</IconButton>
-				</div>
-				<PageDots index={showcaseIndex} length={showcaseLength} {onJump} {onPrevious} {onNext} />
-			</div>
 		{:then items}
 			{@const item = items[showcaseIndex]}
 			{#if item}

src/lib/selectable.ts

@@ -269,10 +269,10 @@ export class Selectable {
 		return undefined;
 	}
 
-	private giveFocus(direction: Direction): boolean {
+	private giveFocus(direction: Direction, bypassActions: boolean = false): boolean {
 		// eslint-disable-next-line @typescript-eslint/no-this-alias
 		let selectable: Selectable | undefined = this;
-		while (selectable) {
+		while (selectable && !bypassActions) {
 			const action = selectable.navigationActions[direction];
 			if (action && action(this)) {
 				return true;
@@ -292,9 +292,9 @@ export class Selectable {
 		}
 	}
 
-	static giveFocus(direction: Direction) {
+	static giveFocus(direction: Direction, bypassActions: boolean = false) {
 		const currentlyFocusedObject = get(Selectable.focusedObject);
-		return currentlyFocusedObject?.giveFocus(direction);
+		return currentlyFocusedObject?.giveFocus(direction, bypassActions);
 	}
 
 	_initializeSelectable() {