Fix remaining known Svelte UI regressions

Closes #1040

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

@@ -9,7 +9,7 @@
 </script>
 
 <LayoutRow class="parameter-expose-button">
-	<button class:exposed style:--data-type-color={`var(--color-data-${dataType})`} on:click={action} title={tooltip} tabindex="0" />
+	<button class:exposed style:--data-type-color={`var(--color-data-${dataType})`} on:click={action} title={tooltip} tabindex="-1" />
 </LayoutRow>
 
 <style lang="scss" global>

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

@@ -29,11 +29,11 @@
 	let open = false;
 	let minWidth = 0;
 
-	$: selectedIndex, watchSelectedIndex();
+	$: watchSelectedIndex(selectedIndex);
 	$: watchActiveEntry(activeEntry);
 
 	// Called only when `selectedIndex` is changed from outside this component
-	function watchSelectedIndex() {
+	function watchSelectedIndex(_?: number) {
 		activeEntrySkipWatcher = true;
 		activeEntry = makeActiveEntry();
 	}

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

@@ -33,6 +33,7 @@
 	let macKeyboardLayout = platformIsMac();
 
 	$: inputValue = value;
+
 	$: dispatch("value", inputValue);
 
 	// Select (highlight) all the text. For technical reasons, it is necessary to pass the current text.

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

@@ -32,9 +32,9 @@
 	let activeEntry: MenuListEntry | undefined = undefined;
 	let minWidth = isStyle ? 0 : 300;
 
-	$: fontFamily, fontStyle, watchFont();
+	$: watchFont(fontFamily, fontStyle);
 
-	async function watchFont(): Promise<void> {
+	async function watchFont(..._: string[]): 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;

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

@@ -95,7 +95,10 @@
 			{#if entry.children && entry.children.length > 0}
 				<MenuList
 					on:open={({ detail }) => {
-						if (entry.ref) entry.ref.open = detail;
+						if (entry.ref) {
+							entry.ref.open = detail;
+							entries = entries;
+						}
 					}}
 					open={entry.ref?.open || false}
 					entries={entry.children || []}

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

@@ -64,9 +64,10 @@
 	// "dragging": the user is dragging the slider left/right.
 	let rangeSliderClickDragState: "default" | "mousedown" | "dragging" = "default";
 
-	$: sliderStepValue = isInteger ? (step === undefined ? 1 : step) : "any";
 	$: watchValue(value);
 
+	$: sliderStepValue = isInteger ? (step === undefined ? 1 : step) : "any";
+
 	// Called only when `value` is changed from outside this component
 	function watchValue(value: number | undefined) {
 		// Don't update if the slider is currently being dragged (we don't want the backend fighting with the user's drag)
@@ -130,7 +131,7 @@
 	function onSliderPointerUp() {
 		// User clicked but didn't drag, so we focus the text input element
 		if (rangeSliderClickDragState === "mousedown") {
-			const inputElement = self?.element()?.querySelector("[data-input-element]") as HTMLInputElement | undefined;
+			const inputElement = self?.element();
 			if (!inputElement) return;
 
 			// Set the slider position back to the original position to undo the user moving it

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

@@ -38,29 +38,11 @@
 <LayoutCol class="swatch-pair">
 	<LayoutRow class="primary swatch">
 		<button on:click={clickPrimarySwatch} style:--swatch-color={primary.toRgbaCSS()} data-floating-menu-spawner="no-hover-transfer" tabindex="0" />
-		<ColorPicker
-			open={primaryOpen}
-			on:open={({ detail }) => (primaryOpen = detail)}
-			color={primary}
-			on:color={({ detail }) => {
-				primary = detail;
-				primaryColorChanged(detail);
-			}}
-			direction="Right"
-		/>
+		<ColorPicker open={primaryOpen} on:open={({ detail }) => (primaryOpen = detail)} color={primary} on:color={({ detail }) => primaryColorChanged(detail)} direction="Right" />
 	</LayoutRow>
 	<LayoutRow class="secondary swatch">
 		<button on:click={clickSecondarySwatch} style:--swatch-color={secondary.toRgbaCSS()} data-floating-menu-spawner="no-hover-transfer" tabindex="0" />
-		<ColorPicker
-			open={secondaryOpen}
-			on:open={({ detail }) => (secondaryOpen = detail)}
-			color={secondary}
-			on:color={({ detail }) => {
-				secondary = detail;
-				secondaryColorChanged(detail);
-			}}
-			direction="Right"
-		/>
+		<ColorPicker open={secondaryOpen} on:open={({ detail }) => (secondaryOpen = detail)} color={secondary} on:color={({ detail }) => secondaryColorChanged(detail)} direction="Right" />
 	</LayoutRow>
 </LayoutCol>
 

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

@@ -30,7 +30,7 @@
 		if (self) dispatch("commitText", self.getValue());
 
 		// Required if value is not changed by the parent component upon update:value event
-		self?.setInputElementValue(value);
+		self?.setInputElementValue(self.getValue());
 	}
 
 	function onCancelTextChange() {

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

@@ -40,7 +40,7 @@
 		if (self) dispatch("commitText", self.getValue());
 
 		// Required if value is not changed by the parent component upon update:value event
-		self?.setInputElementValue(value);
+		self?.setInputElementValue(self.getValue());
 	}
 
 	function onCancelTextChange() {

frontend/src/components/widgets/labels/UserInputLabel.svelte

@@ -38,6 +38,7 @@
 	export let requiresLock = false;
 
 	$: keyboardLockInfoMessage = watchKeyboardLockInfoMessage(fullscreen.keyboardLockApiSupported);
+
 	$: displayKeyboardLockNotice = requiresLock && !$fullscreen.keyboardLocked;
 
 	function watchKeyboardLockInfoMessage(keyboardLockApiSupported: boolean): string {