From bad314b5e36abdb0c799ff44a1c83e5cc84538d4 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 8 Jan 2026 18:19:56 +0100
Subject: [PATCH] fix(frontend): make FormField value binding conditional

When FormField is used without v-model (modelValue undefined), the
component was clearing user input on re-render. This broke login forms
that access the input value directly via refs for browser autofill
compatibility.

Now the value attribute is only bound when modelValue is explicitly
provided, allowing native input behavior when v-model isn't used.
---
 frontend/src/components/input/FormField.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/input/FormField.vue b/frontend/src/components/input/FormField.vue
index fb7335928..efc2e48db 100644
--- a/frontend/src/components/input/FormField.vue
+++ b/frontend/src/components/input/FormField.vue
@@ -33,6 +33,16 @@ const controlClasses = computed(() => [
 	{'is-expanded': hasAddon.value},
 ])
 
+// Only bind value when modelValue is explicitly provided (not undefined)
+// This allows the component to be used without v-model for native input behavior
+const inputBindings = computed(() => {
+	const bindings: Record<string, unknown> = {}
+	if (props.modelValue !== undefined) {
+		bindings.value = props.modelValue
+	}
+	return bindings
+})
+
 // Expose input element for direct access (needed for browser autofill workarounds)
 const inputRef = ref<HTMLInputElement | null>(null)
 defineExpose({
@@ -57,8 +67,7 @@ defineExpose({
 				<input
 					:id="inputId"
 					ref="inputRef"
-					v-bind="$attrs"
-					:value="modelValue"
+					v-bind="{ ...$attrs, ...inputBindings }"
 					class="input"
 					@input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
 				>