React LinkedStateMixin with geocomplete

Question

Currently using Rails 4 with react-rails gem and geocomplete gem.

All worked fine(ish) until I've changed the front end to use Reactjs. When I type few characters, the autocomplete list shows up. I choose the location but only the few characters are shown in my State. Example: When I type "bir", the list for "Birmingham" shows. If I select "Birmingham, United Kingdom", only "bir" gets stored, why?

js.jsx:

var NewProject = React.createClass({
  mixins: [React.addons.LinkedStateMixin],

  getInitialState: function() {
    return {
      location: this.props.data.location
    }
  },

  render: function(){
    $("#location").geocomplete({ details: "form" });
    return <input type="text" id="location" valueLink={this.linkState('location')} />;
  }
}); 

How to get the full value of the string when selected no matter if I typed in few characters?

Answer 1

The problem is geocomplete does some magic to the input which doesn't play well with how React observes the modification of the field. I would try to use other solution for autocompletion but if you need to stick with geocomplete you could try to use jquery + the plain onChange method to detect changes in the field. Something like this:

var NewProject = React.createClass({

  getInitialState: function() {
    return {
      location: this.props.data.location
    }
  },
  
  onGeoChange: function(e) {
    this.setState({
      location:  $("#location").val()
    });
  },

  render: function(){
    $("#location").geocomplete({ details: "form" });
    return <input type="text" id="location" onChange={this.onGeoChange} />;
  }
});