WIP 2

Author: Keavon

frontend/src/components/floating-menus/MenuList.svelte

@@ -1,7 +1,7 @@
 <svelte:options accessors={true} />
 
 <script lang="ts">
-	import { createEventDispatcher, tick } from "svelte";
+	import { createEventDispatcher, tick, onDestroy, onMount } from "svelte";
 
 	import type { MenuListEntry } from "@graphite/wasm-communication/messages";
 
@@ -52,6 +52,13 @@
 	$: virtualScrollingEndIndex = filteredEntries.length === 0 ? 0 : Math.min(filteredEntries[0].length, virtualScrollingStartIndex + 1 + 400 / virtualScrollingEntryHeight);
 	$: startIndex = virtualScrollingEntryHeight ? virtualScrollingStartIndex : 0;
 
+	onMount(() => {
+		if (open) addEventListener("keydown", keydown);
+	});
+	onDestroy(() => {
+		removeEventListener("keydown", keydown);
+	});
+
 	// Required to keep the highlighted item centered and to find a new highlighted item if necessary
 	async function watchHighlightedWithSearch(filteredEntries: MenuListEntry[][], open: boolean) {
 		if (highlighted && open) {
@@ -99,6 +106,9 @@
 	}
 
 	function watchOpen(open: boolean) {
+		if (open) addEventListener("keydown", keydown);
+		else removeEventListener("keydown", keydown);
+
 		highlighted = activeEntry;
 		dispatch("open", open);
 
@@ -197,9 +207,7 @@
 
 	/// Handles keyboard navigation for the menu.
 	// Returns a boolean indicating whether the entire menu stack should be dismissed.
-	export function keydown(e: KeyboardEvent, submenu: boolean): boolean {
-		console.log("Burp");
-
+	export function keydown(e: KeyboardEvent, submenu = false): boolean {
 		// Interactive menus should keep the active entry the same as the highlighted one
 		if (interactive) highlighted = activeEntry;
 

frontend/src/components/widgets/buttons/TextButton.svelte

@@ -65,7 +65,6 @@
 		tabindex={disabled ? -1 : 0}
 		data-floating-menu-spawner={menuListChildrenExists ? "" : "no-hover-transfer"}
 		on:click={onClick}
-		on:keydown={(e) => self?.keydown(e, false)}
 	>
 		{#if icon}
 			<IconLabel {icon} />

frontend/src/components/widgets/inputs/DropdownInput.svelte

@@ -68,7 +68,6 @@
 		{tooltip}
 		on:click={() => !disabled && (open = true)}
 		on:blur={unFocusDropdownBox}
-		on:keydown={(e) => menuList?.keydown(e, false)}
 		tabindex={disabled ? -1 : 0}
 		data-floating-menu-spawner
 	>

frontend/src/components/widgets/inputs/FontInput.svelte

@@ -104,16 +104,7 @@
 
 <!-- TODO: Combine this widget into the DropdownInput widget -->
 <LayoutRow class="font-input">
-	<LayoutRow
-		class="dropdown-box"
-		classes={{ disabled }}
-		styles={{ "min-width": `${minWidth}px` }}
-		{tooltip}
-		tabindex={disabled ? -1 : 0}
-		on:click={toggleOpen}
-		on:keydown={(e) => menuList?.keydown(e, false)}
-		data-floating-menu-spawner
-	>
+	<LayoutRow class="dropdown-box" classes={{ disabled }} styles={{ "min-width": `${minWidth}px` }} {tooltip} tabindex={disabled ? -1 : 0} on:click={toggleOpen} data-floating-menu-spawner>
 		<TextLabel class="dropdown-label">{activeEntry?.value || ""}</TextLabel>
 		<IconLabel class="dropdown-arrow" icon="DropdownArrow" />
 	</LayoutRow>