Reset selected values from react-select within react-hook-form on submit?

Question

I'm in the process of replacing some select inputs in my app to use react-select. Prior to using react-select, I was clearing the selected options in the form on submit using the .reset() function, which does not appear to cause any effect now.

I tried to store a variable in the onSubmit function with null as the value to be set to the defaultValue prop in the Controller thinking it would reset things. However that didn't work. What would be a clean way to handle this?

Parent form component:

function AddActivityForm(props) {

  const { register, handleSubmit, control, watch, errors } = useForm();

  const onSubmit = (data) => {
    //Additional logic here
    document.getElementById("activity-entry-form").reset();
  };

  return (
    <Form id="activity-entry-form" onSubmit={handleSubmit(onSubmit)}>
          <ActivityPredecessorInput
            activities={props.activities}
            formCont={control}
          />
      <Button variant="primary" type="submit" className="mb-2">
        Submit
      </Button>
    </Form>
  );
}

export default AddActivityForm;

Child using Select from react-select:

function ActivityPredecessorInput(props) {
  const activities = props.activities;
  const options = activities.map((activity, index) => ({
    key: index,
    value: activity.itemname,
    label: activity.itemname,
  }));
  return (
    <Form.Group controlId="" className="mx-2">
      <Form.Label>Activities Before</Form.Label>
      <Controller
        as={
          <Select
            isMulti
            options={options}
            className="basic-multi-select"
            classNamePrefix="select"
          />
        }
        control={props.formCont}
        name="activitiesbefore"
        defaultValue={""}
      />
    </Form.Group>
  );
}

export default ActivityPredecessorInput;

have you seen this example: codesandbox.io/s/react-hook-form-controller-079xx — Bill
– Bill, Commented May 10, 2020 at 0:14
@Bill I have not seen this before! Looks like I should be able to figure out my issue with how they are using the "reset form" button. — userNick
– userNick, Commented May 10, 2020 at 15:24

userNick · Accepted Answer · 2020-05-10 15:53:25Z

8

Answering my own question based on the example provided by @Bill in the comments in the original post. React-hook-form provides a reset method that takes care of the situation pretty simply.

Create a const to store default values (stored in the parent component in this case).

const defaultValues = {
  activitiesbefore: "",
};

Include reset method in the useForm const.

const { register, handleSubmit, reset, control, watch, errors } = useForm();

Call the reset method in the onSubmit function passing defaultValues.

reset(defaultValues);

answered May 10, 2020 at 15:53

userNick

6434 gold badges11 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andrey Begun · Accepted Answer · 2020-09-25 15:09:07Z

1

You can pass the onClick onClick={()=> setValue("activitiesbefore", "")} parameter with the setValue value from useForm const { register, handleSubmit, errors, reset, control, setValue} = useForm(); to the reset button, or to the submit button

answered Sep 25, 2020 at 15:09

Andrey Begun

112 bronze badges

Collectives™ on Stack Overflow

Reset selected values from react-select within react-hook-form on submit?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related