RangeError: Maximum call stack size exceeded with custom validator

[dgcoffman]

"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:/christianalfoni/formsy-react/blob/master/API.md#validations

Similar issue: #106

[tnrich]

I am also seeing this error. Either this should get fixed, or the "inline" custom validator examples should be removed

[christopherdbull]

I'm seeing this as well. I've created a custom component and it's causing an infinite loop when there is no validation set. When I set validations to isExisty it behaves as expected.

[jwohlfert23]

+1

[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.

[ffigiel]

@jamedranoa fantastic job debugging this!

[ffigiel]

Other way you can get custom validators is this

Formsy.addValidationRule('notIn', (values, value, array) => !_.includes(array, value))

// usage
validations: {
    matchRegexp: /^[\w -]+$/,
    notIn: reservedNames,
},

[Stupidism]

Why is this not fixed yet?
I came up into this bug last week and it has wasted me several hours locating the problem into formsy-react.

[dgcoffman]

I think removing it from the docs and marking wontfix would be sufficient, if maintainers have no interest in fixing this feature.

[cj3kim]

+1

[cj3kim]

When will the solution be merged in?