react hook forms and material ui: reset() not working after successfull form submit - material-ui

Question

I am trying to submit a form using react hook forms. After submit i want to clear all the fields. I have read about using reset(). But its not working
import React, { Fragment } from "react";
import { useForm } from "react-hook-form";
import { yupResolver } from "#hookform/resolvers/yup";
import * as Yup from "yup";
import "react-toastify/dist/ReactToastify.css";
import {
Paper,
Box,
Grid,
TextField,
Typography,
Button,
} from "#material-ui/core";
export default function ResetPassword() {
const validationSchema = Yup.object().shape({
old_password: Yup.string().required("Password is required"),
new_password1: Yup.string().required("Password is required"),
new_password2: Yup.string().required("Password is required"),
});
const { register, handleSubmit, reset } = useForm({
resolver: yupResolver(validationSchema),
});
const onSubmit = (data) => {
console.log(data);
reset();
};
return (
<Fragment>
<Paper variant="outlined">
<Box px={3} py={2}>
<Typography variant="h6" align="center" margin="dense">
Change Password
</Typography>
<Grid container spacing={1}>
<Grid item xs={12} sm={12}>
<TextField
required
label="Current Password"
type="password"
{...register("old_password")}
/>
</Grid>
<Grid item xs={12} sm={12}>
<TextField
required
label="New Password"
type="password"
{...register("new_password1")}
/>
</Grid>
<Grid item xs={12} sm={12}>
<TextField
required
label="Confirm New Password"
type="password"
{...register("new_password2")}
/>
</Grid>
</Grid>
<Box mt={3}>
<Button
variant="contained"
color="primary"
onClick={handleSubmit(onSubmit)}
>
Change Password
</Button>
</Box>
</Box>
</Paper>
</Fragment>
);
}
How to reset the fields after submit

Answer 1

You have to use RHF's <Controller /> component here as register won't work with MUI's <Textfield /> because it is an external controlled component. You can find here more information about integrating UI libraries.
One important thing is to pass defaultValues to useForm, as this is required when using reset for external controlled components (Docs).
You will need to pass defaultValues to useForm in order to reset the
Controller components' value.
export default function ResetPassword() {
const validationSchema = Yup.object().shape({
old_password: Yup.string().required("Password is required"),
new_password1: Yup.string().required("Password is required"),
new_password2: Yup.string().required("Password is required")
});
const { control, handleSubmit, reset } = useForm({
resolver: yupResolver(validationSchema),
defaultValues: {
old_password: "",
new_password1: "",
new_password2: ""
}
});
const onSubmit = (data) => {
console.log(data);
reset();
};
return (
<Fragment>
<Paper variant="outlined">
<Box px={3} py={2}>
<Typography variant="h6" align="center" margin="dense">
Change Password
</Typography>
<Grid container spacing={1}>
<Grid item xs={12} sm={12}>
<Controller
name="old_password"
control={control}
render={({ field: { ref, ...field } }) => (
<TextField
{...field}
inputRef={ref}
fullWidth
required
label="Current Password"
type="password"
/>
)}
/>
</Grid>
<Grid item xs={12} sm={12}>
<Controller
name="new_password1"
control={control}
render={({ field: { ref, ...field } }) => (
<TextField
{...field}
inputRef={ref}
fullWidth
required
label="New Password"
type="password"
/>
)}
/>
</Grid>
<Grid item xs={12} sm={12}>
<Controller
name="new_password2"
control={control}
render={({ field: { ref, ...field } }) => (
<TextField
{...field}
inputRef={ref}
fullWidth
required
label="Confirm New Password"
type="password"
/>
)}
/>
</Grid>
</Grid>
<Box mt={3}>
<Button
variant="contained"
color="primary"
onClick={handleSubmit(onSubmit)}
>
Change Password
</Button>
</Box>
</Box>
</Paper>
</Fragment>
);
}