Can't pass object as a value

[sallomendo]

I don't know if I'm doing something wrong but I can't find a way to pass an object to my input, I have an address formsy input that holds:

{
 lat: '',
 lng:'',
 address:''
}

When I pass that object it triggers the validations a million times and crash my chrome tab. I tried to pass an object to one of the examples with the same result.

[christianalfoni]

Hi @simiographics ,

Could you paste a bit more code that causes the crash? If you are doing something wrong, something is missing in the documentation ;-)

[sallomendo]

Sure, here is the input code:

let AddressInput = React.createClass({

  displayName: 'AddressInput',

  mixins: [FormsyMixin],

  componentDidMount () {
    let Google = require('google');
    let input = this.refs[this.props.name].getDOMNode();
    let autocomplete = new Google.maps.places.Autocomplete(input, {
      types: ['geocode']
    });

    Google.maps.event.addListener(autocomplete, 'place_changed', this.handlePlaceChange.bind(this, autocomplete));
  },

  handlePlaceChange (autocomplete) {
    let place = autocomplete.getPlace();
    let lat = place.geometry.location.lat();
    let lng = place.geometry.location.lng();
    let address = this.refs[this.props.name].getDOMNode().value;

    this.setValue({
      lng: lng,
      lat: lat,
      address: address
    });
  },

  cleanAddress () {
    this.setValue({
      lng: '',
      lat: '',
      address: ''
    });
  },

  render () {
    return (
      <div>
        <input type="text"
               ref={this.props.name}
               className={this.props.className}
               placeholder={this.props.placeholder}
               onChange={this.cleanAddress} />;
      </div>
    );
  }
});

This is how I'm trying to to call it:

<Address name="place"
         value={{ lng: "", lat: "", address: "" }}
         className="outlined-input"
         placeholder="Address"
         validations="isAddress"
         {...this.props} required />

And the validation method:

Formsy.addValidationRule('isAddress', function(values, value) {
  if ( value.lng === "" || value.lat === "" || value.address === "" ) {
    return false;
  } else {
    return true;
  };
});

[christianalfoni]

Hi @simiographics,

You seem to be creating a loop here. Whenever the input changes you clean it again. In what situation do you want the input to be cleared? I suppose you do not want that whenever it changes?

[sallomendo]

I don't think thats the problem man, even this code don't work:

const AddressInput = React.createClass({

  displayName: 'AddressInput',

  mixins: [FormsyMixin],

  render () {
    return (
      <div>
        <input type="text" />;
      </div>
    );
  }
});

I get Uncaught RangeError: Maximum call stack size exceeded

[christianalfoni]

Hi again,

This is very strange. I was not able to reproduce the error on a test I ran locally. I am thinking there is something "outside" causing the issue.

Could you paste the complete code that runs on the previous example you gave? Try to narrow it completely down to just rendering the form with the input? I have to reproduce it to figure out what is happening.

Would also be great to know what version of React your are running.

Nobody else has reported this kind of error so I would believe it is a weird edge case. Would be great to get to the bottom of it though :-)

[sallomendo]

Versions: [email protected] and [email protected]
Browser: Google Chrome

I tried to make it work in a isolated code and got the same result, I think it have something to do with the onValid and onInvalid callbacks, I console.log in those function and it seems they are being called in a loop.

var React = require('react');
var Formsy = require('./formsy-react/src/main.js');

Formsy.addValidationRule('isAddress', function (values, value) {
  if (value.lng === "" || value.lat === "" || value.address === "") {
    return false;
  } else {
    return true;
  };
});

var Input = React.createClass({

  mixins: [Formsy.Mixin],

  render: function () {
    return <input />
  }
});

var FormApp = React.createClass({
  getInitialState: function () {
    return {
      canSubmit: false
    };
  },

  enableButton: function () {
    console.log("Enabling Button");

    this.setState({
      canSubmit: true
    });
  },

  disableButton: function () {
    console.log("Disabling Button");

    this.setState({
      canSubmit: false
    });
  },

  submit: function (values) {

  },

  getAddressModel: function () {
    return {
      lat: "",
      lng: "",
      address: ""
    };
  },

  render: function () {
    return (
      <Formsy.Form onSubmit={this.submit} onValid={this.enableButton} onInvalid={this.disableButton}>
        <Input name="address" value={this.getAddressModel()} validations="isAddress" />   
      </Formsy.Form>
    );
  }
});

React.render(<FormApp />, document.getElementById('app'));

[christianalfoni]

Thanks so much for helping me out with this! Looking at it right now!

[christianalfoni]

Okay, it is definitely a bug here. Tracking it now and will release a new version when it is fixed.

[christianalfoni]

Okay, found the bug, fixing it now. It was a value comparison that did not handle objects and arrays.

[christianalfoni]

Okay, fixed, creating a new release now. Just have to document a couple of things :)

[christianalfoni]

Okay, released version 0.13 with some other fixes too

[sallomendo]

Thanks a lot man, I was going crazy about this. I need to try it now

[christianalfoni]

Great, let me know how it goes :-)

[sallomendo]

For some reason I'm having the same results, even with the new version, exactly with the code I pasted above. Any suggestions?

[christianalfoni]

Hi @simiographics,

It seems my test did not cover this scenario. Working on it now!

[christianalfoni]

Okay, a stupid mistake, strange that the test did not get it. Now tested with your example. Will release later today.

[christianalfoni]

Okay, released new version, would be awesome if you could test it again. Thanks for your patience @simiographics !

[sallomendo]

@christianalfoni It's working! thanks a lot for this great library 👍

[christianalfoni]

Sweet! Good to hear and thanks!