Reset a form programmatically

[dbertella]

Are you submitting a bug report or a feature request?

Feature request

Other information

I might missing something, but what is the correct approach to reset a form after successful submission? Without having a reset button of course.
I couldn't see anything about this in the documentation.
I can inject new empty initialValues from props maybe, but it doesn't seem very clean.

[davidhenley]

@erikras I'm trying to reset the form after resolving promise and this is not working. I am getting cannot read 'then' of undefined. The form submits just fine, just will not wait to reset.

Code:

import React from 'react';
import { Form as RFForm, Field } from 'react-final-form';
import { validate } from './options';
import * as Form from '../helpers';
import { typeOptions } from './options';
import { Form as SUIForm } from 'semantic-ui-react';

const onSubmit = values => {
  return new Promise(resolve => {
    setTimeout(resolve, 3000);
  });
};

const CreditDebitForm = props => (
  <RFForm
    onSubmit={onSubmit}
    validate={validate}
    render={({ handleSubmit, values, reset, pristine, invalid, submitting, submitFailed, submitSucceeded }) => (
      <form onSubmit={event => {
        handleSubmit(event).then(reset);
      }}>
         <Field name="invoice" label="Invoice #" type="number" component={Form.Input} />
         <Form.Button disabled={pristine || invalid || submitting} />
      </form>
    )}
  />
)

export default CreditDebitForm;

[erikras]

See #21 (comment) and #21 (comment).

[davidhenley]

I checked those out. I am on the latest version.

[erikras]

Hmm... You do see it working in the sandbox, right? I wonder what is different about your setup? Your code looks just fine.

[davidhenley]

@erikras OK. When you submitted the change you said to upgrade to 1.1.0. I did that, once I upgraded to 1.3.0 for f-f and 1.2.0 for r-f-f it started working. Sorry, that was frustrating. We are all good now with the same code. Thanks for your hard work!!

[erikras]

I can inject new empty initialValues from props maybe, but it doesn't seem very clean.

@dbertella You can also call initialize() instead of reset() in the same way.

[dbertella]

Great sorry I didn't see that, I probably looked into the wrong issues instead, I have just a problem, I'm using redux saga and the form submission is just a synchronous action, so I don't think it will work unfortunately

@erikras what would be great here is a flag re-initialize on the Form component that is false by default and if set to true cause the reset/initialize of the rendered form

[erikras]

@dbertella Let me restate your request to make sure I understand. You want:

props.reinitialized === false // form might have been initialized, but has never been RE-initialized
props.reinitialized === true // form has had `reset()` or `initialized()` called on it at least once

?

[dbertella]

My problem is that I need to reset the form from outside the render prop, something that I could do with an action creator in redux form for example.
My onSubmit unfortunately is synchronous since I'm using saga so i can't use the method you mentioned.

What I'm doing as a work around is: according to a custom flag I'm setting the initialValues causing the form to re-render to the empty state but it works just the first time.

[erikras]

@dbertella Everything about The second and third answers to this How to submit from outside? FAQ I just wrote could equally apply to reset().

[dbertella]

Sweet I like the the dead drop concept but I'm not sure about how to implement the reset, I need to try it :-). Anyway the closure or a hidden reset button triggered can help I think! Thank you very much for all the effort!

[dbertella]

Clojure did the job, I tried the event first but it didn't work with reset, I guess it's not handled via a custom event, I was thinking at something like this document.getElementById('myForm').dispatchEvent(new Event('reset'))

Anyway here is my code, it feels a little hacky but it does the job!

let resetForm

class MyComp extends React.Component {
  componentWillReceiveProps(nextProps: Props) {
    if (!this.props.success && nextProps.success) {
      resetForm()
    }
  }

  render() {
       <Form render={({ handleSubmit, reset, values }) => {
            resetForm = reset
            return (
                <form onSubmit={handleSubmit}>
                ....
                </form>
            )
        } />
  }
}

[davidhenley]

I think I'm going with this option as well.

[mnickkk]

@dbertella @davidhenley you guys can use this approach as well redux-saga/redux-saga#161 (comment)

[khaoptimist97]

@dbertella Thank you so much

[rendomnet]

Anyone react hooks way?

[JackHowa]

Have a similar question as @rendomnet. I'm using recompose. Any advice?