neoform: Validation out of sync with input. Solution.

Input-1.js

/******************************************************
 * Validation out of sync with input.
 * https://www.webpackbin.com/bins/-L0C88aBjR-vv57klNfU
 ******************************************************/

import React from 'react';
import { field } from 'neoform';
import { fieldValidation } from 'neoform-validation';

const renderError = (status, message) => {
  if (status !== false) {
    return null;
  }

  return (
    <span>{message}</span>
  );
};

const MyInput = ({
  value = '',
  onChange,
  validate,
  validationStatus,
  validationMessage,
  ...props
}) => {
  const style = {
    backgroundColor: validationStatus === false ? 'red' : 'white'
  };

  return (
    <span>
      <input
        {...props}
        style={style}
        value={value}
        onChange={e => {
          onChange(e.target.value)
          validate()
        }}
      />
      {renderError(validationStatus, validationMessage)}
    </span>
  );
};

export default field(fieldValidation(MyInput));

Input-2.js

/******************************************************
 * Fixed issue: Now validation in sync with input.
 * https://www.webpackbin.com/bins/-L0BnQRlkKqnJwIeHrzl
 ******************************************************/
import React from 'react';
import { field } from 'neoform';
import { fieldValidation } from 'neoform-validation';

const renderError = (status, message) => {
  if (status !== false) {
    return null;
  }

  return (
    <span>{message}</span>
  );
};

const MyInput = ({
  value = '',
  onChange,
  validate,
  validationStatus,
  validationMessage,
  ...props
}) => {
  const style = {
    backgroundColor: validationStatus === false ? 'red' : 'white'
  };

  return (
    <span>
      <input
        {...props}
        style={style}
        value={value}
        onChange={(e) => {
          onChange(e.target.value)
          setTimeout(() => validate(), 0)
        }}
      />
      {renderError(validationStatus, validationMessage)}
    </span>
  );
};

export default field(fieldValidation(MyInput));

Input-3.js

/******************************************************
 * onBlur/OnChange example.
 * Validation in sync with input.
 * https://www.webpackbin.com/bins/-L0Bprgrd2Ik5l4FFPAY
 ******************************************************/
import React from 'react';
import { field } from 'neoform';
import { fieldValidation } from 'neoform-validation';

const renderError = (status, message) => {
  if (status !== false) {
    return null;
  }

  return (
    <span>{message}</span>
  );
};

const MyInput = ({
  value = '',
  onChange,
  validate,
  validationStatus,
  validationMessage,
  ...props
}) => {
  const style = {
    backgroundColor: validationStatus === false ? 'red' : 'white'
  };

  return (
    <span>
      <input
        {...props}
        style={style}
        value={value}
        onBlur={validate}
        onChange={(e) => {
          onChange(e.target.value)
          if (!validationStatus) {
            setTimeout(() => validate(), 0)
          }
        }}
      />
      {renderError(validationStatus, validationMessage)}
    </span>
  );
};

export default field(fieldValidation(MyInput));

Exploring neoform validation

• Original demo: onBlur validation
• Input-1: onChange validation - Validation out of sync with input.
• Input-2: onChange validation - Now validation in sync with input.
• Input-3: onBlur/onChange validation - Validation in sync with input.

Proposed solution setTimeout(() => validate(), 0): perform validation at the next turn of event loop.
It would be nice to solve the out of sync issue inside the neoform package.