Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

handleSubmit doesn't return anything

See original GitHub issue

Are you submitting a bug report or a feature request?

Kind-of both I guess.

What is the current behavior?

Calling handleSubmit doesn’t return anything. According to the docs it should return a Promise in some cases. What cases, I have no idea. I have tried using an async function, submitting the form with invalid values, valid values, but it still doesn’t return anything in any of the cases.

This is really annoying when you want to reset the form after submitting it without errors. I ended up using the following code, but I have no idea if that’s the correct approach or not. Not trying to be annoying or anything, but how am I supposed as a user of this library to tell when handleSubmit is synchronous and when asynchronous?

 <Form<FormValues> onSubmit={onSubmit}>
            {({ handleSubmit, form, valid }): ReactElement => (
                <form
                    className="add-activity"
                    onSubmit={(event): void => {
                        handleSubmit(event);
                        if (valid) {
                            form.reset();
                        }
                    }}
                >

What is the expected behavior?

I’d like to see the behavior of handleSubmit standardized. It should either be always asynchronous and return a Promise, or it should be always synchronous and not return anything.

What’s your environment?

react final form 6.3.0, final form 4.18.5

Issue Analytics

State:
Created 4 years ago
Comments:6 (4 by maintainers)

Top GitHub Comments

1reaction

erikrascommented, Jan 22, 2020

Published fix in v6.3.4.

0reactions

marrkericommented, Dec 10, 2019

I used to use. Don’t forget that onSubmit must be async:

 const onSubmit = async(values, form) =>{
   await ...
 }

 <FinalForm onSubmit={onSubmit} initialValues={initialValues} debug={debug && console.log}>
      {props => {
        const { pristine, submitting, handleSubmit, form } = props

        return (
          <Main>
            <Header>
              <SaveButton
                text='Save'
                type="submit"
                disabled={pristine || submitting}
                onClick={async () => {
                  const response = await handleSubmit()
                  if (response) form.initialize(response)
                }}
              />
            </Header>

            <Body>
              ...
            </Body>
          </Main>
        )
      }}
    </FinalForm>

Top Results From Across the Web

React hook form handlesubmit doesn't work - Stack Overflow

handleSubmit fires submit function only when validation is successful, So please see if all the required data is filled when you submit the ......

useForm - handleSubmit - React Hook Form

This function will receive the form data if form validation is successful. Props. Name, Type, Description. SubmitHandler, (data: Object, e?: Event) ...

How to handle forms in React, the alternative approach

Using React doesn't mean that React needs to control everything! ... [name]: value }); }; return ( <form onSubmit={handleSubmit}> <h1>Hi!

How to type a React form onSubmit handler

function handleSubmit(event) {. event.preventDefault(). onSubmitUsername(event.currentTarget.elements.usernameInput.value). } return (.

Submit Validation Example - Redux Form

Pass it as a parameter to the this.props.handleSubmit function from inside your decorated component. In which case, you would use onClick={this.props.