Select value is reset after submit

[altanbgn]

Hi. I use zod, @radix-ui/react-select, @tanstack/react-query to handle forms and I don't know what is going wrong.

When I fetch data with useQuery, it fills defaultValues which is good. After that, When I submit the form, Select options all goes to null or '' for some reason.

I made sure all the packages are up to date. But the result is still the same.

// BaseFormInputs.tsx

export const baseFormSchemaOptions = {
  accType: z
    .string({
      message: t('validations.required', { 0: t('type') }),
    })
    .optional(),
}

export const baseFormSchema = z.object(baseFormSchemaOptions)

export type BaseForm = z.infer<typeof baseFormSchema>

export const baseFormDefaultValues: BaseForm = {
  accType: '',
}

export default function BaseFormInputs() {
  const form = useFormContext()

  return (
      <FormField
        control={form.control}
        name='accType'
        render={({ field }) => (
          <FormItem>
            <FormLabel>{t('type')}</FormLabel>
            <Select
              onValueChange={field.onChange}
              value={field.value}
              defaultValue={field.value}
            >
              <FormControl>
                <SelectTrigger>
                  <SelectValue placeholder={t('select')} />
                </SelectTrigger>
              </FormControl>
              <SelectContent>
                {Object.entries(ACCOUNT_TYPE).map(([key, value]) => (
                  <SelectItem key={key} value={key}>
                    {t(value)}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </FormItem>
        )}
      />
    )
}

// UpdateMainInfo.tsx
export default function UpdateMainInfo({
  query,
  mutation,
}: {
  query: (code: string) => UseQueryResult<ProductDetails, any>
  mutation: (
    code: string
  ) => UseMutationResult<any, Error, Partial<Product>, unknown>
}) {
  const { data, isFetching } = query(code)
  const form = useForm<BaseForm>({
    resolver: zodResolver(baseFormSchema),
    mode: 'onBlur',
    values: data?.product as BaseForm,
    defaultValues: baseFormDefaultValues,
  })

  const { mutateAsync } = mutation(code)

  const handleSubmit = async (values: BaseForm) => {
    await mutateAsync(values as Product)
    navigate({ to: '..' })
  }

  return (
    <Form {...form}>
      <form
        className='flex flex-col gap-3'
        onSubmit={form.handleSubmit(handleSubmit)}
      >
        <BaseFormInputs />
        <div className='flex flex-row-reverse'>
          <Button type='submit' variant='success'>
            <SaveIcon />
            {t('save')}
          </Button>
        </div>
      </form>
    </Form>
  )
}

[BrendanC23]

Can you provide a CodeSandbox that demonstrates your issue? It's hard to know what's going wrong without that. I would guess that the issue is values is being passed to useForm.

What happens if you just submit the form, but don't call the mutation (leave handleSubmit() empty)?

You can try moving const { data, isFetching } = query(code) to a parent component, and only render <UpdateMainInfo /> once data is populated. Pass data as a prop and set defaultValues to data.product instead of baseFormDefaultValues. This way, you don't need to use values: data?.product.