Async validation disables next button on next step

[rvsia]

Scope: PF4 mapper

Description

Validating is set to true

Schema

const asyncValidator = () => new Promise((res) => setTimeout(() => res(), 1000));

export const wizardSchema = {
  fields: [
    {
      component: componentTypes.WIZARD,
      name: 'wizzard',
      crossroads: ['source.source-type'],
      //inModal: true,
      title: 'Title',
      showTitles: true,
      description: 'Description',
      buttonsPosition: 'left',
      fields: [
        {
          title: 'Get started with adding source',
          name: 1,
          nextStep: 'aws',
          fields: [
            {
              component: componentTypes.TEXTAREA,
              name: 'source.source-name',
              type: 'text',
              label: 'Source name',
              validate: [asyncValidator]
            }
          ]
        },
        {
          title: 'Configure AWS',
          name: 'aws',
          nextStep: 'summary',
          fields: [
            {
              component: componentTypes.TEXT_FIELD,
              name: 'aws-field',
              label: 'Aws field part',
              validate: [
                {
                  type: validatorTypes.REQUIRED
                }
              ],
              isRequired: true
            }
          ]
        },
        {
          fields: [
            {
              name: 'summary',
              component: 'summary'
            }
          ],
          name: 'summary',
          substepOf: 'Summary',
          title: 'Summary'
        }
      ]
    }
  ]
};

cc @Hyperkid123

[rvsia]

[rvsia]

The error occurred after updating React Final Form to 6.0.0

https://github.com/final-form/react-final-form/releases?after=v6.1.0

[rvsia]

Current workaround until a fix in FF is released:

import { useEffect } from 'react';
import PropTypes from 'prop-types';
import useFormApi from '@data-driven-forms/react-form-renderer/dist/cjs/use-form-api';

const ValidatorReset = ({ name }) => {
    const formOptions = useFormApi();

    useEffect(() => {
        setTimeout(() => formOptions.change(name, '1'));

        return () => formOptions.change(name, '');
    }, []);

    return null;
};

ValidatorReset.propTypes = {
    name: PropTypes.string.isRequired
};

export default ValidatorReset;

This component will set a value to 1 after it is mounted, so the form is re-rendered. On unMount value is set to undefined. Be aware: when this component is on the last step, the value will stay in form values.