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:
parent
d86465cbd7
commit
bad314b5e3
|
|
@ -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)"
|
||||
>
|
||||
|
|
|
|||
Loading…
Reference in New Issue