From 8b8d3f4aadd8f57690f1bd7a040176a326317d58 Mon Sep 17 00:00:00 2001
From: 0hypercube <0hypercube@gmail.com>
Date: Sun, 10 Dec 2023 18:19:58 +0000
Subject: [PATCH 1/7] Searchable font list

---
 .../components/floating-menus/MenuList.svelte | 144 +++++++++++++++---
 .../widgets/inputs/TextInput.svelte           |   5 +
 frontend/src/wasm-communication/messages.ts   |   3 -
 3 files changed, 129 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/floating-menus/MenuList.svelte b/frontend/src/components/floating-menus/MenuList.svelte
index f7cc172fc43..fa4b12c3dd0 100644
--- a/frontend/src/components/floating-menus/MenuList.svelte
+++ b/frontend/src/components/floating-menus/MenuList.svelte
@@ -1,13 +1,14 @@
 <svelte:options accessors={true} />
 
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
+	import { createEventDispatcher, tick } from "svelte";
 
 	import type { MenuListEntry } from "@graphite/wasm-communication/messages";
 
 	import FloatingMenu, { type MenuDirection } from "@graphite/components/layout/FloatingMenu.svelte";
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import TextInput from "@graphite/components/widgets/inputs/TextInput.svelte";
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 	import Separator from "@graphite/components/widgets/labels/Separator.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
@@ -29,21 +30,73 @@
 	export let virtualScrollingEntryHeight = 0;
 	export let tooltip: string | undefined = undefined;
 
+	// Keep the child references outside of the entries array so as to avoid infinite recursion.
+	let childReferences: (typeof self)[][] = [];
+	let search: string | undefined;
+	let focus: () => void | undefined;
+	let searchElement: () => HTMLInputElement | HTMLTextAreaElement | undefined;
+
 	let highlighted = activeEntry as MenuListEntry | undefined;
 	let virtualScrollingEntriesStart = 0;
 
 	// Called only when `open` is changed from outside this component
 	$: watchOpen(open);
-	$: watchRemeasureWidth(entries, drawIcon);
+	$: filteredEntries = entries.map((section) => section.filter(inSearch(search)));
+	$: watchRemeasureWidth(filteredEntries, drawIcon);
 
-	$: virtualScrollingTotalHeight = entries.length === 0 ? 0 : entries[0].length * virtualScrollingEntryHeight;
+	$: virtualScrollingTotalHeight = filteredEntries.length === 0 ? 0 : filteredEntries[0].length * virtualScrollingEntryHeight;
 	$: virtualScrollingStartIndex = Math.floor(virtualScrollingEntriesStart / virtualScrollingEntryHeight) || 0;
-	$: virtualScrollingEndIndex = entries.length === 0 ? 0 : Math.min(entries[0].length, virtualScrollingStartIndex + 1 + 400 / virtualScrollingEntryHeight);
+	$: virtualScrollingEndIndex = filteredEntries.length === 0 ? 0 : Math.min(filteredEntries[0].length, virtualScrollingStartIndex + 1 + 400 / virtualScrollingEntryHeight);
 	$: startIndex = virtualScrollingEntryHeight ? virtualScrollingStartIndex : 0;
 
+	function expandChildReferences(entries: MenuListEntry[][]) {
+		entries.forEach((_, index) => {
+			if (!childReferences[index]) childReferences[index] = [];
+		});
+	}
+	$: expandChildReferences(entries);
+
+	async function startSearch(event: KeyboardEvent) {
+		if (search !== undefined || event.key.length !== 1) return;
+		// Stop shortcuts being activated
+		event.stopPropagation();
+		event.preventDefault();
+		// Open the sarch bar
+		search = "";
+		// Must wait until the dom elements have been created before focus
+		await tick();
+		focus();
+		// Forward the input
+		search = event.key;
+
+		// Allow arrow key navigation whilst in the search box
+		let element = searchElement();
+		if (element) {
+			element.onkeydown = (event) => {
+				if (["Enter", "ArrowUp", "ArrowDown"].includes(event.key)) keydown(event, false);
+			};
+		}
+	}
+
+	function inSearch(search: string | undefined): (entry: MenuListEntry) => boolean {
+		return (entry: MenuListEntry) => !search || entry.label.toLowerCase().includes(search.toLowerCase());
+	}
+
 	function watchOpen(open: boolean) {
 		highlighted = activeEntry;
 		dispatch("open", open);
+
+		search = undefined;
+	}
+
+	$: updateHighlightedWithSearch(filteredEntries);
+	// Required to keep the highlighted item centred and to find a new highlighted item if necessary
+	async function updateHighlightedWithSearch(filteredEntries: MenuListEntry[][]) {
+		if (highlighted) {
+			// Allows the scrollable area to expand if necessary
+			await tick();
+			setHighlighted(filteredEntries.flat().includes(highlighted) ? highlighted : filteredEntries.flat()[0]);
+		}
 	}
 
 	function watchRemeasureWidth(_: MenuListEntry[][], __: boolean) {
@@ -55,6 +108,10 @@
 		virtualScrollingEntriesStart = (e.target as HTMLElement)?.scrollTop || 0;
 	}
 
