Formik: Question: Reset Form using withFormik()

[LoganArnett]

Asked this in the discord channel but have had no response. I am currently trying to use Formik with Semantic-UI-React and I am using withFormik() and setFieldValue to set update the inputs but when I run resetForm or handleReset nothing happens. I assume this is because of the Semantic-UI components being slightly different in how they handle the values but I wanted to see if there was a way to reset them without having to loop through each value and setting the value manually

[Saifadin]

Can you provide a reproduction of the issue?
resetForm resets the form to the initialValues. So if you want to empty the form completely and your form was initially prefilled, you need to do that manually.

[LoganArnett]

@Saifadin resetForm is resetting to the initialValues and they are all empty strings. That piece of functionality is working correctly, however my inputs are not clearing. My current form is below:

import React, { Component } from 'react';
import { withFormik } from 'formik';
import { __ } from '../../utils';
import { Form } from 'semantic-ui-react';
import { products } from '../../fixtures/createInfo.json';

class CreateCaseForm extends Component {
  handleChange = (e, { name, value }) => {
    this.props.setFieldValue(name, value);
  };

  render() {
    const { isSubmitting, handleSubmit, values } = this.props;
    const { shopList } = this.state;
    return (
      <Form>
        <Form.Input
          name="orderNumber"
          label={__('Order Number')}
          placeholder={__('Order Number')}
          onChange={this.handleChange}
        />
        <Form.Select
          name="productType"
          label={__('Product Type')}
          placeholder={__('Product Type')}
          onChange={this.handleChange}
          options={this.localizeOptions(products)}
        />
        <Form.Input
          name="price"
          label={__('Price')}
          placeholder={__('Price')}
          onChange={this.handleChange}
        />
        <Form.TextArea
          name="description"
          label={__('Description')}
          placeholder={__('Description')}
          onChange={this.handleChange}
        />
        <Form.Group>
          <Form.Button
            content={__('Submit')}
            onClick={handleSubmit}
            type="submit"
            disabled={isSubmitting}
          />
          <Form.Button
            basic
            content={__('Cancel')}
            onClick={() => console.log('cancel')}
            disabled={isSubmitting}
          />
        </Form.Group>
      </Form>
    );
  }
}

const defaultFormValues = {
  orderNumber: '',
  productType: '',
  price: '',
  description: ''
};

export default withFormik({
  mapPropsToValues: () => (defaultFormValues),
  handleSubmit: (values, { resetForm, props }) => {
      props.sendQuery(values);
      resetForm();
  },
  displayName: 'CreateCaseForm'
})(CreateCaseForm);

[Saifadin]

Add value={values.orderNumber} to the inputs. Formik doesn't magically pass the values to the Inputs, except if you wrap them in the <Field /> component.

[LoganArnett]

gotcha, yea I just looked at it again with fresh eyes and saw that, too many long days lately, thank you @Saifadin

[Saifadin]

Gotcha, happens to the best of us ^^