How to clear react-select value after formik form submission?

Question

I have a formik form where I have used react-select for select list. Here is my form:

import React from "react";

import { ErrorMessage, Field, Form, Formik } from "formik";
import * as Yup from "yup";
import { Button, Col, FormGroup } from "reactstrap";
import Select from "react-select";


const AddBankForm = (props) => {
  return (
    <Formik
      initialValues={{
        district: props.districts,
      }}
      validationSchema={Yup.object({
        district: Yup.string().required("Required"),
      })}
      onSubmit={(values, actions) => {
    setError(null);
    setMessage(null);
    try {
      const response = await postDataWithAuth(DISTRIBUTOR_BANK_ADD, {
        routing_number: values.branch,
        bank_account_number: values.accountNumber,
        account_holder_name: values.accountName,
        pin_number: values.tpin,
      });


      // This is not working
      actions.resetForm();

      
      setMessage(response.message);
    } catch (e) {
      setError(e.response.data);
    }
    actions.setSubmitting(false);
  }}
    >
      {(formikProps) => (
        <Form onSubmit={formikProps.handleSubmit} autoComplete="one-time-code">
          <div className="form-row">
            <Col>
              <FormGroup>
                <label>
                  District<span className="text-danger">*</span>
                </label>
                <Select
                  menuPortalTarget={document.body}
                  type="text"
                  name="district"
                  onChange={(option) => {
                    props.updateDistrict(option.value);
                    formikProps.setFieldValue("district", option.value);
                  }}
                  options={
                    props.isCreateLiftingSuccessful ? [] : props.districts
                  }
                  onBlur={formikProps.handleBlur}
                />
                <ErrorMessage
                  name="district"
                  component="div"
                  className="text-danger"
                />
              </FormGroup>
            </Col>
  </div>
          <div className="form-row mt-3 text-center">
            <Col>
              <Button
                className="btn btn-success"
                type="submit"
                disabled={!formikProps.dirty || formikProps.isSubmitting}
              >
                Submit
              </Button>
            </Col>
          </div>
        </Form>
      )}
    </Formik>
  );
};

The problem is that the react-select field is not getting cleared after the form submission. I have used formik's resetForm() method to clear my form. But it seems that resetForm method does not have any impact on the react-select field.

Masud Morshed Masud Morshed · Accepted Answer · 2021-03-16T13:37:04

You can use 'ref' props for clear react-select field.

import React from "react";

import { ErrorMessage, Field, Form, Formik } from "formik";
import * as Yup from "yup";
import { Button, Col, FormGroup } from "reactstrap";
import Select from "react-select";


const AddBankForm = (props) => {
  // update start 
  let selectRef = null;
  const clearValue = () => {
    selectRef.select.clearValue();
  };
  // update end
  return (
    <Formik
      initialValues={{
        district: props.districts,
      }}
      validationSchema={Yup.object({
        district: Yup.string().required("Required"),
      })}
      onSubmit={(values, actions) => {
    setError(null);
    setMessage(null);
    try {
      const response = await postDataWithAuth(DISTRIBUTOR_BANK_ADD, {
        routing_number: values.branch,
        bank_account_number: values.accountNumber,
        account_holder_name: values.accountName,
        pin_number: values.tpin,
      });


      // This is not working
      actions.resetForm();
      
      // Try this way
      clearValue();

      
      setMessage(response.message);
    } catch (e) {
      setError(e.response.data);
    }
    actions.setSubmitting(false);
  }}
    >
      {(formikProps) => (
        <Form onSubmit={formikProps.handleSubmit} autoComplete="one-time-code">
          <div className="form-row">
            <Col>
              <FormGroup>
                <label>
                  District<span className="text-danger">*</span>
                </label>
                <Select
                  // use ref
                  ref={ref => {
                    selectRef = ref;
                  }}
                  menuPortalTarget={document.body}
                  type="text"
                  name="district"
                  onChange={(option) => {
                    props.updateDistrict(option.value);
                    formikProps.setFieldValue("district", option.value);
                  }}
                  options={
                    props.isCreateLiftingSuccessful ? [] : props.districts
                  }
                  onBlur={formikProps.handleBlur}
                />
                <ErrorMessage
                  name="district"
                  component="div"
                  className="text-danger"
                />
              </FormGroup>
            </Col>
  </div>
          <div className="form-row mt-3 text-center">
            <Col>
              <Button
                className="btn btn-success"
                type="submit"
                disabled={!formikProps.dirty || formikProps.isSubmitting}
              >
                Submit
              </Button>
            </Col>
          </div>
        </Form>
      )}
    </Formik>
  );
};

How to clear react-select value after formik form submission?

1 Answers