Disable form submit on last input

[pzupan]

I'd like to disable the automatic form submit which occurs on the last input withNextInputAutoFocus. It looks like withNextInputAutoFocus.js just establishes that the input is the last and then submits with no other alternative (lines 45-46). Am I missing something?

[Almouro]

Hi @pzupan, thanks for the issue!

You are not missing anything, https://github.com/bamlab/react-native-formik/blob/master/src/withNextInputAutoFocus.js#L46 is where the last input submits automatically.

I can see 2 possibilities to fix this:

1. Making onSubmitEditing overridable

it might seem counterintuitive that adding onSubmitEditing on the wrapped input doesn't override what withNextInputAutoFocus does in https://github.com/bamlab/react-native-formik/blob/master/src/withNextInputAutoFocus.js#L81.

If we change this and add another callback, aka having:

onSubmitEditing = () => {
      if (this.props.onSubmitEditing) this.props.onSubmitEditing();
      else this.context.handleSubmitEditing(this.props.name);
    };

we could use onSubmitEditing prop on the last input to prevent the form to be submitted.

2. Adding a configuration the HOC

Something like:

export const withNextInputAutoFocusForm = (WrappedComponent, { submitAfterLastInput } = { submitAfterLastInput: true }) => {
   ...

   if (isLastInput) {
        if (submitAfterLastInput) this.props.formik.submitForm();
   }

allowing you to do:

const Form = withNextInputAutoFocusForm(View, { submitAfterLastInput: false });

@pzupan Do you have any insight as to what makes more sense to you as a user?
Also @tpucci any possible insight on the subject?

[pzupan]

@Almouro, I think option 2 is the most intuitive. I would even consider disabling autosubmit unless requested (default to submitLastInput: false). Then you could enable it with

const Form = withNextInputAutoFocusForm(View, { submitAfterLastInput: true });

[tpucci]

I would go with solution 2 as well 😊

[pzupan]

Pull Request

[Almouro]

Thanks @pzupan for the PR, I'll close the issue then!