From b31e8f7b6d8c4a6f5bd229efebe59993c9d92b00 Mon Sep 17 00:00:00 2001
From: 0HyperCube <78500760+0HyperCube@users.noreply.github.com>
Date: Sat, 9 Mar 2024 10:58:13 +0000
Subject: [PATCH] Make menu lists searchable (#1499)

* Searchable font list

* Bug fixes and UX polish for edge cases

* More work, still more bugs to fix

* Don't update highlight when not open

* Bug fixes

* Additional bug fixes and code review

* Fix keyboard input being sent to backend

---------

Co-authored-by: Keavon Chambers <keavon@keavon.com>
---
 .../document/document_message_handler.rs      |   2 +-
 .../components/floating-menus/Dialog.svelte   |   2 +-
 .../components/floating-menus/MenuList.svelte | 324 +++++++++++++++---
 .../src/components/layout/FloatingMenu.svelte |   8 +-
 frontend/src/components/panels/Layers.svelte  |   2 +-
 .../widgets/buttons/TextButton.svelte         |   1 -
 .../widgets/inputs/DropdownInput.svelte       |   5 +-
 .../widgets/inputs/FontInput.svelte           |  11 +-
 .../widgets/inputs/TextInput.svelte           |  14 +-
 .../components/window/workspace/Panel.svelte  |   2 +-
 frontend/src/io-managers/input.ts             |   3 +
 frontend/src/wasm-communication/messages.ts   |   5 +-
 12 files changed, 297 insertions(+), 82 deletions(-)

diff --git a/editor/src/messages/portfolio/document/document_message_handler.rs b/editor/src/messages/portfolio/document/document_message_handler.rs
index 450e30a3..a2fd87c7 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/Dialog.svelte b/frontend/src/components/floating-menus/Dialog.svelte
index 1beecbbb..f8040a95 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 f7cc172f..93727bc2 100644
--- a/frontend/src/components/floating-menus/MenuList.svelte
+++ b/frontend/src/components/floating-menus/MenuList.svelte
@@ -1,13 +1,15 @@
 <svelte:options accessors={true} />
 
 <script lang="ts">
-	import { createEventDispatcher } 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";
+	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";
@@ -15,8 +17,9 @@
 
 	let self: FloatingMenu | undefined;
 	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;
@@ -29,21 +32,104 @@
 	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: MenuList[][] = [];
+	let search = "";
+
 	let highlighted = activeEntry as MenuListEntry | undefined;
 	let virtualScrollingEntriesStart = 0;
 
 	// Called only when `open` is changed from outside this component
 	$: watchOpen(open);
-	$: watchRemeasureWidth(entries, drawIcon);
+	$: watchEntries(entries);
+	$: watchRemeasureWidth(filteredEntries, drawIcon);
+	$: watchHighlightedWithSearch(filteredEntries, open);
 
-	$: virtualScrollingTotalHeight = entries.length === 0 ? 0 : entries[0].length * virtualScrollingEntryHeight;
+	$: 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 = 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;
 
+	// 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) {
+			// Allows the scrollable area to expand if necessary
+			await tick();
+
+			const flattened = filteredEntries.flat();
+			const highlightedFound = highlighted?.label && flattened.map((entry) => entry.label).includes(highlighted.label);
+			const newHighlighted = highlightedFound ? highlighted : flattened[0];
+			setHighlighted(newHighlighted);
+		}
+	}
+
+	// Detect when the user types, which creates a search box
+	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
+		e.stopPropagation();
+		e.preventDefault();
+
+		// 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 (after the if condition becomes true) before the search box exists
+		await tick();
+
+		// Get the search box element
+		const searchElement = searchTextInput?.element();
+		if (!searchTextInput || !searchElement) return;
+
+		// 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, entry: MenuListEntry): boolean {
+		return !search || entry.label.toLowerCase().includes(search.toLowerCase());
+	}
+
 	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) {
@@ -55,6 +141,11 @@
 		virtualScrollingEntriesStart = (e.target as HTMLElement)?.scrollTop || 0;
 	}
 
