RangeError: Maximum call stack size exceeded with custom validator

"react": "0.14.2", "formsy-react": "0.17.0",

We have a component Form:

import Formsy from 'lib/Formsy';
import FormInput from 'FormInput.jsx';
import React from 'react';

const Form = React.createClass({
  render()
  {
    return (
      <div>
        <Formsy.Form onValid={() =>  this.setState({anything: true})}>
          <FormInput name="uid" validations={{ customValidator: () => true }} />
        </Formsy.Form>
      </div>
    );
  },
});
export default Form;

using FormInput:

const React = require('React');
const Formsy = require('lib/Formsy');

const FormInput = React.createClass({
  mixins: [Formsy.Mixin],

  changeValue: function (event) {
    this.setValue(event.currentTarget.value);
  },

  render() {
    return <input type="text" onChange={this.changeValue}/>
  },
});

module.exports = FormInput;

Mounting the component or typing a character in the input causes RangeError: Maximum call stack size exceeded to be thrown to the console.

FWIW, here is a screenshot of the stacktrace for the exception thrown on component mount:

Replacing customValidator: () => true with a built-in validator like isExisty: true does not cause this exception to be thrown.

Registering a custom validator like:

Formsy.addValidationRule('isAnything', function(values, value, array) {
  return true;
});

and then using it

isAnything: true

does not cause this exception to be thrown.

I haven’t been able to figure out how to implement a custom validator as shown in this example: https://github.com/christianalfoni/formsy-react/blob/master/API.md#validations

Similar issue: https://github.com/christianalfoni/formsy-react/issues/106

[jamedranoa]

the problem is coming from here, that if condition will always be false if the component has a custom validation (a function) because the function isSame will always return false when is comparing the two functions allocated in two different objects (new props, prevProps). and the function formsy.validate will make use of setState which will repeat the cycle.

one solution (not ideal) could be adding a condition to compare functions on the isSame function and compare the toString result.

 fun1.toString() === fun2.toString();

but I’m not sure if this could have negative implications in others parts of the code.

[cj3kim]

When will the solution be merged in?