1

I have a TS NextJS13 React-Hook-Form with React-Select in Controller and Yup Resolver. Since React Hook for do not allow to use Undefined for Controller's default values, I have set it to Null. But in last version of Yup Resolver (3.1.1) your schema should be used as Form Type (https://github.com/react-hook-form/resolvers/releases/tag/v3.1.1) So if I have to make my Select Component in the Yup Schema .nullable, to be able to use the NULL default value. But this allows the form to be submitted without a valid selected value which should be an Object {value:string, label:string}

Example working with 3.1.0:

.object()
.shape({
label: yup.string().required("Tag is required"),
value: yup.string().required("Tag is required"),
})
.required()
});

interface SelectOptionType {
label: string;
value: string;
}
interface InputType {
category: SelectOptionType | null;
}

useForm<InputType>({
resolver: yupResolver(schema),
defaultValues: {
category: null,
}})

In Yup 3.1.1. The should be removed and the default value should be added to the schema, which would break the logic of the form and allow submission with no value in the select.

I have already tried the solution from here (How to allow `null` as default value in Yup schema, while still not allowing `null` to be submitted?) but it seems that yup now longer accepts .nullable(true).

0 Answers0