+	function getChildReference(menuListEntry: MenuListEntry): MenuList | undefined {
+		const index = filteredEntries.flat().indexOf(menuListEntry);
+		return childReferences.flat().filter((x) => x)[index];
+	}
+
 	function onEntryClick(menuListEntry: MenuListEntry) {
 		// Call the action if available
 		if (menuListEntry.action) menuListEntry.action();
@@ -63,8 +154,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 +166,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 +176,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,49 +186,82 @@
 	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
-	export function keydown(e: KeyboardEvent, submenu: boolean): boolean {
+	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);
+	}
+
+	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 = false): boolean {
 		// Interactive menus should keep the active entry the same as the highlighted one
 		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 openSubmenu = (highlightedEntry: MenuListEntry) => {
-			if (highlightedEntry.ref && highlightedEntry.children?.length) {
-				highlightedEntry.ref.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]);
-			}
-		};
+		const flatEntries = filteredEntries.flat().filter((entry) => !entry.disabled);
+		const openChild = flatEntries.findIndex((entry) => (entry.children?.length ?? 0) > 0 && getChildReference(entry)?.open);
 
+		// 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 = flatEntries[openChild].ref?.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 (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;
@@ -147,13 +274,26 @@
 
 			const newEntry = flatEntries[newIndex];
 			setHighlighted(newEntry);
-		} else if (menuOpen && e.key === "Escape") {
-			// Close menu with escape key
+
+			e.preventDefault();
+
+			// 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);
@@ -163,26 +303,81 @@
 
 			// Enter should close the entire menu stack
 			return true;
-		} else if (menuOpen && highlighted && e.key === "ArrowRight") {
-			// Right arrow opens a submenu
-			openSubmenu(highlighted);
-		} else if (menuOpen && e.key === "ArrowLeft") {
-			// Left arrow closes a submenu
-			if (submenu) open = false;
 		}
 
-		// By default, keep the menu stack open
+		// 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();
+
+			// 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();
+			}
+
+			// 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;
+		}
+
+		// If nothing happened, keep the menu stack open
 		return false;
 	}
 
 	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?.();
+		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) {
-		scroller?.div()?.scrollTo(0, distanceDown);
+		scroller?.div?.()?.scrollTo(0, distanceDown);
 	}
 </script>
 
@@ -199,6 +394,9 @@
 	scrollableY={scrollableY && virtualScrollingEntryHeight === 0}
 	bind:this={self}
 >
+	{#if search.length > 0}
+		<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`. -->
 	<LayoutCol
@@ -211,10 +409,10 @@
 			<LayoutRow class="scroll-spacer" styles={{ height: `${virtualScrollingStartIndex * virtualScrollingEntryHeight}px` }} />
 		{/if}
 		{#each entries as section, sectionIndex (sectionIndex)}
-			{#if sectionIndex > 0}
+			{#if includeSeparator(entries, section, sectionIndex, search)}
 				<Separator type="Section" direction="Vertical" />
 			{/if}
-			{#each virtualScrollingEntryHeight ? section.slice(virtualScrollingStartIndex, virtualScrollingEndIndex) : section 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) }}
@@ -247,8 +445,21 @@
 					{/if}
 
 					{#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} />
+						<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}
+							{minWidth}
+							{drawIcon}
+							{scrollableY}
+							bind:this={childReferences[sectionIndex][entryIndex + startIndex]}
+						/>
 					{/if}
 				</LayoutRow>
 			{/each}
@@ -261,6 +472,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/layout/FloatingMenu.svelte b/frontend/src/components/layout/FloatingMenu.svelte
index 71d868f6..dc4cb4a1 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 373cacad..df5bc5a7 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/buttons/TextButton.svelte b/frontend/src/components/widgets/buttons/TextButton.svelte
index 3ef6888b..c4a439c8 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 338da687..2063be49 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 }>();
 
@@ -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>
 
@@ -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 931bbbb0..e839f978 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/components/widgets/inputs/TextInput.svelte b/frontend/src/components/widgets/inputs/TextInput.svelte
index 2c9b0d1b..ecc696b1 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;
 
@@ -50,11 +54,15 @@
 	export function focus() {
 		self?.focus();
 	}
+
+	export function element(): HTMLInputElement | HTMLTextAreaElement | undefined {
+		return self?.element();
+	}
 </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
@@ -71,6 +79,8 @@
 
 <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 cf941ee7..f35e8044 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>
 
diff --git a/frontend/src/io-managers/input.ts b/frontend/src/io-managers/input.ts
index 8953f09b..8ea0d752 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;
 	}
diff --git a/frontend/src/wasm-communication/messages.ts b/frontend/src/wasm-communication/messages.ts
index f5801b4f..3df903e1 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;
@@ -713,12 +711,11 @@ export type MenuListEntry = MenuEntryCommon & {
 	action?: () => void;
 	children?: MenuListEntry[][];
 
+	value: string;
 	shortcutRequiresLock?: boolean;
-	value?: string;
 	disabled?: boolean;
 	tooltip?: string;
 	font?: URL;
-	ref?: MenuList;
 };
 
 export class CurveManipulatorGroup {