[BUG] customValidation not working

[Alexa-Green]

Environment

Please provide as many details as you can:

• Hosting type
  • [ ] Form.io
  • [x] Local deployment
    • Version: 5.2.0
• Formio.js version: 5.2.0
• Frontend framework: react
• Browser: any- currently using Chrome
• Browser version: any- currently using 99.0.4844.74

Steps to Reproduce

1. Create a new <Form /> component
2. Add hooks to the form prop:

<Form
  {...props}
  form={{
    display: 'form',
    hooks: {
      customValidation: (submission, next) => {
        console.log('customValidation firing'); // <-- doesn't fire
        console.log(submission);
      }
    }
  }}
/>

3. View the form and click "Submit" or "Next Page" (if display: 'wizard')
4. Confirm that the customValidation hook does not fire in the console.
5. Try adding hooks prop directly to the <Form /> component:

<Form
  {...props}
  form={{
    display: 'form'
  }}
  hooks={{
    customValidation: (submission, next) => {
      console.log('customValidation firing'); // <-- doesn't fire
      console.log(submission);
    }
  }}
/>

6. View the form again and click "Submit" or "Next Page" (if display: 'wizard')

Expected behavior

customValidation hook should fire and block submission if next() is called with an argument (per docs): https://help.form.io/developers/form-renderer#customvalidation-submission-next

Observed behavior

customValidation hook does not fire, and allows submission even if next() is called with an argument

Example

If possible, please provide a screenshot, live example (via JSFiddle or similar), and/or example code to help demonstrate the issue.

https://codesandbox.io/s/practical-chaum-rwgxqj?file=/src/index.js

