Search code examples
javascriptreactjsreact-final-formfinal-form

Ask user for confirmation before updating form value in final-form

I'm using react-final-form and have 2 radio fields (Yes/No). When 'Yes' is the current value and the user selects 'No' I want to show a modal asking for confirmation from the user. If the user cancels, the value should remain the same, if the user confirms, it should update.

Is there any way to do this with the current version of react-final-form or final-form? I've had a look at the documentation and noticed beforeSubmit, however didn't see anything like beforeChange

Solution

  • You'll have to intercept the change yourself.

    <Field name="whatever">
  {({ input }) => (
    <input {...input} onChange={event => {
      if(showConfirmDialog()) {
        input.onChange(event); // pass event through to RFF
      }
    }}/>
  )}
</Field>