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.
This commit is contained in:
kolaente
2026-01-08 18:19:56 +01:00
parent d86465cbd7
commit bad314b5e3

View File

@@ -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)"
>