import React from "react";
import ReactDOM from "react-dom";
import { Form } from "react-formio";
import "./styles.css";
//import "bootstrap/dist/css/bootstrap.css";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <Form
    src={{
      display: "form",
      components: [
        {
          label: "Columns",
          columns: [
            {
              components: [
                {
                  label: "User Id",
                  labelPosition: "top",
                  placeholder: "",
                  description: "",
                  tooltip: "",
                  prefix: "",
                  suffix: "",
                  widget: {
                    type: "input"
                  },
                  inputMask: "",
                  allowMultipleMasks: false,
                  customClass: "",
                  tabindex: "",
                  hidden: false,
                  hideLabel: false,
                  showWordCount: false,
                  showCharCount: false,
                  mask: false,
                  autofocus: false,
                  disabled: false,
                  alwaysEnabled: false,
                  tableView: true,
                  multiple: false,
                  defaultValue: null,
                  persistent: true,
                  inputFormat: "plain",
                  protected: false,
                  dbIndex: false,
                  case: "",
                  encrypted: false,
                  redrawOn: "",
                  clearOnHide: true,
                  customDefaultValue: "",
                  calculateValue: "",
                  allowCalculateOverride: false,
                  validateOn: "change",
                  validate: {
                    required: true,
                    pattern: "",
                    customMessage: "",
                    custom:
                      'if(input.length ===0){\n  valid = "Please Enter User ID"\n}',
                    customPrivate: false,
                    json: "",
                    minLength: "",
                    maxLength: "",
                    strictDateValidation: false
                  },
                  unique: false,
                  errorLabel: "",
                  key: "userId",
                  tags: "",
                  properties: {},
                  conditional: {
                    show: null,
                    when: null,
                    eq: "",
                    json: ""
                  },
                  customConditional: "",
                  logic: [],
                  attributes: {},
                  overlay: {
                    style: "",
                    page: "",
                    left: "",
                    top: "",
                    width: "",
                    height: ""
                  },
                  type: "textfield",
                  input: true,
                  refreshOn: "",
                  inputType: "text",
                  hideOnChildrenHidden: false,
                  id: "e9h6yyf"
                }
              ],
              width: 6,
              offset: 0,
              push: 0,
              pull: 0
            },
            {
              components: [
                {
                  label: "Password",
                  labelPosition: "top",
                  placeholder: "",
                  description: "",
                  tooltip: "",
                  prefix: "",
                  suffix: "",
                  widget: {
                    type: "input"
                  },
                  customClass: "",
                  tabindex: "",
                  hidden: false,
                  hideLabel: false,
                  showWordCount: false,
                  showCharCount: false,
                  mask: false,
                  autofocus: false,
                  disabled: false,
                  alwaysEnabled: false,
                  tableView: false,
                  case: "",
                  redrawOn: "",
                  clearOnHide: true,
                  allowCalculateOverride: false,
                  validateOn: "change",
                  validate: {
                    required: true,
                    pattern: "",
                    customMessage: "",
                    custom:
                      'if(input.length ===0){\n  valid ="Enter Password"\n}\n\nif(input.length <3){\n  valid ="Enter minimum three digit"\n}',
                    customPrivate: false,
                    json: "",
                    minLength: "",
                    maxLength: "",
                    strictDateValidation: false
                  },
                  errorLabel: "",
                  key: "password",
                  tags: "",
                  properties: {},
                  conditional: {
                    show: null,
                    when: null,
                    eq: "",
                    json: ""
                  },
                  customConditional: "",
                  logic: [],
                  attributes: {},
                  overlay: {
                    style: "",
                    page: "",
                    left: "",
                    top: "",
                    width: "",
                    height: ""
                  },
                  type: "password",
                  input: true,
                  multiple: false,
                  defaultValue: null,
                  protected: true,
                  unique: false,
                  persistent: true,
                  refreshOn: "",
                  dbIndex: false,
                  customDefaultValue: "",
                  calculateValue: "",
                  encrypted: false,
                  allowMultipleMasks: false,
                  inputType: "text",
                  inputFormat: "plain",
                  inputMask: "",
                  hideOnChildrenHidden: false,
                  id: "e33n95i"
                }
              ],
              width: 6,
              offset: 0,
              push: 0,
              pull: 0
            }
          ],
          key: "columns",
          type: "columns",
          input: false,
          path: "columns",
          components: [
            {
              label: "User Id",
              validate: {
                required: true,
                custom:
                  'if(input.length ===0){\n  valid = "Please Enter User ID"\n}'
              },
              key: "userId",
              type: "textfield",
              input: true,
              hideOnChildrenHidden: false
            },
            {
              label: "Password",
              tableView: false,
              validate: {
                required: true,
                custom:
                  'if(input.length ===0){\n  valid ="Enter Password"\n}\n\nif(input.length <3){\n  valid ="Enter minimum three digit"\n}'
              },
              key: "password",
              type: "password",
              input: true,
              protected: true,
              hideOnChildrenHidden: false
            }
          ]
        },
        {
          label: "Click",
          action: "event",
          showValidations: false,
          block: true,
          key: "click",
          type: "button",
          input: true,
          event: "clickEvent"
        },
        {
          label: "Submit",
          theme: "success",
          key: "submit",
          type: "button",
          input: true
        }
      ],
      hooks: {
        customValidation: (submission, next) => {
          console.log("customValidation");
          console.log(submission);
        }
      }
    }}
    hooks={{
      customValidation: (submission, next) => {
        console.log("customValidation");
        console.log(submission);
      }
    }}
    clickEvent={() => {
      alert("--");
    }}
    options={{ submitMessage: "", disableAlerts: true, noAlerts: true }}
    onSubmit={(i) => {
      alert(JSON.stringify(i.data));
      var promise1 = new Promise(function (resolve, reject) {
        setTimeout(function () {
          resolve("foo");
        }, 300);
      });

      promise1.then(function (value) {
        alert(value);
        // expected output: "foo"
      });
    }}
  />,

  // <Form src="https://peb3z.sse.codesandbox.io/abc" onSubmit={(i)=>{console.log(i)}} />,
  rootElement
);