Form is not submitting but validating field individually

[kopax]

What is the current behavior?

When I submit my form with the handleSubmit, nothing happen

What is the expected behavior?

I expect to submit the form

Form

Can anyone see a mistake here or is this a bug?

import React, { useState, useRef } from 'react';
import { Field, Form } from 'react-final-form';
import { compose } from 'redux';
import TextField from '../../components/form/TextField';
import getAutoCompleteType from '../../components/form/utils';
import withTranslations from '../../core/translations/withTranslations';
import { useValidators } from '../../utils/form';
import Button from '../../ui/components/Button';

export default function ChangePasswordForm({
  t,
  setLocale,
  locale,
}) {
  const buttonRef = useRef();
  const [showPassword, setShowPassword] = useState(false);

  const {
    oldPasswordValidator,
    passwordValidator,
    newPasswordValidator,
  } = useValidators(t);

  const _onSubmitPressed = async (values) => {
    alert(JSON.stringify(values));
  };

  return (
        <Form
          onSubmit={() => alert('gi')}
          validate={(values) => {
            const errors = {};
            if (values.password !== values.newPassword) {
              errors.newPassword = t('utils.form.notIdenticalNewPassword');
            }
            return errors;
          }}
          render={({
            handleSubmit,
            form,
            submitting,
            pristine,
            values,
          }) => (
            <form onSubmit={handleSubmit}>
              <View
                style={{
                  position: 'relative',
                }}
              >
                <Field
                  name="oldPassword"
                  component={TextField}
                  label={t('changePasswordForm.oldPassword')}
                  returnKeyType="next"
                  textContentType="password"
                  validate={oldPasswordValidator}
                  blurOnSubmit={false}
                  secureTextEntry={!showPassword}
                  tabIndex="1"
                  value={values.oldPassword}
                  {...getAutoCompleteType('off')}
                />
                <IconButton
                  style={{ position: 'absolute', right: 0, top: 26, zIndex: 2 }}
                  icon={showPassword ? 'eye-off' : 'eye'}
                  size={20}
                  onPress={() => setShowPassword(!showPassword)}
                />
              </View>
              <Field
                name="password"
                component={TextField}
                label={t('changePasswordForm.password')}
                returnKeyType="next"
                textContentType="password"
                validate={passwordValidator}
                blurOnSubmit={false}
                secureTextEntry={!showPassword}
                tabIndex="2"
                value={values.password}
                {...getAutoCompleteType('off')}
              />
              <Field
                name="passwordConfirm"
                component={TextField}
                label={t('changePasswordForm.passwordConfirm')}
                returnKeyType="next"
                textContentType="password"
                validate={newPasswordValidator}
                blurOnSubmit={false}
                secureTextEntry={!showPassword}
                tabIndex="3"
                value={values.passwordConfirm}
                {...getAutoCompleteType('off')}
                onSubmitEditing={() => handleSubmit()}
              />
              <Button
                ref={buttonRef}
                type="submit"
                mode="contained"
                onPress={handleSubmit}
                loading={submitting}
                disabled={submitting || pristine}
                tabIndex="4"
              >
                {t('changePasswordForm.submit')}
              </Button>
            </form>
          )}
        />
  );
}

What's your environment?

    "final-form": "^4.19.1",
    "final-form-arrays": "^3.0.2",
    "react-final-form": "^6.4.0",
    "react-final-form-arrays": "^3.1.1",
    "react-native-final-form-material": "^1.0.14",

• node 14
• chrome
• react 16.10.1
• react-native

Other information

No log or error at all, tested in multiple page, it doesn't answer. I use react-final-form without trouble in many pages.

[kopax]

After some investigation, it seems that the issues can be fixed with

              <Field
-               name="password"
+               name="newPassword"
                component={TextField}
                label={t('changePasswordForm.password')}
                returnKeyType="next"
                textContentType="password"
                validate={passwordValidator}
                blurOnSubmit={false}
                secureTextEntry={!showPassword}
                tabIndex="2"
                {...getAutoCompleteType('off')}
              />

is password a reserved name? It is weird that it breaks the form. I think this is a bug