fix: Navigation action firing too early, refactoring selectables

src/App.svelte

@@ -64,13 +64,7 @@
 		</Router>
 
 		<Router>
-			<Route path="movies/movie/:id">
-				<DetatchedPage>
-					<Button>Button 1</Button>
-					<Button>Button 2</Button>
-					<Button on:click={() => history.back()}>Back</Button>
-				</DetatchedPage>
-			</Route>
+			<Route path="movies/movie/:id" component={MoviePage} />
 		</Router>
 	{/if}
 </Container>

src/lib/components/DetatchedPage/DetatchedPage.svelte

@@ -5,14 +5,13 @@
 <Container
 	navigationActions={{
 		left: () => {
-			console.log('Not called?');
 			history.back();
 			return false;
 		}
 	}}
 	focusOnMount
 	trapFocus
-	class="fixed inset-0"
+	class="fixed inset-0 z-20"
 >
 	<slot />
 </Container>

src/lib/pages/MoviePage.svelte

@@ -10,6 +10,7 @@
 	import VideoPlayer from '../components/VideoPlayer/VideoPlayer.svelte';
 	import { radarrApi } from '../apis/radarr/radarr-api';
 	import { useActionRequests, useRequest } from '../stores/data.store';
+	import DetatchedPage from '../components/DetatchedPage/DetatchedPage.svelte';
 
 	export let id: string;
 
@@ -33,7 +34,7 @@
 	});
 </script>
 
-<Container focusOnMount>
+<DetatchedPage>
 	<div class="h-screen flex flex-col">
 		<HeroCarousel
 			bind:index={heroIndex}
@@ -114,4 +115,4 @@
 			<VideoPlayer jellyfinId={playbackId} />
 		{/if}
 	</div>
-</Container>
+</DetatchedPage>

src/lib/selectable.ts

@@ -226,7 +226,7 @@ export class Selectable {
 		return false;
 	}
 
-	getFocusableNeighbor(direction: Direction): Selectable | undefined {
+	private giveFocus(direction: Direction, bypassActions: boolean = false): boolean {
 		const focusIndex = get(this.focusIndex);
 
 		const indexAddition = {
@@ -250,47 +250,29 @@ export class Selectable {
 		if (indexAddition !== 0) {
 			let index = focusIndex + indexAddition;
 			while (index >= 0 && index < this.children.length) {
-				if (this.children[index]?.isFocusable()) {
-					return this.children[index];
+				const children = this.children[index];
+				if (children && children.isFocusable()) {
+					children.focus();
+					return true;
 				}
 				index += indexAddition;
 			}
 		}
 
-		// if (this.navigationActions[direction]) {
-		// 	return this;
-		// } else
-		if (this.neighbors[direction]?.isFocusable()) {
-			return this.neighbors[direction];
+		// About to leave this container (=coulnd't cycle siblings)
+
+		const action = this.navigationActions[direction];
+		if (action && !bypassActions && action(this)) {
+			return true;
+		} else if (this.neighbors[direction]?.isFocusable()) {
+			this.neighbors[direction]?.focus();
+			return true;
 		} else if (!this.trapFocus) {
-			return this.parent?.getFocusableNeighbor(direction);
+			return this.parent?.giveFocus(direction, bypassActions) || false;
 		}
 
-		return undefined;
-	}
-
-	private giveFocus(direction: Direction, bypassActions: boolean = false): boolean {
-		// eslint-disable-next-line @typescript-eslint/no-this-alias
-		let selectable: Selectable | undefined = this;
-		while (selectable && !bypassActions) {
-			const action = selectable.navigationActions[direction];
-			if (action && action(this)) {
-				return true;
-			}
-			selectable = selectable.parent;
-		}
-
-		const neighbor = this.getFocusableNeighbor(direction);
-		// if (neighbor?.navigationActions?.[direction] && neighbor.navigationActions[direction]?.(this)) {
-		// 	return true;
-		// } else
-		if (neighbor) {
-			neighbor.focus();
-			return true;
-		} else {
 		return false;
 	}
-	}
 
 	static giveFocus(direction: Direction, bypassActions: boolean = false) {
 		const currentlyFocusedObject = get(Selectable.focusedObject);