+	function getChildReference(menuListEntry: MenuListEntry): typeof self | undefined {
+		return childReferences.flat()[filteredEntries.flat().indexOf(menuListEntry)];
+	}
+
 	function onEntryClick(menuListEntry: MenuListEntry) {
 		// Call the action if available
 		if (menuListEntry.action) menuListEntry.action();
@@ -63,8 +120,9 @@
 		dispatch("activeEntry", menuListEntry);
 
 		// Close the containing menu
-		if (menuListEntry.ref) {
-			menuListEntry.ref.open = false;
+		let childReference = getChildReference(menuListEntry);
+		if (childReference) {
+			childReference.open = false;
 			entries = entries;
 		}
 		dispatch("open", false);
@@ -74,8 +132,9 @@
 	function onEntryPointerEnter(menuListEntry: MenuListEntry) {
 		if (!menuListEntry.children?.length) return;
 
-		if (menuListEntry.ref) {
-			menuListEntry.ref.open = true;
+		let childReference = getChildReference(menuListEntry);
+		if (childReference) {
+			childReference.open = true;
 			entries = entries;
 		} else dispatch("open", true);
 	}
@@ -83,8 +142,9 @@
 	function onEntryPointerLeave(menuListEntry: MenuListEntry) {
 		if (!menuListEntry.children?.length) return;
 
-		if (menuListEntry.ref) {
-			menuListEntry.ref.open = false;
+		let childReference = getChildReference(menuListEntry);
+		if (childReference) {
+			childReference.open = false;
 			entries = entries;
 		} else dispatch("open", false);
 	}
@@ -92,7 +152,7 @@
 	function isEntryOpen(menuListEntry: MenuListEntry): boolean {
 		if (!menuListEntry.children?.length) return false;
 
-		return menuListEntry.ref?.open || false;
+		return getChildReference(menuListEntry)?.open || false;
 	}
 
 	/// Handles keyboard navigation for the menu. Returns if the entire menu stack should be dismissed
@@ -101,18 +161,19 @@
 		if (interactive) highlighted = activeEntry;
 
 		const menuOpen = open;
-		const flatEntries = entries.flat().filter((entry) => !entry.disabled);
-		const openChild = flatEntries.findIndex((entry) => (entry.children?.length ?? 0) > 0 && entry.ref?.open);
+		const flatEntries = filteredEntries.flat().filter((entry) => !entry.disabled);
+		const openChild = flatEntries.findIndex((entry) => (entry.children?.length ?? 0) > 0 && getChildReference(entry)?.open);
 
 		const openSubmenu = (highlightedEntry: MenuListEntry) => {
-			if (highlightedEntry.ref && highlightedEntry.children?.length) {
-				highlightedEntry.ref.open = true;
+			let childReference = getChildReference(highlightedEntry);
+			if (childReference && highlightedEntry.children?.length) {
+				childReference.open = true;
 				// The reason we bother taking `highlightdEntry` as an argument is because, when this function is called, it can ensure `highlightedEntry` is not undefined.
 				// But here we still have to set `highlighted` to itself so Svelte knows to reactively update it after we set its `.ref.open` property.
 				highlighted = highlighted;
 
 				// Highlight first item
-				highlightedEntry.ref.setHighlighted(highlightedEntry.children[0][0]);
+				childReference.setHighlighted(highlightedEntry.children[0][0]);
 			}
 		};
 
@@ -122,7 +183,7 @@
 			highlighted = activeEntry;
 		} else if (menuOpen && openChild >= 0) {
 			// Redirect the keyboard navigation to a submenu if one is open
-			const shouldCloseStack = flatEntries[openChild].ref?.keydown(e, true);
+			const shouldCloseStack = getChildReference(flatEntries[openChild])?.keydown(e, true);
 
 			// Highlight the menu item in the parent list that corresponds with the open submenu
 			if (e.key !== "Escape" && highlighted) setHighlighted(flatEntries[openChild]);
@@ -171,6 +232,10 @@
 			if (submenu) open = false;
 		}
 
+		startSearch(e);
+		e.stopPropagation();
+		e.preventDefault();
+
 		// By default, keep the menu stack open
 		return false;
 	}
@@ -179,6 +244,31 @@
 		highlighted = newHighlight;
 		// Interactive menus should keep the active entry the same as the highlighted one
 		if (interactive && newHighlight?.value !== activeEntry?.value && newHighlight) dispatch("activeEntry", newHighlight);
+
+		// Scroll into view
+		let container = scroller?.div();
+		if (!container || !highlighted) return;
+		let containerBoundingRect = container.getBoundingClientRect();
+		let highlightedIndex = filteredEntries.flat().findIndex((entry) => entry === highlighted);
+
+		let selectedBoundingRect = new DOMRect();
+		if (virtualScrollingEntryHeight) {
+			// Special case for virtual scrolling
+			selectedBoundingRect.y = highlightedIndex * virtualScrollingEntryHeight - container.scrollTop + containerBoundingRect.y;
+			selectedBoundingRect.height = virtualScrollingEntryHeight;
+		} else {
+			let entries = Array.from(container.children).filter((element) => element.classList.contains("row"));
+			let element = entries[highlightedIndex - startIndex];
+			if (!element) return;
+			containerBoundingRect = element.getBoundingClientRect();
+		}
+
+		if (containerBoundingRect.y > selectedBoundingRect.y) {
+			container.scrollBy(0, selectedBoundingRect.y - containerBoundingRect.y);
+		}
+		if (containerBoundingRect.y + containerBoundingRect.height < selectedBoundingRect.y + selectedBoundingRect.height) {
+			container.scrollBy(0, selectedBoundingRect.y - (containerBoundingRect.y + containerBoundingRect.height) + selectedBoundingRect.height);
+		}
 	}
 
 	export function scrollViewTo(distanceDown: number) {
@@ -199,6 +289,9 @@
 	scrollableY={scrollableY && virtualScrollingEntryHeight === 0}
 	bind:this={self}
 >
+	{#if search !== undefined}
+		<TextInput value={search} on:value={(value) => (search = value.detail)} bind:focus bind:element={searchElement}></TextInput>
+	{/if}
 	<!-- If we put the scrollableY on the layoutcol for non-font dropdowns then for some reason it always creates a tiny scrollbar.
 	However when we are using the virtual scrolling then we need the layoutcol to be scrolling so we can bind the events without using `self`. -->
 	<LayoutCol
@@ -211,10 +304,12 @@
 			<LayoutRow class="scroll-spacer" styles={{ height: `${virtualScrollingStartIndex * virtualScrollingEntryHeight}px` }} />
 		{/if}
 		{#each entries as section, sectionIndex (sectionIndex)}
-			{#if sectionIndex > 0}
+			{#if entries.slice(undefined, sectionIndex).flat().filter(inSearch(search)).length > 0 && section.filter(inSearch(search)).length > 0}
 				<Separator type="Section" direction="Vertical" />
 			{/if}
-			{#each virtualScrollingEntryHeight ? section.slice(virtualScrollingStartIndex, virtualScrollingEndIndex) : section as entry, entryIndex (entryIndex + startIndex)}
+			{#each virtualScrollingEntryHeight ? section
+						.filter(inSearch(search))
+						.slice(virtualScrollingStartIndex, virtualScrollingEndIndex) : section.filter(inSearch(search)) as entry, entryIndex (entryIndex + startIndex)}
 				<LayoutRow
 					class="row"
 					classes={{ open: isEntryOpen(entry), active: entry.label === highlighted?.label, disabled: Boolean(entry.disabled) }}
@@ -248,7 +343,16 @@
 
 					{#if entry.children}
 						<!-- TODO: Solve the red underline error on the bind:this below -->
-						<svelte:self on:naturalWidth open={entry.ref?.open || false} direction="TopRight" entries={entry.children} {minWidth} {drawIcon} {scrollableY} bind:this={entry.ref} />
+						<svelte:self
+							on:naturalWidth
+							open={getChildReference(entry)?.open || false}
+							direction="TopRight"
+							entries={entry.children}
+							{minWidth}
+							{drawIcon}
+							{scrollableY}
+							bind:this={childReferences[sectionIndex][entryIndex + startIndex]}
+						/>
 					{/if}
 				</LayoutRow>
 			{/each}
diff --git a/frontend/src/components/widgets/inputs/TextInput.svelte b/frontend/src/components/widgets/inputs/TextInput.svelte
index 2c9b0d1b6c1..5b222e98a08 100644
--- a/frontend/src/components/widgets/inputs/TextInput.svelte
+++ b/frontend/src/components/widgets/inputs/TextInput.svelte
@@ -50,6 +50,10 @@
 	export function focus() {
 		self?.focus();
 	}
+
+	export function element(): HTMLInputElement | HTMLTextAreaElement | undefined {
+		return self?.element();
+	}
 </script>
 
 <FieldInput
@@ -71,6 +75,7 @@
 
 <style lang="scss" global>
 	.text-input {
+		flex-shrink: 0;
 		input {
 			text-align: left;
 		}
diff --git a/frontend/src/wasm-communication/messages.ts b/frontend/src/wasm-communication/messages.ts
index f5801b4f8bb..c9eade2d95f 100644
--- a/frontend/src/wasm-communication/messages.ts
+++ b/frontend/src/wasm-communication/messages.ts
@@ -6,8 +6,6 @@ import { Transform, Type, plainToClass } from "class-transformer";
 import { type PopoverButtonStyle, type IconName, type IconSize } from "@graphite/utility-functions/icons";
 import { type WasmEditorInstance, type WasmRawInstance } from "@graphite/wasm-communication/editor";
 
-import type MenuList from "@graphite/components/floating-menus/MenuList.svelte";
-
 export class JsMessage {
 	// The marker provides a way to check if an object is a sub-class constructor for a jsMessage.
 	static readonly jsMessageMarker = true;
@@ -718,7 +716,6 @@ export type MenuListEntry = MenuEntryCommon & {
 	disabled?: boolean;
 	tooltip?: string;
 	font?: URL;
-	ref?: MenuList;
 };
 
 export class CurveManipulatorGroup {

From da8681eee5ba64cf0e3d52bfd3dad08f08370ae2 Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Sun, 10 Dec 2023 20:45:49 -0800
Subject: [PATCH 2/7] Bug fixes and UX polish for edge cases

---
 .../components/floating-menus/Dialog.svelte   |   2 +-
 .../components/floating-menus/MenuList.svelte | 114 ++++++++++--------
 .../src/components/layout/FloatingMenu.svelte |   8 +-
 frontend/src/components/panels/Layers.svelte  |   2 +-
 .../widgets/inputs/DropdownInput.svelte       |   2 +-
 .../widgets/inputs/TextInput.svelte           |   1 +
 .../components/window/workspace/Panel.svelte  |   2 +-
 7 files changed, 74 insertions(+), 57 deletions(-)

diff --git a/frontend/src/components/floating-menus/Dialog.svelte b/frontend/src/components/floating-menus/Dialog.svelte
index 1beecbbba6f..f8040a95c06 100644
--- a/frontend/src/components/floating-menus/Dialog.svelte
+++ b/frontend/src/components/floating-menus/Dialog.svelte
@@ -20,7 +20,7 @@
 
 	onMount(() => {
 		// Focus the button which is marked as emphasized, or otherwise the first button, in the popup
-		const emphasizedOrFirstButton = (self?.div()?.querySelector("[data-emphasized]") || self?.div()?.querySelector("[data-text-button]") || undefined) as HTMLButtonElement | undefined;
+		const emphasizedOrFirstButton = (self?.div?.()?.querySelector("[data-emphasized]") || self?.div?.()?.querySelector("[data-text-button]") || undefined) as HTMLButtonElement | undefined;
 		emphasizedOrFirstButton?.focus();
 	});
 </script>
diff --git a/frontend/src/components/floating-menus/MenuList.svelte b/frontend/src/components/floating-menus/MenuList.svelte
index fa4b12c3dd0..01bf597153e 100644
--- a/frontend/src/components/floating-menus/MenuList.svelte
+++ b/frontend/src/components/floating-menus/MenuList.svelte
@@ -16,6 +16,7 @@
 
 	let self: FloatingMenu | undefined;
 	let scroller: LayoutCol | undefined;
+	let searchTextInput: TextInput | undefined;
 
 	const dispatch = createEventDispatcher<{ open: boolean; activeEntry: MenuListEntry }>();
 
@@ -33,49 +34,63 @@
 	// Keep the child references outside of the entries array so as to avoid infinite recursion.
 	let childReferences: (typeof self)[][] = [];
 	let search: string | undefined;
-	let focus: () => void | undefined;
-	let searchElement: () => HTMLInputElement | HTMLTextAreaElement | undefined;
 
 	let highlighted = activeEntry as MenuListEntry | undefined;
 	let virtualScrollingEntriesStart = 0;
 
 	// Called only when `open` is changed from outside this component
 	$: watchOpen(open);
-	$: filteredEntries = entries.map((section) => section.filter(inSearch(search)));
 	$: watchRemeasureWidth(filteredEntries, drawIcon);
+	$: entries.forEach((_, index) => {
+		if (!childReferences[index]) childReferences[index] = [];
+	});
+	$: watchHighlightedWithSearch(filteredEntries);
 
+	$: filteredEntries = entries.map((section) => section.filter(inSearch(search)));
 	$: virtualScrollingTotalHeight = filteredEntries.length === 0 ? 0 : filteredEntries[0].length * virtualScrollingEntryHeight;
 	$: virtualScrollingStartIndex = Math.floor(virtualScrollingEntriesStart / virtualScrollingEntryHeight) || 0;
 	$: virtualScrollingEndIndex = filteredEntries.length === 0 ? 0 : Math.min(filteredEntries[0].length, virtualScrollingStartIndex + 1 + 400 / virtualScrollingEntryHeight);
 	$: startIndex = virtualScrollingEntryHeight ? virtualScrollingStartIndex : 0;
 
-	function expandChildReferences(entries: MenuListEntry[][]) {
-		entries.forEach((_, index) => {
-			if (!childReferences[index]) childReferences[index] = [];
-		});
+	// Required to keep the highlighted item centered and to find a new highlighted item if necessary
+	async function watchHighlightedWithSearch(filteredEntries: MenuListEntry[][]) {
+		if (highlighted) {
+			// Allows the scrollable area to expand if necessary
+			await tick();
+
+			const flattened = filteredEntries.flat();
+			setHighlighted(flattened.includes(highlighted) ? highlighted : flattened[0]);
+		}
 	}
-	$: expandChildReferences(entries);
 
+	// Detect when the user types, which creates a search box
 	async function startSearch(event: KeyboardEvent) {
 		if (search !== undefined || event.key.length !== 1) return;
+
 		// Stop shortcuts being activated
 		event.stopPropagation();
 		event.preventDefault();
-		// Open the sarch bar
+
+		// Open the search bar
 		search = "";
-		// Must wait until the dom elements have been created before focus
+
+		// Must wait until the DOM elements have been created before focusing the search box
 		await tick();
-		focus();
-		// Forward the input
+		searchTextInput?.focus();
+
+		// Forward the input's first character to the search box, which after that point the user will continue typing into directly
 		search = event.key;
 
+		// Get the search box element
+		let searchElement = searchTextInput?.element();
+		if (!searchElement) return;
+
 		// Allow arrow key navigation whilst in the search box
-		let element = searchElement();
-		if (element) {
-			element.onkeydown = (event) => {
-				if (["Enter", "ArrowUp", "ArrowDown"].includes(event.key)) keydown(event, false);
-			};
-		}
+		searchElement.onkeydown = (event) => {
+			if (["Enter", "Escape", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(event.key)) {
+				keydown(event, false);
+			}
+		};
 	}
 
 	function inSearch(search: string | undefined): (entry: MenuListEntry) => boolean {
@@ -89,16 +104,6 @@
 		search = undefined;
 	}
 
-	$: updateHighlightedWithSearch(filteredEntries);
-	// Required to keep the highlighted item centred and to find a new highlighted item if necessary
-	async function updateHighlightedWithSearch(filteredEntries: MenuListEntry[][]) {
-		if (highlighted) {
-			// Allows the scrollable area to expand if necessary
-			await tick();
-			setHighlighted(filteredEntries.flat().includes(highlighted) ? highlighted : filteredEntries.flat()[0]);
-		}
-	}
-
 	function watchRemeasureWidth(_: MenuListEntry[][], __: boolean) {
 		self?.measureAndEmitNaturalWidth();
 	}
@@ -109,7 +114,7 @@
 	}
 
 	function getChildReference(menuListEntry: MenuListEntry): typeof self | undefined {
-		return childReferences.flat()[filteredEntries.flat().indexOf(menuListEntry)];
+		return childReferences.flat().filter((x) => x)[filteredEntries.flat().indexOf(menuListEntry)];
 	}
 
 	function onEntryClick(menuListEntry: MenuListEntry) {
@@ -164,17 +169,21 @@
 		const flatEntries = filteredEntries.flat().filter((entry) => !entry.disabled);
 		const openChild = flatEntries.findIndex((entry) => (entry.children?.length ?? 0) > 0 && getChildReference(entry)?.open);
 
-		const openSubmenu = (highlightedEntry: MenuListEntry) => {
+		const openSubmenu = (highlightedEntry: MenuListEntry): boolean => {
 			let childReference = getChildReference(highlightedEntry);
-			if (childReference && highlightedEntry.children?.length) {
-				childReference.open = true;
-				// The reason we bother taking `highlightdEntry` as an argument is because, when this function is called, it can ensure `highlightedEntry` is not undefined.
-				// But here we still have to set `highlighted` to itself so Svelte knows to reactively update it after we set its `.ref.open` property.
-				highlighted = highlighted;
-
-				// Highlight first item
-				childReference.setHighlighted(highlightedEntry.children[0][0]);
-			}
+			// No submenu to open
+			if (!childReference || !highlightedEntry.children?.length) return false;
+
+			childReference.open = true;
+			// The reason we bother taking `highlightdEntry` as an argument is because, when this function is called, it can ensure `highlightedEntry` is not undefined.
+			// But here we still have to set `highlighted` to itself so Svelte knows to reactively update it after we set its `.ref.open` property.
+			highlighted = highlighted;
+
+			// Highlight first item
+			childReference.setHighlighted(highlightedEntry.children[0][0]);
+
+			// Submenu was opened
+			return true;
 		};
 
 		if (!menuOpen && (e.key === " " || e.key === "Enter")) {
@@ -208,6 +217,8 @@
 
 			const newEntry = flatEntries[newIndex];
 			setHighlighted(newEntry);
+
+			e.preventDefault();
 		} else if (menuOpen && e.key === "Escape") {
 			// Close menu with escape key
 			open = false;
@@ -224,17 +235,22 @@
 
 			// Enter should close the entire menu stack
 			return true;
-		} else if (menuOpen && highlighted && e.key === "ArrowRight") {
+		} else if (menuOpen && highlighted && (e.key === "ArrowRight" || e.key === " " || e.key === "Enter")) {
 			// Right arrow opens a submenu
-			openSubmenu(highlighted);
+			const openable = openSubmenu(highlighted);
+
+			// Prevent the right arrow from moving the search text cursor if we are opening a submenu
+			if (openable) e.preventDefault();
 		} else if (menuOpen && e.key === "ArrowLeft") {
 			// Left arrow closes a submenu
-			if (submenu) open = false;
-		}
+			if (submenu) {
+				open = false;
 
-		startSearch(e);
-		e.stopPropagation();
-		e.preventDefault();
+				e.preventDefault();
+			}
+		} else if (menuOpen && e.key !== " ") {
+			startSearch(e);
+		}
 
 		// By default, keep the menu stack open
 		return false;
@@ -246,7 +262,7 @@
 		if (interactive && newHighlight?.value !== activeEntry?.value && newHighlight) dispatch("activeEntry", newHighlight);
 
 		// Scroll into view
-		let container = scroller?.div();
+		let container = scroller?.div?.();
 		if (!container || !highlighted) return;
 		let containerBoundingRect = container.getBoundingClientRect();
 		let highlightedIndex = filteredEntries.flat().findIndex((entry) => entry === highlighted);
@@ -272,7 +288,7 @@
 	}
 
 	export function scrollViewTo(distanceDown: number) {
-		scroller?.div()?.scrollTo(0, distanceDown);
+		scroller?.div?.()?.scrollTo(0, distanceDown);
 	}
 </script>
 
@@ -290,7 +306,7 @@
 	bind:this={self}
 >
 	{#if search !== undefined}
-		<TextInput value={search} on:value={(value) => (search = value.detail)} bind:focus bind:element={searchElement}></TextInput>
+		<TextInput value={search} on:value={(value) => (search = value.detail)} bind:this={searchTextInput}></TextInput>
 	{/if}
 	<!-- If we put the scrollableY on the layoutcol for non-font dropdowns then for some reason it always creates a tiny scrollbar.
 	However when we are using the virtual scrolling then we need the layoutcol to be scrolling so we can bind the events without using `self`. -->
diff --git a/frontend/src/components/layout/FloatingMenu.svelte b/frontend/src/components/layout/FloatingMenu.svelte
index 71d868f6de2..dc4cb4a1a80 100644
--- a/frontend/src/components/layout/FloatingMenu.svelte
+++ b/frontend/src/components/layout/FloatingMenu.svelte
@@ -118,7 +118,7 @@
 	onMount(() => {
 		// Measure the content and round up its width and height to the nearest even integer.
 		// This solves antialiasing issues when the content isn't cleanly divisible by 2 and gets translated by (-50%, -50%) causing all its content to be blurry.
-		const floatingMenuContentDiv = floatingMenuContent?.div();
+		const floatingMenuContentDiv = floatingMenuContent?.div?.();
 		if (type === "Dialog" && floatingMenuContentDiv) {
 			// TODO: Also use https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver to detect any changes which may affect the size of the content.
 			// TODO: The current method only notices when the dialog size increases but can't detect when it decreases.
@@ -142,7 +142,7 @@
 
 	afterUpdate(() => {
 		// Remove the size constraint after the content updates so the resize observer can measure the content and reapply a newly calculated one
-		const floatingMenuContentDiv = floatingMenuContent?.div();
+		const floatingMenuContentDiv = floatingMenuContent?.div?.();
 		if (type === "Dialog" && floatingMenuContentDiv) {
 			// We have to set the style properties directly because attempting to do it through a Svelte bound property results in `afterUpdate()` being triggered
 			floatingMenuContentDiv.style.setProperty("min-width", "unset");
@@ -164,7 +164,7 @@
 
 		const workspace = document.querySelector("[data-workspace]");
 
-		const floatingMenuContentDiv = floatingMenuContent?.div();
+		const floatingMenuContentDiv = floatingMenuContent?.div?.();
 		if (!workspace || !self || !floatingMenuContainer || !floatingMenuContent || !floatingMenuContentDiv) return;
 
 		workspaceBounds = workspace.getBoundingClientRect();
@@ -265,7 +265,7 @@
 
 		// Measure the width of the floating menu content element, if it's currently visible
 		// The result will be `undefined` if the menu is invisible, perhaps because an ancestor component is hidden with a falsy Svelte template if condition
-		const naturalWidth: number | undefined = floatingMenuContent?.div()?.clientWidth;
+		const naturalWidth: number | undefined = floatingMenuContent?.div?.()?.clientWidth;
 
 		// Turn off measuring mode for the component, which triggers another call to the `afterUpdate()` Svelte event, so we can turn off the protection after that has happened
 		measuringOngoing = false;
diff --git a/frontend/src/components/panels/Layers.svelte b/frontend/src/components/panels/Layers.svelte
index 373cacade5a..df5bc5a729b 100644
--- a/frontend/src/components/panels/Layers.svelte
+++ b/frontend/src/components/panels/Layers.svelte
@@ -146,7 +146,7 @@
 
 		await tick();
 
-		const query = list?.div()?.querySelector("[data-text-input]:not([disabled])");
+		const query = list?.div?.()?.querySelector("[data-text-input]:not([disabled])");
 		const textInput = (query instanceof HTMLInputElement && query) || undefined;
 		textInput?.select();
 	}
diff --git a/frontend/src/components/widgets/inputs/DropdownInput.svelte b/frontend/src/components/widgets/inputs/DropdownInput.svelte
index 338da687ff3..64569fa51ec 100644
--- a/frontend/src/components/widgets/inputs/DropdownInput.svelte
+++ b/frontend/src/components/widgets/inputs/DropdownInput.svelte
@@ -56,7 +56,7 @@
 
 	function unFocusDropdownBox(e: FocusEvent) {
 		const blurTarget = (e.target as HTMLDivElement | undefined)?.closest("[data-dropdown-input]") || undefined;
-		if (blurTarget !== self?.div()) open = false;
+		if (blurTarget !== self?.div?.()) open = false;
 	}
 </script>
 
diff --git a/frontend/src/components/widgets/inputs/TextInput.svelte b/frontend/src/components/widgets/inputs/TextInput.svelte
index 5b222e98a08..31fb66231fc 100644
--- a/frontend/src/components/widgets/inputs/TextInput.svelte
+++ b/frontend/src/components/widgets/inputs/TextInput.svelte
@@ -76,6 +76,7 @@
 <style lang="scss" global>
 	.text-input {
 		flex-shrink: 0;
+
 		input {
 			text-align: left;
 		}
diff --git a/frontend/src/components/window/workspace/Panel.svelte b/frontend/src/components/window/workspace/Panel.svelte
index cf941ee7df8..f35e804423f 100644
--- a/frontend/src/components/window/workspace/Panel.svelte
+++ b/frontend/src/components/window/workspace/Panel.svelte
@@ -52,7 +52,7 @@
 
 	export async function scrollTabIntoView(newIndex: number) {
 		await tick();
-		tabElements[newIndex]?.div()?.scrollIntoView();
+		tabElements[newIndex]?.div?.()?.scrollIntoView();
 	}
 </script>
 

From 4da0a87f27ad3816b2532c08b895e873f05714a2 Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Mon, 11 Dec 2023 20:01:38 -0800
Subject: [PATCH 3/7] More work, still more bugs to fix

---
 .../components/floating-menus/MenuList.svelte | 89 ++++++++++++-------
 .../widgets/inputs/TextInput.svelte           |  8 +-
 2 files changed, 65 insertions(+), 32 deletions(-)

diff --git a/frontend/src/components/floating-menus/MenuList.svelte b/frontend/src/components/floating-menus/MenuList.svelte
index 01bf597153e..47fc0d1f3c3 100644
--- a/frontend/src/components/floating-menus/MenuList.svelte
+++ b/frontend/src/components/floating-menus/MenuList.svelte
@@ -33,7 +33,7 @@
 
 	// Keep the child references outside of the entries array so as to avoid infinite recursion.
 	let childReferences: (typeof self)[][] = [];
-	let search: string | undefined;
+	let search = "";
 
 	let highlighted = activeEntry as MenuListEntry | undefined;
 	let virtualScrollingEntriesStart = 0;
@@ -46,7 +46,7 @@
 	});
 	$: watchHighlightedWithSearch(filteredEntries);
 
-	$: filteredEntries = entries.map((section) => section.filter(inSearch(search)));
+	$: filteredEntries = entries.map((section) => section.filter((entry) => inSearch(search, entry)));
 	$: virtualScrollingTotalHeight = filteredEntries.length === 0 ? 0 : filteredEntries[0].length * virtualScrollingEntryHeight;
 	$: virtualScrollingStartIndex = Math.floor(virtualScrollingEntriesStart / virtualScrollingEntryHeight) || 0;
 	$: virtualScrollingEndIndex = filteredEntries.length === 0 ? 0 : Math.min(filteredEntries[0].length, virtualScrollingStartIndex + 1 + 400 / virtualScrollingEntryHeight);
@@ -64,44 +64,45 @@
 	}
 
 	// Detect when the user types, which creates a search box
-	async function startSearch(event: KeyboardEvent) {
-		if (search !== undefined || event.key.length !== 1) return;
+	async function startSearch(e: KeyboardEvent) {
+		// Only accept single-character symbol inputs other than space
+		if (e.key.length !== 1 || e.key === " ") return;
 
 		// Stop shortcuts being activated
-		event.stopPropagation();
-		event.preventDefault();
+		e.stopPropagation();
+		e.preventDefault();
 
-		// Open the search bar
-		search = "";
+		// Forward the input's first character to the search box, which after that point the user will continue typing into directly
+		search = e.key;
 
-		// Must wait until the DOM elements have been created before focusing the search box
+		// Must wait until the DOM elements have been created (after the if condition becomes true) before the search box exists
 		await tick();
-		searchTextInput?.focus();
-
-		// Forward the input's first character to the search box, which after that point the user will continue typing into directly
-		search = event.key;
 
 		// Get the search box element
-		let searchElement = searchTextInput?.element();
-		if (!searchElement) return;
+		const searchElement = searchTextInput?.element();
+		if (!searchTextInput || !searchElement) return;
 
-		// Allow arrow key navigation whilst in the search box
-		searchElement.onkeydown = (event) => {
-			if (["Enter", "Escape", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(event.key)) {
-				keydown(event, false);
+		// Focus the search box and move the cursor to the end
+		searchTextInput.focus();
+		searchElement.setSelectionRange(search.length, search.length);
+
+		// Continue listening for keyboard navigation even when the search box is focused
+		searchElement.onkeydown = (e) => {
+			if (["Enter", "Escape", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
+				keydown(e, false);
 			}
 		};
 	}
 
-	function inSearch(search: string | undefined): (entry: MenuListEntry) => boolean {
-		return (entry: MenuListEntry) => !search || entry.label.toLowerCase().includes(search.toLowerCase());
+	function inSearch(search: string, entry: MenuListEntry): boolean {
+		return !search || entry.label.toLowerCase().includes(search.toLowerCase());
 	}
 
 	function watchOpen(open: boolean) {
 		highlighted = activeEntry;
 		dispatch("open", open);
 
-		search = undefined;
+		search = "";
 	}
 
 	function watchRemeasureWidth(_: MenuListEntry[][], __: boolean) {
@@ -160,6 +161,23 @@
 		return getChildReference(menuListEntry)?.open || false;
 	}
 
+	function includeSeparator(entries: MenuListEntry[][], section: MenuListEntry[], sectionIndex: number, search: string): boolean {
+		const elementsBeforeCurrentSection = entries
+			.slice(0, sectionIndex)
+			.flat()
+			.filter((entry) => inSearch(search, entry));
+		const entriesInCurrentSection = section.filter((entry) => inSearch(search, entry));
+
+		return elementsBeforeCurrentSection.length > 0 && entriesInCurrentSection.length > 0;
+	}
+
+	function currentEntries(section: MenuListEntry[], virtualScrollingEntryHeight: number, virtualScrollingStartIndex: number, virtualScrollingEndIndex: number, search: string) {
+		if (!virtualScrollingEntryHeight) {
+			return section.filter((entry) => inSearch(search, entry));
+		}
+		return section.filter((entry) => inSearch(search, entry)).slice(virtualScrollingStartIndex, virtualScrollingEndIndex);
+	}
+
 	/// Handles keyboard navigation for the menu. Returns if the entire menu stack should be dismissed
 	export function keydown(e: KeyboardEvent, submenu: boolean): boolean {
 		// Interactive menus should keep the active entry the same as the highlighted one
@@ -248,7 +266,7 @@
 
 				e.preventDefault();
 			}
-		} else if (menuOpen && e.key !== " ") {
+		} else if (menuOpen && search === "") {
 			startSearch(e);
 		}
 
@@ -305,8 +323,16 @@
 	scrollableY={scrollableY && virtualScrollingEntryHeight === 0}
 	bind:this={self}
 >
-	{#if search !== undefined}
-		<TextInput value={search} on:value={(value) => (search = value.detail)} bind:this={searchTextInput}></TextInput>
+	{#if search.length > 0}
+		<TextInput
+			class="search"
+			value={search}
+			on:value={({ detail }) => {
+				search = detail;
+				console.log(detail);
+			}}
+			bind:this={searchTextInput}
+		></TextInput>
 	{/if}
 	<!-- If we put the scrollableY on the layoutcol for non-font dropdowns then for some reason it always creates a tiny scrollbar.
 	However when we are using the virtual scrolling then we need the layoutcol to be scrolling so we can bind the events without using `self`. -->
@@ -320,12 +346,10 @@
 			<LayoutRow class="scroll-spacer" styles={{ height: `${virtualScrollingStartIndex * virtualScrollingEntryHeight}px` }} />
 		{/if}
 		{#each entries as section, sectionIndex (sectionIndex)}
-			{#if entries.slice(undefined, sectionIndex).flat().filter(inSearch(search)).length > 0 && section.filter(inSearch(search)).length > 0}
+			{#if includeSeparator(entries, section, sectionIndex, search)}
 				<Separator type="Section" direction="Vertical" />
 			{/if}
-			{#each virtualScrollingEntryHeight ? section
-						.filter(inSearch(search))
-						.slice(virtualScrollingStartIndex, virtualScrollingEndIndex) : section.filter(inSearch(search)) as entry, entryIndex (entryIndex + startIndex)}
+			{#each currentEntries(section, virtualScrollingEntryHeight, virtualScrollingStartIndex, virtualScrollingEndIndex, search) as entry, entryIndex (entryIndex + startIndex)}
 				<LayoutRow
 					class="row"
 					classes={{ open: isEntryOpen(entry), active: entry.label === highlighted?.label, disabled: Boolean(entry.disabled) }}
@@ -358,7 +382,6 @@
 					{/if}
 
 					{#if entry.children}
-						<!-- TODO: Solve the red underline error on the bind:this below -->
 						<svelte:self
 							on:naturalWidth
 							open={getChildReference(entry)?.open || false}
@@ -369,6 +392,7 @@
 							{scrollableY}
 							bind:this={childReferences[sectionIndex][entryIndex + startIndex]}
 						/>
+						<!-- TODO: Solve the red underline error on the bind:this above -->
 					{/if}
 				</LayoutRow>
 			{/each}
@@ -381,6 +405,11 @@
 
 <style lang="scss" global>
 	.menu-list {
+		.search {
+			margin: 4px;
+			margin-top: 0;
+		}
+
 		.floating-menu-container .floating-menu-content.floating-menu-content {
 			padding: 4px 0;
 
diff --git a/frontend/src/components/widgets/inputs/TextInput.svelte b/frontend/src/components/widgets/inputs/TextInput.svelte
index 31fb66231fc..ecc696b1b12 100644
--- a/frontend/src/components/widgets/inputs/TextInput.svelte
+++ b/frontend/src/components/widgets/inputs/TextInput.svelte
@@ -17,6 +17,10 @@
 	export let centered = false;
 	export let minWidth = 0;
 
+	let className = "";
+	export { className as class };
+	export let classes: Record<string, boolean> = {};
+
 	let self: FieldInput | undefined;
 	let editing = false;
 
@@ -57,8 +61,8 @@
 </script>
 
 <FieldInput
-	class="text-input"
-	classes={{ centered }}
+	class={`text-input ${className}`.trim()}
+	classes={{ centered, ...classes }}
 	styles={{ "min-width": minWidth > 0 ? `${minWidth}px` : undefined }}
 	{value}
 	on:value

From 34e385a21d46be7645fcb76f6e2f9d99999a9d58 Mon Sep 17 00:00:00 2001
From: 0hypercube <0hypercube@gmail.com>
Date: Mon, 4 Mar 2024 20:24:22 +0000
Subject: [PATCH 4/7] Don't update highlight when not open

---
 frontend/src/components/floating-menus/MenuList.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/floating-menus/MenuList.svelte b/frontend/src/components/floating-menus/MenuList.svelte
index 47fc0d1f3c3..bce5e4d01da 100644
--- a/frontend/src/components/floating-menus/MenuList.svelte
+++ b/frontend/src/components/floating-menus/MenuList.svelte
@@ -44,7 +44,7 @@
 	$: entries.forEach((_, index) => {
 		if (!childReferences[index]) childReferences[index] = [];
 	});
-	$: watchHighlightedWithSearch(filteredEntries);
+	$: watchHighlightedWithSearch(filteredEntries, open);
 
 	$: filteredEntries = entries.map((section) => section.filter((entry) => inSearch(search, entry)));
 	$: virtualScrollingTotalHeight = filteredEntries.length === 0 ? 0 : filteredEntries[0].length * virtualScrollingEntryHeight;
@@ -53,8 +53,8 @@
 	$: startIndex = virtualScrollingEntryHeight ? virtualScrollingStartIndex : 0;
 
 	// Required to keep the highlighted item centered and to find a new highlighted item if necessary
-	async function watchHighlightedWithSearch(filteredEntries: MenuListEntry[][]) {
-		if (highlighted) {
+	async function watchHighlightedWithSearch(filteredEntries: MenuListEntry[][], open: boolean) {
+		if (highlighted && open) {
 			// Allows the scrollable area to expand if necessary
 			await tick();
 

From ea5c6551035486f96b51f46eeb2aff42da2128d1 Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Sun, 3 Mar 2024 14:22:04 -0800
Subject: [PATCH 5/7] Bug fixes

---
 .../components/floating-menus/MenuList.svelte | 112 ++++++++++++------
 1 file changed, 77 insertions(+), 35 deletions(-)

diff --git a/frontend/src/components/floating-menus/MenuList.svelte b/frontend/src/components/floating-menus/MenuList.svelte
index bce5e4d01da..b0f7ac941e7 100644
--- a/frontend/src/components/floating-menus/MenuList.svelte
+++ b/frontend/src/components/floating-menus/MenuList.svelte
@@ -178,8 +178,28 @@
 		return section.filter((entry) => inSearch(search, entry)).slice(virtualScrollingStartIndex, virtualScrollingEndIndex);
 	}
 
-	/// Handles keyboard navigation for the menu. Returns if the entire menu stack should be dismissed
+	function openSubmenu(highlightedEntry: MenuListEntry): boolean {
+		let childReference = getChildReference(highlightedEntry);
+		// No submenu to open
+		if (!childReference || !highlightedEntry.children?.length) return false;
+
+		childReference.open = true;
+		// The reason we bother taking `highlightdEntry` as an argument is because, when this function is called, it can ensure `highlightedEntry` is not undefined.
+		// But here we still have to set `highlighted` to itself so Svelte knows to reactively update it after we set its `.ref.open` property.
+		highlighted = highlighted;
+
+		// Highlight first item
+		childReference.setHighlighted(highlightedEntry.children[0][0]);
+
+		// Submenu was opened
+		return true;
+	}
+
+	/// 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");
+
 		// Interactive menus should keep the active entry the same as the highlighted one
 		if (interactive) highlighted = activeEntry;
 
@@ -187,42 +207,35 @@
 		const flatEntries = filteredEntries.flat().filter((entry) => !entry.disabled);
 		const openChild = flatEntries.findIndex((entry) => (entry.children?.length ?? 0) > 0 && getChildReference(entry)?.open);
 
-		const openSubmenu = (highlightedEntry: MenuListEntry): boolean => {
-			let childReference = getChildReference(highlightedEntry);
-			// No submenu to open
-			if (!childReference || !highlightedEntry.children?.length) return false;
-
-			childReference.open = true;
-			// The reason we bother taking `highlightdEntry` as an argument is because, when this function is called, it can ensure `highlightedEntry` is not undefined.
-			// But here we still have to set `highlighted` to itself so Svelte knows to reactively update it after we set its `.ref.open` property.
-			highlighted = highlighted;
-
-			// Highlight first item
-			childReference.setHighlighted(highlightedEntry.children[0][0]);
-
-			// Submenu was opened
-			return true;
-		};
-
+		// Allow opening menu with space or enter
 		if (!menuOpen && (e.key === " " || e.key === "Enter")) {
-			// Allow opening menu with space or enter
 			open = true;
 			highlighted = activeEntry;
-		} else if (menuOpen && openChild >= 0) {
+
+			// Keep the menu stack open
+			return false;
+		}
+
+		// If a submenu is open, have it handle this instead
+		if (menuOpen && openChild >= 0) {
+			const childMenuListEntry = flatEntries[openChild];
+			const childMenu = getChildReference(childMenuListEntry);
+
 			// Redirect the keyboard navigation to a submenu if one is open
-			const shouldCloseStack = getChildReference(flatEntries[openChild])?.keydown(e, true);
+			const shouldCloseStack = childMenu?.keydown(e, true);
 
 			// Highlight the menu item in the parent list that corresponds with the open submenu
-			if (e.key !== "Escape" && highlighted) setHighlighted(flatEntries[openChild]);
+			if (highlighted && e.key !== "Escape") setHighlighted(childMenuListEntry);
 
 			// Handle the child closing the entire menu stack
-			if (shouldCloseStack) {
-				open = false;
-				return true;
-			}
-		} else if ((menuOpen || interactive) && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
-			// Navigate to the next and previous entries with arrow keys
+			if (shouldCloseStack) open = false;
+
+			// Keep the menu stack open
+			return shouldCloseStack;
+		}
 
+		// Navigate to the next and previous entries with arrow keys
+		if ((menuOpen || interactive) && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
 			let newIndex = e.key === "ArrowUp" ? flatEntries.length - 1 : 0;
 			if (highlighted) {
 				const index = highlighted ? flatEntries.map((entry) => entry.label).indexOf(highlighted.label) : 0;
@@ -237,13 +250,24 @@
 			setHighlighted(newEntry);
 
 			e.preventDefault();
-		} else if (menuOpen && e.key === "Escape") {
-			// Close menu with escape key
+
+			// Keep the menu stack open
+			return false;
+		}
+
+		// Close menu with escape key
+		if (menuOpen && e.key === "Escape") {
 			open = false;
 
 			// Reset active to before open
 			setHighlighted(activeEntry);
-		} else if (menuOpen && highlighted && e.key === "Enter") {
+
+			// Keep the menu stack open
+			return false;
+		}
+
+		// Click on a highlighted entry with the enter key
+		if (menuOpen && highlighted && e.key === "Enter") {
 			// Handle clicking on an option if enter is pressed
 			if (!highlighted.children?.length) onEntryClick(highlighted);
 			else openSubmenu(highlighted);
@@ -253,24 +277,42 @@
 
 			// Enter should close the entire menu stack
 			return true;
-		} else if (menuOpen && highlighted && (e.key === "ArrowRight" || e.key === " " || e.key === "Enter")) {
+		}
+
+		// Open a submenu with the right arrow key, space, or enter
+		if (menuOpen && highlighted && (e.key === "ArrowRight" || e.key === " " || e.key === "Enter")) {
 			// Right arrow opens a submenu
 			const openable = openSubmenu(highlighted);
 
 			// Prevent the right arrow from moving the search text cursor if we are opening a submenu
 			if (openable) e.preventDefault();
-		} else if (menuOpen && e.key === "ArrowLeft") {
+
+			// Keep the menu stack open
+			return false;
+		}
+
+		// Close a submenu with the left arrow key
+		if (menuOpen && e.key === "ArrowLeft") {
 			// Left arrow closes a submenu
 			if (submenu) {
 				open = false;
 
 				e.preventDefault();
 			}
-		} else if (menuOpen && search === "") {
+
+			// Keep the menu stack open
+			return false;
+		}
+
+		// Start a search with any other key
+		if (menuOpen && search === "") {
 			startSearch(e);
+
+			// Keep the menu stack open
+			return false;
 		}
 
-		// By default, keep the menu stack open
+		// If nothing happened, keep the menu stack open
 		return false;
 	}
 

From f5c9968f9eb3f895a75bcdf69bb08d2e32013340 Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Sun, 3 Mar 2024 19:01:30 -0800
Subject: [PATCH 6/7] Additional bug fixes and code review

---
 .../document/document_message_handler.rs      |  2 +-
 .../components/floating-menus/MenuList.svelte | 87 ++++++++++++-------
 .../widgets/buttons/TextButton.svelte         |  1 -
 .../widgets/inputs/DropdownInput.svelte       |  3 +-
 .../widgets/inputs/FontInput.svelte           | 11 +--
 frontend/src/wasm-communication/messages.ts   |  2 +-
 6 files changed, 60 insertions(+), 46 deletions(-)

diff --git a/editor/src/messages/portfolio/document/document_message_handler.rs b/editor/src/messages/portfolio/document/document_message_handler.rs
index 450e30a31fc..a2fd87c7afe 100644
--- a/editor/src/messages/portfolio/document/document_message_handler.rs
+++ b/editor/src/messages/portfolio/document/document_message_handler.rs
@@ -1180,7 +1180,7 @@ impl DocumentMessageHandler {
 							.icon(DocumentMode::SelectMode.icon_name())
 							.on_update(|_| DialogMessage::RequestComingSoonDialog { issue: Some(330) }.into()),
 						MenuListEntry::new(format!("{:?}", DocumentMode::GuideMode))
-							.label(DocumentMode::SelectMode.to_string())
+							.label(DocumentMode::GuideMode.to_string())
 							.icon(DocumentMode::GuideMode.icon_name())
 							.on_update(|_| DialogMessage::RequestComingSoonDialog { issue: Some(331) }.into()),
 					]])
diff --git a/frontend/src/components/floating-menus/MenuList.svelte b/frontend/src/components/floating-menus/MenuList.svelte
index b0f7ac941e7..93727bc262c 100644
--- a/frontend/src/components/floating-menus/MenuList.svelte
+++ b/frontend/src/components/floating-menus/MenuList.svelte
@@ -1,10 +1,11 @@
 <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";
 
+	import MenuList from "@graphite/components/floating-menus/MenuList.svelte";
 	import FloatingMenu, { type MenuDirection } from "@graphite/components/layout/FloatingMenu.svelte";
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
@@ -18,7 +19,7 @@
 	let scroller: LayoutCol | undefined;
 	let searchTextInput: TextInput | undefined;
 
-	const dispatch = createEventDispatcher<{ open: boolean; activeEntry: MenuListEntry }>();
+	const dispatch = createEventDispatcher<{ open: boolean; activeEntry: MenuListEntry; naturalWidth: number }>();
 
 	export let entries: MenuListEntry[][];
 	export let activeEntry: MenuListEntry | undefined = undefined;
@@ -32,7 +33,7 @@
 	export let tooltip: string | undefined = undefined;
 
 	// Keep the child references outside of the entries array so as to avoid infinite recursion.
-	let childReferences: (typeof self)[][] = [];
+	let childReferences: MenuList[][] = [];
 	let search = "";
 
 	let highlighted = activeEntry as MenuListEntry | undefined;
@@ -40,10 +41,8 @@
 
 	// Called only when `open` is changed from outside this component
 	$: watchOpen(open);
+	$: watchEntries(entries);
 	$: watchRemeasureWidth(filteredEntries, drawIcon);
-	$: entries.forEach((_, index) => {
-		if (!childReferences[index]) childReferences[index] = [];
-	});
 	$: watchHighlightedWithSearch(filteredEntries, open);
 
 	$: filteredEntries = entries.map((section) => section.filter((entry) => inSearch(search, entry)));
@@ -52,6 +51,23 @@
 	$: virtualScrollingEndIndex = filteredEntries.length === 0 ? 0 : Math.min(filteredEntries[0].length, virtualScrollingStartIndex + 1 + 400 / virtualScrollingEntryHeight);
 	$: startIndex = virtualScrollingEntryHeight ? virtualScrollingStartIndex : 0;
 
+	// TODO: Move keyboard input handling entirely to the unified system in `input.ts`.
+	// TODO: The current approach is hacky and blocks the allowances for shortcuts like the key to open the browser's dev tools.
+	onMount(async () => {
+		await tick();
+		if (open && !inNestedMenuList()) addEventListener("keydown", keydown);
+	});
+	onDestroy(async () => {
+		await tick();
+		if (!inNestedMenuList()) removeEventListener("keydown", keydown);
+	});
+
+	function inNestedMenuList(): boolean {
+		const div = self?.div();
+		if (!(div instanceof HTMLDivElement)) return false;
+		return Boolean(div.closest("[data-floating-menu-content]"));
+	}
+
 	// 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) {
@@ -59,7 +75,9 @@
 			await tick();
 
 			const flattened = filteredEntries.flat();
-			setHighlighted(flattened.includes(highlighted) ? highlighted : flattened[0]);
+			const highlightedFound = highlighted?.label && flattened.map((entry) => entry.label).includes(highlighted.label);
+			const newHighlighted = highlightedFound ? highlighted : flattened[0];
+			setHighlighted(newHighlighted);
 		}
 	}
 
@@ -87,11 +105,11 @@
 		searchElement.setSelectionRange(search.length, search.length);
 
 		// Continue listening for keyboard navigation even when the search box is focused
-		searchElement.onkeydown = (e) => {
-			if (["Enter", "Escape", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
-				keydown(e, false);
-			}
-		};
+		// searchElement.onkeydown = (e) => {
+		// 	if (["Enter", "Escape", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
+		// 		keydown(e, false);
+		// 	}
+		// };
 	}
 
 	function inSearch(search: string, entry: MenuListEntry): boolean {
@@ -99,12 +117,21 @@
 	}
 
 	function watchOpen(open: boolean) {
+		if (open && !inNestedMenuList()) addEventListener("keydown", keydown);
+		else if (!inNestedMenuList()) removeEventListener("keydown", keydown);
+
 		highlighted = activeEntry;
 		dispatch("open", open);
 
 		search = "";
 	}
 
+	function watchEntries(entries: MenuListEntry[][]) {
+		entries.forEach((_, index) => {
+			if (!childReferences[index]) childReferences[index] = [];
+		});
+	}
+
 	function watchRemeasureWidth(_: MenuListEntry[][], __: boolean) {
 		self?.measureAndEmitNaturalWidth();
 	}
@@ -114,8 +141,9 @@
 		virtualScrollingEntriesStart = (e.target as HTMLElement)?.scrollTop || 0;
 	}
 
-	function getChildReference(menuListEntry: MenuListEntry): typeof self | undefined {
-		return childReferences.flat().filter((x) => x)[filteredEntries.flat().indexOf(menuListEntry)];
+	function getChildReference(menuListEntry: MenuListEntry): MenuList | undefined {
+		const index = filteredEntries.flat().indexOf(menuListEntry);
+		return childReferences.flat().filter((x) => x)[index];
 	}
 
 	function onEntryClick(menuListEntry: MenuListEntry) {
@@ -197,9 +225,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;
 
@@ -222,7 +248,7 @@
 			const childMenu = getChildReference(childMenuListEntry);
 
 			// Redirect the keyboard navigation to a submenu if one is open
-			const shouldCloseStack = childMenu?.keydown(e, true);
+			const shouldCloseStack = childMenu?.keydown(e, true) || false;
 
 			// Highlight the menu item in the parent list that corresponds with the open submenu
 			if (highlighted && e.key !== "Escape") setHighlighted(childMenuListEntry);
@@ -318,8 +344,11 @@
 
 	export function setHighlighted(newHighlight: MenuListEntry | undefined) {
 		highlighted = newHighlight;
+
 		// Interactive menus should keep the active entry the same as the highlighted one
-		if (interactive && newHighlight?.value !== activeEntry?.value && newHighlight) dispatch("activeEntry", newHighlight);
+		if (interactive && newHighlight?.value !== activeEntry?.value && newHighlight) {
+			dispatch("activeEntry", newHighlight);
+		}
 
 		// Scroll into view
 		let container = scroller?.div?.();
@@ -366,15 +395,7 @@
 	bind:this={self}
 >
 	{#if search.length > 0}
-		<TextInput
-			class="search"
-			value={search}
-			on:value={({ detail }) => {
-				search = detail;
-				console.log(detail);
-			}}
-			bind:this={searchTextInput}
-		></TextInput>
+		<TextInput class="search" value={search} on:value={({ detail }) => (search = detail)} bind:this={searchTextInput}></TextInput>
 	{/if}
 	<!-- If we put the scrollableY on the layoutcol for non-font dropdowns then for some reason it always creates a tiny scrollbar.
 	However when we are using the virtual scrolling then we need the layoutcol to be scrolling so we can bind the events without using `self`. -->
@@ -424,8 +445,13 @@
 					{/if}
 
 					{#if entry.children}
-						<svelte:self
-							on:naturalWidth
+						<MenuList
+							on:naturalWidth={() => {
+								// We do a manual dispatch here instead of just `on:naturalWidth` as a workaround for the <script> tag
+								// at the top of this file displaying a "'render' implicitly has return type 'any' because..." error.
+								// See explanation at <https://github.com/sveltejs/language-tools/issues/452#issuecomment-723148184>.
+								dispatch("naturalWidth");
+							}}
 							open={getChildReference(entry)?.open || false}
 							direction="TopRight"
 							entries={entry.children}
@@ -434,7 +460,6 @@
 							{scrollableY}
 							bind:this={childReferences[sectionIndex][entryIndex + startIndex]}
 						/>
-						<!-- TODO: Solve the red underline error on the bind:this above -->
 					{/if}
 				</LayoutRow>
 			{/each}
diff --git a/frontend/src/components/widgets/buttons/TextButton.svelte b/frontend/src/components/widgets/buttons/TextButton.svelte
index 3ef6888b2fe..c4a439c8636 100644
--- a/frontend/src/components/widgets/buttons/TextButton.svelte
+++ b/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} />
diff --git a/frontend/src/components/widgets/inputs/DropdownInput.svelte b/frontend/src/components/widgets/inputs/DropdownInput.svelte
index 64569fa51ec..2063be49d08 100644
--- a/frontend/src/components/widgets/inputs/DropdownInput.svelte
+++ b/frontend/src/components/widgets/inputs/DropdownInput.svelte
@@ -8,7 +8,7 @@
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 
-	const DASH_ENTRY = { label: "-" };
+	const DASH_ENTRY = { value: "", label: "-" };
 
 	const dispatch = createEventDispatcher<{ selectedIndex: number }>();
 
@@ -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
 	>
diff --git a/frontend/src/components/widgets/inputs/FontInput.svelte b/frontend/src/components/widgets/inputs/FontInput.svelte
index 931bbbb0d8d..e839f9785d4 100644
--- a/frontend/src/components/widgets/inputs/FontInput.svelte
+++ b/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>
diff --git a/frontend/src/wasm-communication/messages.ts b/frontend/src/wasm-communication/messages.ts
index c9eade2d95f..3df903e1f22 100644
--- a/frontend/src/wasm-communication/messages.ts
+++ b/frontend/src/wasm-communication/messages.ts
@@ -711,8 +711,8 @@ export type MenuListEntry = MenuEntryCommon & {
 	action?: () => void;
 	children?: MenuListEntry[][];
 
+	value: string;
 	shortcutRequiresLock?: boolean;
-	value?: string;
 	disabled?: boolean;
 	tooltip?: string;
 	font?: URL;

From fc0559efd1b50f06c1d736430f3ca9e46800cb1e Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Sat, 9 Mar 2024 02:50:26 -0800
Subject: [PATCH 7/7] Fix keyboard input being sent to backend

---
 frontend/src/io-managers/input.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/frontend/src/io-managers/input.ts b/frontend/src/io-managers/input.ts
index 8953f09ba4d..8ea0d7522b0 100644
--- a/frontend/src/io-managers/input.ts
+++ b/frontend/src/io-managers/input.ts
@@ -92,6 +92,9 @@ export function createInputManager(editor: Editor, dialog: DialogState, portfoli
 		// Don't redirect tab or enter if not in canvas (to allow navigating elements)
 		if (!canvasFocused && !targetIsTextField(e.target || undefined) && ["Tab", "Enter", "NumpadEnter", "Space", "ArrowDown", "ArrowLeft", "ArrowRight", "ArrowUp"].includes(key)) return false;
 
+		// Don't redirect if a MenuList is open
+		if (window.document.querySelector("[data-floating-menu-content]")) return false;
+
 		// Redirect to the backend
 		return true;
 	}