Form is reset if setState is called in a Component

[fabarea]

Documentation read, yes!

Description

It looks the form is (wrongly) reset if some internal state changes within a component. Consider the following example https://jsfiddle.net/fab1en/954uLrrL/1/

1. Edit the form
2. Hit the second button which update some foo internal state
3. Notice how the original value is reset in the form.

Form should not be reset like that. Am I missing something?

[n1k0]

Form should not be reset like that. Am I missing something?

I think that's because you're not passing any persistent formData prop, so the form is rerendered with default values every time.

Attaching formData to the container state seems to solve the issue https://jsfiddle.net/954uLrrL/2/

I'm having a hard time determining if this is a bug or not, and if it is, how we could fix it.

[fabarea]

Thanks for your quick feedback. I was able to continue my journey and work around this oddity.

This behaviour (wanted or not) is quite disrupting for a new comer and it would fit in the "bug" category IMHO.

Cheers

[alexstrat]

I was hit by this as well, and @n1k0's solution allowed me to eventually move on.

However, I agree that the behavior is quite disturbing and not easily discoverable. It appears to me that this is linked to the difference between controlled and uncontrolled components. As it is designed today, the Form component should strictly be used in a controlled manner.

[n1k0]

We should definitely add a warning about this in the documentation.

[elisechant]

I agree this is a bug.

This happens because buttons inside the <Form> other than type=cancel will trigger a form submission. Check your Network Tab. This afterwards resets the form to its original formData state.

You might be able to hack around this something like this:

const YourForm = () => {
  let _clickedDoSomething = false;
  const doSomething = () => {
    // ... do something
  };
  const onSubmit = () => {
    if (_clickedDoSomething) {
      doSomething();
      _clickedDoSomething = false;
      return; // this is important!
    }
  };
  return (
      <Form schema={{foo:'bar'}}
            onSubmit={onSubmit}>
        <button type="submit">Submit</button>
        <button onClick={() => _clickedDoSomething = true}>Do something</button>
      </Form>
  )
};

[elisechant]

In retrospect, I think the issue here is that the form doesn't disable its native submit method. And additional buttons inside the form are triggering a native submit.

I've since patched this like this:

formElement.addEventListener('submit', (e) => {
    e.preventDefault();
});

[MatinF]

I had a similar problem in my form.

By using the proposed solution proposed by n1k0 I can resolve this and avoid my formData being reset when e.g. clicking a button not related to the submit functionality.

However, the challenge is that by implementing this solution, I'm no longer able to provide an external formData for initializing my form.

Before trying to use n1k0's solution, I had the following formData structure:

<Form
            schema={schemaContent}
            uiSchema={uiContent ? uiContent : {}}
            formData={configContent ? configContent : {}} 
            onSubmit={this.onSubmit.bind(this)}
            onChange={({formData}) => {}} 
            onError={this.handleError}
          >

Note above how I can pass the configContent (which contains an externally loaded JSON formData file).

However, when I try to make my formData persistent, I'm not at the same time able to load the configContent:

<Form
            schema={schemaContent}
            uiSchema={uiContent ? uiContent : {}}
            formData={this.state.formData}
            onSubmit={this.onSubmit.bind(this)}
            onChange={({formData}) => this.setState({formData})}
            onError={this.handleError}
          >

Is there a proper way to enable the loading of external formData to initialize the form - while still making the formData persistent?

[yassera2]

The proposed solution works but it will cause an extra re-render.

@MatinF you can use componentDidUpdate to check if the "externally loaded JSON formData" prop changed.

If it's changed then update your state with the newly passed data.

[liamMellor]

I am running into this problem in a react app using hooks exclusively. Haven't been able to get a workaround to fix the issue. Any status on this being patched?

[phatNfqAsia]

I also have the challenge as @liamMellor mentioned - the workaround does not work with react-hooks. The components lost focus on every keystroke and state is not saved properly

[os6sense]

Just to note that I'd initially run into the same issue with hooks but pinned the issue down to how I was setting the state with the hook (in my case I've a tabbed panel to break large schemas up so using an array of schemas); there doesn't seem to be anything intrinsically wrong in using hooks.