'React hook form V7 | reset form | material ui Autocomple
I have a react hook form with controller and I am also using matrail-ui autocomplete
When I reset my react hook form it reset the value of the form but the displaying value is still there.
<Controller
control={control}
name="account"
render={({ field: { onChange, value, ...field } }) => (
<Autocomplete
onChange={(event, item) => {
onChange(item);
}}
options={account}
getOptionLabel={item => item.value}
renderInput={params => (
<TextField
{...field}
{...params}
value={value}
label="Account"
variant="outlined"
error={!!errors.account}
/>
)}
/>
)}
/>
const account: IObject[] = [
{ id: 1, value: 'SUITE' },
{ id: 2, value: 'PACKARD' },
{ id: 3, value: 'PACKAR' },
{ id: 4, value: 'OFFERT' },
{ id: 5, value: 'ERREUR' },
{ id: 6, value: 'ENC' },
{ id: 7, value: 'PERM' },
{ id: 8, value: 'ADMOFFERT' },
{ id: 9, value: 'ADMINIS' },
{ id: 10, value: 'ADM ' },
];
const {
control,
handleSubmit,
reset,
formState: { errors },
} = useForm<FormValues>({
resolver: yupResolver(validationSchema),
});
function onReset() {
reset();
}
I want to clear the form and the displaying value.
It is look like the option label is not refreshing.
What I am doing wrong ?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|