Clean up Vue component refs (#813)

* Clean up Vue component refs

* Second pass of code improvements

frontend/src/components/widgets/inputs/CheckboxInput.vue

@@ -1,7 +1,7 @@
 <template>
 	<LayoutRow class="checkbox-input">
 		<input type="checkbox" :id="`checkbox-input-${id}`" :checked="checked" @change="(e) => $emit('update:checked', (e.target as HTMLInputElement).checked)" />
-		<label :for="`checkbox-input-${id}`" tabindex="0" @keydown.enter="(e) => ((e.target as HTMLElement).previousSibling as HTMLInputElement).click()" :title="tooltip">
+		<label :for="`checkbox-input-${id}`" tabindex="0" @keydown.enter="(e) => toggleCheckboxFromLabel(e)" :title="tooltip">
 			<LayoutRow class="checkbox-box">
 				<IconLabel :icon="icon" />
 			</LayoutRow>
@@ -80,6 +80,11 @@ export default defineComponent({
 		isChecked() {
 			return this.checked;
 		},
+		toggleCheckboxFromLabel(e: KeyboardEvent) {
+			const target = (e.target || undefined) as HTMLLabelElement | undefined;
+			const previousSibling = (target?.previousSibling || undefined) as HTMLInputElement | undefined;
+			previousSibling?.click();
+		},
 	},
 	components: {
 		IconLabel,

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

@@ -6,9 +6,8 @@
 			:style="{ minWidth: `${minWidth}px` }"
 			:title="tooltip"
 			@click="() => !disabled && (open = true)"
-			@blur="(e: FocusEvent) => blur(e)"
+			@blur="(e: FocusEvent) => unFocusDropdownBox(e)"
 			@keydown="(e: KeyboardEvent) => keydown(e)"
-			ref="dropdownBox"
 			tabindex="0"
 			data-hover-menu-spawner
 		>
@@ -155,10 +154,12 @@ export default defineComponent({
 			return DASH_ENTRY;
 		},
 		keydown(e: KeyboardEvent) {
-			(this.$refs.menuList as typeof MenuList).keydown(e, false);
+			(this.$refs.menuList as typeof MenuList | undefined)?.keydown(e, false);
 		},
-		blur(e: FocusEvent) {
-			if ((e.target as HTMLElement).closest("[data-dropdown-input]") !== this.$el) this.open = false;
+		unFocusDropdownBox(e: FocusEvent) {
+			const blurTarget = (e.target as HTMLDivElement | undefined)?.closest("[data-dropdown-input]");
+			const self: HTMLDivElement | undefined = this.$el;
+			if (blurTarget !== self) this.open = false;
 		},
 	},
 	components: {

frontend/src/components/widgets/inputs/FieldInput.vue

@@ -140,6 +140,28 @@ export default defineComponent({
 			macKeyboardLayout: platformIsMac(),
 		};
 	},
+	methods: {
+		// Select (highlight) all the text. For technical reasons, it is necessary to pass the current text.
+		selectAllText(currentText: string) {
+			const inputElement = this.$refs.input as HTMLInputElement | HTMLTextAreaElement | undefined;
+			if (!inputElement) return;
+
+			// Setting the value directly is required to make `inputElement.select()` work
+			inputElement.value = currentText;
+
+			inputElement.select();
+		},
+		unFocus() {
+			(this.$refs.input as HTMLInputElement | HTMLTextAreaElement | undefined)?.blur();
+		},
+		getInputElementValue(): string | undefined {
+			return (this.$refs.input as HTMLInputElement | HTMLTextAreaElement | undefined)?.value;
+		},
+		setInputElementValue(value: string) {
+			const inputElement = this.$refs.input as HTMLInputElement | HTMLTextAreaElement | undefined;
+			if (inputElement) inputElement.value = value;
+		},
+	},
 	computed: {
 		inputValue: {
 			get() {

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

@@ -5,7 +5,6 @@
 			<IconLabel class="dropdown-arrow" :icon="'DropdownArrow'" />
 		</LayoutRow>
 		<MenuList
-			ref="menulist"
 			v-model:activeEntry="activeEntry"
 			v-model:open="open"
 			:entries="[entries]"
@@ -13,6 +12,7 @@
 			:virtualScrollingEntryHeight="isStyle ? 0 : 20"
 			:scrollableY="true"
 			@naturalWidth="(newNaturalWidth: number) => (isStyle && (minWidth = newNaturalWidth))"
+			ref="menuList"
 		></MenuList>
 	</LayoutRow>
 </template>
@@ -74,8 +74,6 @@ import { defineComponent, nextTick, type PropType } from "vue";
 import { type MenuListEntry } from "@/wasm-communication/messages";
 
 import MenuList from "@/components/floating-menus/MenuList.vue";
-import type FloatingMenu from "@/components/layout/FloatingMenu.vue";
-import type LayoutCol from "@/components/layout/LayoutCol.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
@@ -105,29 +103,26 @@ export default defineComponent({
 		this.highlighted = this.activeEntry;
 	},
 	methods: {
-		floatingMenu() {
-			return this.$refs.floatingMenu as typeof FloatingMenu;
-		},
-		scroller() {
-			return ((this.$refs.menulist as typeof MenuList).$refs.scroller as typeof LayoutCol)?.$el as HTMLElement;
-		},
-		async setOpen() {
+		async setOpen(): Promise<void> {
 			this.open = true;
 
-			// Scroll to the active entry (the scroller div does not yet exist so we must wait for vue to render)
+			// Scroll to the active entry (the scroller div does not yet exist so we must wait for Vue to render)
 			await nextTick();
+
 			if (this.activeEntry) {
 				const index = this.entries.indexOf(this.activeEntry);
-				this.scroller()?.scrollTo(0, Math.max(0, index * 20 - 190));
+				(this.$refs.menuList as typeof MenuList | undefined)?.scrollViewTo(0, Math.max(0, index * 20 - 190));
 			}
 		},
-		toggleOpen() {
-			if (this.disabled) return;
-			this.open = !this.open;
-			if (this.open) this.setOpen();
+		toggleOpen(): void {
+			if (!this.disabled) {
+				this.open = !this.open;
+
+				if (this.open) this.setOpen();
+			}
 		},
-		keydown(e: KeyboardEvent) {
-			(this.$refs.menulist as typeof MenuList).keydown(e, false);
+		keydown(e: KeyboardEvent): void {
+			(this.$refs.menuList as typeof MenuList | undefined)?.keydown(e, false);
 		},
 		async selectFont(newName: string): Promise<void> {
 			let fontFamily;

frontend/src/components/widgets/inputs/MenuBarInput.vue

@@ -2,8 +2,8 @@
 	<div class="menu-bar-input" data-menu-bar-input>
 		<div class="entry-container" v-for="(entry, index) in entries" :key="index">
 			<div
-				@click="(e: MouseEvent) => onClick(entry, e.target || undefined)"
-				@blur="(e: FocusEvent) => blur(entry, e.target || undefined)"
+				@click="(e: MouseEvent) => clickEntry(entry, e)"
+				@blur="(e: FocusEvent) => unFocusEntry(entry, e)"
 				@keydown="(e: KeyboardEvent) => entry.ref?.keydown(e, false)"
 				class="entry"
 				:class="{ open: entry.ref?.isOpen }"
@@ -20,7 +20,7 @@
 				:direction="'Bottom'"
 				:minWidth="240"
 				:drawIcon="true"
-				:ref="(ref: MenuListInstance) => ref && (entry.ref = ref)"
+				:ref="(ref: MenuListInstance): void => (ref && (entry.ref = ref), undefined)"
 			/>
 		</div>
 	</div>
@@ -118,7 +118,7 @@ export default defineComponent({
 		});
 	},
 	methods: {
-		onClick(menuListEntry: MenuListEntry, target: EventTarget | undefined) {
+		clickEntry(menuListEntry: MenuListEntry, e: MouseEvent) {
 			// If there's no menu to open, trigger the action but don't try to open its non-existant children
 			if (!menuListEntry.children || menuListEntry.children.length === 0) {
 				if (menuListEntry.action && !menuListEntry.disabled) menuListEntry.action();
@@ -127,13 +127,15 @@ export default defineComponent({
 			}
 
 			// Focus the target so that keyboard inputs are sent to the dropdown
-			(target as HTMLElement)?.focus();
+			(e.target as HTMLElement | undefined)?.focus();
 
 			if (menuListEntry.ref) menuListEntry.ref.isOpen = true;
 			else throw new Error("The menu bar floating menu has no associated ref");
 		},
-		blur(menuListEntry: MenuListEntry, target: EventTarget | undefined) {
-			if ((target as HTMLElement)?.closest("[data-menu-bar-input]") !== this.$el && menuListEntry.ref) menuListEntry.ref.isOpen = false;
+		unFocusEntry(menuListEntry: MenuListEntry, e: FocusEvent) {
+			const blurTarget = (e.target as HTMLElement | undefined)?.closest("[data-menu-bar-input]");
+			const self: HTMLDivElement | undefined = this.$el;
+			if (blurTarget !== self && menuListEntry.ref) menuListEntry.ref.isOpen = false;
 		},
 	},
 	data() {

frontend/src/components/widgets/inputs/NumberInput.vue

@@ -130,15 +130,12 @@ export default defineComponent({
 
 			this.editing = true;
 
-			const inputElement = (this.$refs.fieldInput as typeof FieldInput).$refs.input as HTMLInputElement;
-			// Setting the value directly is required to make `inputElement.select()` work
-			inputElement.value = this.text;
-			inputElement.select();
+			(this.$refs.fieldInput as typeof FieldInput | undefined)?.selectAllText(this.text);
 		},
 		// Called only when `value` is changed from the <input> element via user input and committed, either with the
-		// enter key (via the `change` event) or when the <input> element is defocused (with the `blur` event binding)
+		// enter key (via the `change` event) or when the <input> element is unfocused (with the `blur` event binding)
 		onTextChanged() {
-			// The `inputElement.blur()` call at the bottom of this function causes itself to be run again, so this check skips a second run
+			// The `unFocus()` call at the bottom of this function and in `onCancelTextChange()` causes this function to be run again, so this check skips a second run
 			if (!this.editing) return;
 
 			const parsed = parseFloat(this.text);
@@ -148,16 +145,14 @@ export default defineComponent({
 
 			this.editing = false;
 
-			const inputElement = (this.$refs.fieldInput as typeof FieldInput)?.$refs?.input as HTMLInputElement | undefined;
-			inputElement?.blur();
+			(this.$refs.fieldInput as typeof FieldInput | undefined)?.unFocus();
 		},
 		onCancelTextChange() {
 			this.updateValue(undefined);
 
 			this.editing = false;
 
-			const inputElement = (this.$refs.fieldInput as typeof FieldInput).$refs.input as HTMLInputElement;
-			inputElement.blur();
+			(this.$refs.fieldInput as typeof FieldInput | undefined)?.unFocus();
 		},
 		onIncrement(direction: IncrementDirection) {
 			if (this.value === undefined) return;

frontend/src/components/widgets/inputs/TextAreaInput.vue

@@ -50,25 +50,25 @@ export default defineComponent({
 			this.editing = true;
 		},
 		// Called only when `value` is changed from the <textarea> element via user input and committed, either
-		// via the `change` event or when the <input> element is defocused (with the `blur` event binding)
+		// via the `change` event or when the <input> element is unfocused (with the `blur` event binding)
 		onTextChanged() {
-			// The `inputElement.blur()` call in `onCancelTextChange()` causes itself to be run again, so this if statement skips a second run
+			// The `unFocus()` call in `onCancelTextChange()` causes itself to be run again, so this if statement skips a second run
 			if (!this.editing) return;
 
 			this.onCancelTextChange();
 
 			// TODO: Find a less hacky way to do this
-			const inputElement = (this.$refs.fieldInput as typeof FieldInput).$refs.input as HTMLTextAreaElement;
-			this.$emit("commitText", inputElement.value);
+			const inputElement = this.$refs.fieldInput as typeof FieldInput | undefined;
+			if (!inputElement) return;
+			this.$emit("commitText", inputElement.getInputElementValue());
 
 			// Required if value is not changed by the parent component upon update:value event
-			inputElement.value = this.value;
+			inputElement.setInputElementValue(this.value);
 		},
 		onCancelTextChange() {
 			this.editing = false;
 
-			const inputElement = (this.$refs.fieldInput as typeof FieldInput).$refs.input as HTMLTextAreaElement;
-			inputElement.blur();
+			(this.$refs.fieldInput as typeof FieldInput | undefined)?.unFocus();
 		},
 	},
 	components: { FieldInput },

frontend/src/components/widgets/inputs/TextInput.vue

@@ -55,31 +55,28 @@ export default defineComponent({
 		onTextFocused() {
 			this.editing = true;
 
-			const inputElement = (this.$refs.fieldInput as typeof FieldInput).$refs.input as HTMLInputElement;
-			// Setting the value directly is required to make `inputElement.select()` work
-			inputElement.value = this.text;
-			inputElement.select();
+			(this.$refs.fieldInput as typeof FieldInput | undefined)?.selectAllText(this.text);
 		},
 		// Called only when `value` is changed from the <input> element via user input and committed, either with the
-		// enter key (via the `change` event) or when the <input> element is defocused (with the `blur` event binding)
+		// enter key (via the `change` event) or when the <input> element is unfocused (with the `blur` event binding)
 		onTextChanged() {
-			// The `inputElement.blur()` call in `onCancelTextChange()` causes itself to be run again, so this if statement skips a second run
+			// The `unFocus()` call in `onCancelTextChange()` causes itself to be run again, so this if statement skips a second run
 			if (!this.editing) return;
 
 			this.onCancelTextChange();
 
 			// TODO: Find a less hacky way to do this
-			const inputElement = (this.$refs.fieldInput as typeof FieldInput).$refs.input as HTMLInputElement;
-			this.$emit("commitText", inputElement.value);
+			const inputElement = this.$refs.fieldInput as typeof FieldInput | undefined;
+			if (!inputElement) return;
+			this.$emit("commitText", inputElement.getInputElementValue());
 
 			// Required if value is not changed by the parent component upon update:value event
-			inputElement.value = this.value;
+			inputElement.setInputElementValue(this.value);
 		},
 		onCancelTextChange() {
 			this.editing = false;
 
-			const inputElement = (this.$refs.fieldInput as typeof FieldInput).$refs.input as HTMLInputElement;
-			inputElement.blur();
+			(this.$refs.fieldInput as typeof FieldInput | undefined)?.unFocus();
 		},
 	},
 	components: { FieldInput },