Final form reactjs button not disabled when submitting

Question

I am doing a react app and one of the features is creating client information. I have created necessary components as you will see in the code snippets below. I am also utilizing react redux to manage state and firestore as the backend and database.

On the form (Final Form), i specify that the button is disabled when the form is submitting, however the button seems not disabled, and this can cause multiple record creation when the button is hit multiple times.

So to summarize, what i would like to achieve is when the button is pressed to submit the new client, whilst waiting for the promise to resolve, the button need to be disabled to avoid people hitting it multiple times.

Here is the code:

/* Client Form Component */

const ClientForm = ({onSubmit}) => {

  const submitForm = (formValues) => {
    onSubmit(formValues);
  };

  const Condition = ({ when, is, children }) => (
    <Field name={when} subscription={{ value: true }}>
      {({ input: { value } }) => (value === is ? children : null)}
    </Field>
  )

  return (
    <Form 
      onSubmit={submitForm}
      render={({handleSubmit, submitting, pristine, reset}) => {
        return (
          <form onSubmit={handleSubmit}>
            <div className='container-fluid g-4'>
                ...
              <div className='row'>
                <div className='col-12 g-4'>
                  <button 
                    type="submit" 
                    className='btn btn-primary'
                    disabled={submitting || pristine }
                  >Submit</button>
                </div>
              </div>
            </div>
                        
          </form>
        )
      }}
    />
  )

}
export default ClientForm;

/* Client Add Component */

import { createClient } from  ...

const ClientAdd = (props) => {

  const dispatch = useDispatch();

  const onSubmit = (formValues) => {
    dispatch(createClient(formValues, props.history));
  };

  return (
    <ClientForm onSubmit={onSubmit}/>
  );
};

export default ClientAdd;

/* createClient action crator */

export const createClient = (
    {
      firstName, 
      lastName,
      clientSpec, 
      dob,
      contactNumber,
      email,       
      streetNumber, 
      streetAddress,
      suburb, 
      state, 
      postCode,
      ndisNumber,
      fundsAllocated,
      planManagementType,
      planStartDate,
      planEndDate,
      clientNotes,
      coordinator,
      coordinatorEmail,
      coordinatorContactNumber,
      coordinatorCompany,
      planManager,
      planManagerEmail,
    }, pathHistory) => async (dispatch) => {
  const docRef = collection(db, 'clients');

  let formValuesToSubmit = {}

  if (planManagementType === "NDIS Management") {
    formValuesToSubmit = {
      firstName, 
      lastName,
      clientSpec, 
      dob,
      contactNumber,
      email,       
      streetNumber, 
      streetAddress,
      suburb, 
      state, 
      postCode,
      ndisNumber,
      fundsAllocated,
      planManagementType,
      planStartDate,
      planEndDate,
      clientNotes,
      coordinator,
      coordinatorEmail,
      coordinatorContactNumber,
      coordinatorCompany,
    }
  } else if (planManagementType === "Plan Management") {
    formValuesToSubmit = {
      firstName, 
      lastName,
      clientSpec, 
      dob,
      contactNumber,
      email,       
      streetNumber, 
      streetAddress,
      suburb, 
      state, 
      postCode,
      ndisNumber,
      fundsAllocated,
      planManagementType,
      planStartDate,
      planEndDate,
      clientNotes,
      planManager,
      planManagerEmail,
    }
  }

  await addDoc(docRef, formValuesToSubmit);

  pathHistory.push('/client-list');

};

Answer 1

Submitting value relies on the onSubmit being asynchronous. In your case onSubmit does not return promises. You need to make onSubmit asynchronous or track the progress of the asynchronous operation in the state and block the button from it.