React-final-form: Firefox, external submit doesn't prevent defaults and reload the page

Created on 4 Mar 2018 · 8Comments · Source: final-form/react-final-form

Are you submitting a bug report or a feature request?

Bug report

What is the current behavior?

Form is submitted and page is reloaded on Firefox. Tested on version 58.0.2, Mac.

What is the expected behavior?

Form not be submitted and stays where is is without reloading the page.

Sandbox Link

Example straight from the docs.
https://codesandbox.io/s/1y7noyrlmq

What's your environment?

Bug is present in final form version 4.2.1, React-final-form 1.2.1, Firefox 58.0.2, Mac os.

Other information

Make sure you click on button External Submit via <code>document.getElementById()</code> to reproduce the bug.

Source

leonardoanalista

Most helpful comment

See https://github.com/facebook/react/issues/12639 for workaround details for Firefox.

erikras on 18 Apr 2018

👍4

All 8 comments

the same, works fine in Chrome, fails in Firefox

blasterpistol on 5 Mar 2018

I'm having the same problem, any workaround for this?

petergombos on 18 Apr 2018

Well, in the example, the "External Submit via closure" button works just fine. Is that not an acceptable workaround?

That the document.getElementById() method doesn't work seems more like a bug in React itself, namely that the <form onSubmit> is not being called.

erikras on 18 Apr 2018

My workaround was pass a submit button as a prop to the Form component. Then Form component renders the submit button inside the form. Like this (removed private and irrelevant details):

export default class EditPlanDetails extends React.PureComponent {
  onClick = e => {
    const onSubmit = values => {
      this.props.saveData();
    };
        <DetailsForm
          onSubmit={onSubmit}
          initialValues={this.props.initialValues}
          submitButton={
            isReadOnly ? null : (
              <Clickable type="submit">OK</Clickable>
            )
          }
          cancelButton={ ... }
        />

  }

  render() {
    return (
      <Clickable
        onClick={this.onClick} >
           Show form Details
      </Clickable>
    );
  }
}

Then the form:

  render() {
    return (
      <Form
        onSubmit={this.props.onSubmit}
        initialValues={this.props.initialValues}
        validate={validate}
        render={({ handleSubmit, pristine, invalid, values }) => (
          <form id={this.props.id} onSubmit={handleSubmit}>
            <div>              
                <FinalField
                  name="tags"
                  label="Tags"
                  render={renderText}
                />              
            </div>
            <div className="text-right">
              {this.props.submitButton}
            </div>
          </form>
        )}
      />
    );
  }
}

It is way far from perfection but it works for my personal needs.

Conclusion: Submit via Closure is an acceptable work around to avoid the bug on Firefox. Feel free to close this issue if it won't be fixed.

leonardoanalista on 18 Apr 2018

Gonna leave open in case there's any movement on https://github.com/facebook/react/issues/12639. If not, I might close it.

erikras on 18 Apr 2018

i can confirm i was seeing this too but then i realized i could just pass the handleSubmit method from the Form render props down to the radio input component that needs to trigger it (for autoforwarding a wizard like form) and that fixed my problem.

Initially i didn't take this approach to avoid passing the function through a few components, but it isn't too bad and it now works properly in firefox... still subscribing to see how this shakes out.

Thanks for all your great work on this lib @erikras! Really enjoying working with it!