From 33b5c0f5f41f7cc3a00f32428eb916adf20c8504 Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Sun, 12 Feb 2023 01:01:40 -0800
Subject: [PATCH] Svelte: Fix FontInput component infinite loop

---
 .../widgets/inputs/FontInput.svelte           | 22 +++++++------------
 .../widgets/inputs/MenuBarInput.svelte        |  5 ++++-
 .../components/widgets/inputs/FontInput.vue   |  4 ----
 3 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/frontend-svelte/src/components/widgets/inputs/FontInput.svelte b/frontend-svelte/src/components/widgets/inputs/FontInput.svelte
index 9487020e..42744220 100644
--- a/frontend-svelte/src/components/widgets/inputs/FontInput.svelte
+++ b/frontend-svelte/src/components/widgets/inputs/FontInput.svelte
@@ -30,21 +30,16 @@
 	let open = false;
 	let entries: MenuListEntry[] = [];
 	let activeEntry: MenuListEntry | undefined = undefined;
-	let highlighted: MenuListEntry | undefined = undefined;
 	let minWidth = isStyle ? 0 : 300;
 
-	$: fontFamily,
-		(async () => {
-			entries = await getEntries();
-			activeEntry = getActiveEntry(entries);
-			highlighted = activeEntry;
-		})();
-	$: fontStyle,
-		async () => {
-			entries = await getEntries();
-			activeEntry = getActiveEntry(entries);
-			highlighted = activeEntry;
-		};
+	$: fontFamily, fontStyle, watchFont();
+
+	async function watchFont(): Promise<void> {
+		// We set this function's result to a local variable to avoid reading from `entries` which causes Svelte to trigger an update that results in an infinite loop
+		const newEntries = await getEntries();
+		entries = newEntries;
+		activeEntry = getActiveEntry(newEntries);
+	}
 
 	async function setOpen(): Promise<void> {
 		open = true;
@@ -106,7 +101,6 @@
 		entries = await getEntries();
 
 		activeEntry = getActiveEntry(entries);
-		highlighted = activeEntry;
 	});
 </script>
 
diff --git a/frontend-svelte/src/components/widgets/inputs/MenuBarInput.svelte b/frontend-svelte/src/components/widgets/inputs/MenuBarInput.svelte
index 39b60aab..da5cf7ca 100644
--- a/frontend-svelte/src/components/widgets/inputs/MenuBarInput.svelte
+++ b/frontend-svelte/src/components/widgets/inputs/MenuBarInput.svelte
@@ -77,6 +77,7 @@
 <div class="menu-bar-input" bind:this={self} data-menu-bar-input>
 	{#each entries as entry, index (index)}
 		<div class="entry-container">
+			<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 			<div
 				on:click={(e) => clickEntry(entry, e)}
 				on:keydown={(e) => entry.ref?.keydown(e, false)}
@@ -94,7 +95,9 @@
 			</div>
 			{#if entry.children && entry.children.length > 0}
 				<MenuList
-					on:open={(e) => (entry.ref.isOpen = e.detail)}
+					on:open={(e) => {
+						if (entry.ref) entry.ref.isOpen = e.detail;
+					}}
 					open={entry.ref?.isOpen || false}
 					entries={entry.children || []}
 					direction="Bottom"
diff --git a/frontend/src/components/widgets/inputs/FontInput.vue b/frontend/src/components/widgets/inputs/FontInput.vue
index 9374b558..11073d57 100644
--- a/frontend/src/components/widgets/inputs/FontInput.vue
+++ b/frontend/src/components/widgets/inputs/FontInput.vue
@@ -105,7 +105,6 @@ export default defineComponent({
 			open: false,
 			entries: [] as MenuListEntry[],
 			activeEntry: undefined as MenuListEntry | undefined,
-			highlighted: undefined as MenuListEntry | undefined,
 			entriesStart: 0,
 			minWidth: this.isStyle ? 0 : 300,
 		};
@@ -113,7 +112,6 @@ export default defineComponent({
 	async mounted() {
 		this.entries = await this.getEntries();
 		this.activeEntry = this.getActiveEntry(this.entries);
-		this.highlighted = this.activeEntry;
 	},
 	methods: {
 		async setOpen(): Promise<void> {
@@ -175,12 +173,10 @@ export default defineComponent({
 		async fontFamily() {
 			this.entries = await this.getEntries();
 			this.activeEntry = this.getActiveEntry(this.entries);
-			this.highlighted = this.activeEntry;
 		},
 		async fontStyle() {
 			this.entries = await this.getEntries();
 			this.activeEntry = this.getActiveEntry(this.entries);
-			this.highlighted = this.activeEntry;
 		},
 	},
 	components: {