PIN Input not clearing after form reset

[abhiburk]

I am following the https://www.shadcn-vue.com/docs/components/pin-input.html where the resetForm is not working on the PinInput component. It does reset the form but I think the input values are still visible in 4 OTP fields. Even formValues seems to be not working as expected.

const onSubmit = async (values, { resetForm, setFieldValue }) => {
    let code = values.pin.join('');
    closeDialog();
    resetForm();
};
const formValues = {
    pin: [],
};
<Form v-slot="{ setFieldValue, values, isSubmitting }" :validation-schema="formSchema" class="space-y-6"
    @submit="onSubmit" :initial-values="formValues">
    <FormField v-slot="{ componentField }" name="pin">
        <FormItem>
            <FormControl>
                <PinInput :name="componentField.name" id="pin-input" v-model="pin"
                    class="flex gap-2 items-center mt-1" type="number" @complete="handleComplete"
                    @update:model-value="(arrStr) => {
                        setFieldValue('pin', arrStr.filter(Boolean))
                    }">
                    <PinInputGroup class="gap-6">
                        <template v-for="(id, index) in 4" :key="id">
                            <PinInputInput class="rounded-md border h-12 w-12" :index="index" />
                        </template>
                    </PinInputGroup>
                </PinInput>
            </FormControl>
        </FormItem>
    </FormField>
    <Button type="submit" class="w-full" :loading="isSubmitting"
        :disabled="isSubmitting || values.pin.length != 4">
        Verify
    </Button>
</Form>

[abhiburk]

Ok I had to take ref on the input field

const pin = ref(formValues.pin);
<PinInputInput :ref="pin" class="rounded-md border h-12 w-12"  :index="index" />

and then on submit

pin.value = []
closeDialog();
resetForm();

[sadeghbarati]

Based on PIN Input Form example https://www.shadcn-vue.com/docs/components/pin-input#form

You can use useForm, initialValues like

const { handleSubmit, setFieldValue } = useForm({
  validationSchema: formSchema,
  initialValues: {
    pin: [],
  },
})

Check this Stackblitz

https://stackblitz.com/edit/gzmsch?file=src%2FApp.vue

[abhiburk]

I am using Dialog here and inside that I am using PinInput in one of your threads, you recommend using Form for dialog feature. So I am using Form and not useForm.

Also I noticed there is issue in the form example, may be some syntax error

<PinInput
    id="pin-input"
    v-model="value!" <--- here
    placeholder="○"
    class="flex gap-2 items-center mt-1"
    otp <--- this
    type="number"
    :name="componentField.name"
    @complete="handleComplete"
    @update:model-value="(arrStr) => {
        setFieldValue('pin', arrStr.filter(Boolean))
    }"
>

[sadeghbarati]

Sry that was a mistake using v-model in that example

You need to use :model-value instead

Also I'll share a Stackblitz with Dialog + PIN Input example here

[sadeghbarati]

@abhiburk

https://stackblitz.com/edit/b1lkby?file=src%2FApp.vue

[abhiburk]

Thank You @sadeghbarati. You are awesome :-)