Formik: On forms with multiple buttons, it's not easy to tell which button is submitting in order to display a loading indicator

[lukewlms]

🚀 Feature request

Current Behavior

We need to do a fair amount of extra plumbing in order to tell which button is clicked.

E.g. on a form with buttons for: Back, Save Application, and Continue

Any of these once clicked invokes Submit behavior. We want to show a loading indicator on one of the buttons, and disable the others. This is not easy.

Desired Behavior

We should be able to easily tell which button was clicked in order to display the proper UI

Suggested Solution

Perhaps isSubmitting could be supplemented with something like an actionBeingSubmitted field in order to easily know which button should get the loading indicator.

Who does this impact? Who is this for?

All users using more modern design techniques (displaying a loading indicator on an individual button).

Describe alternatives you've considered

We have this implemented by adding an additional form value, but it feels clunky and like we're reinventing the wheel on a more general problem.

Additional context

Thanks for the consideration and the great library!

[jolson31]

Agreed. This would be an awesome feature. Please consider.

[drac94]

@lukewlms Could you share how are you doing it right now? I am trying to do the same using submit buttons and I haven't had any luck

[dawiidio]

@drac94 I did something like this in one of my projects. It's a workaround but works fine

<Formik
          initialValues={{
              submitBttn: ''
          }}
          onSubmit={(values => {
              console.log('Submit button: ',  values.submitBttn);
          })}
        >
            {(helpers) => {
                return (
                    <form
                        onSubmit={helpers.handleSubmit}
                        onReset={helpers.handleReset}
                    >
                        <button
                            onClick={() => {
                                helpers.setFieldValue('submitBttn', 'type1')
                            }}
                            type="submit"
                        >
                            Submit type 1
                        </button>
                        <button
                            onClick={() => {
                                helpers.setFieldValue('submitBttn', 'type2')
                            }}
                            type="submit"
                        >
                            Submit type 2
                        </button>
                    </form>
                )
            }}
        </Formik>