Uncaught Invariant Violation: traverseParentPath(...): Cannot traverse from and to the same ID, ``
<p><strong>The setup</strong></p>
<p>In my project I use a lot of libraries, but for this case I think these are relevant: <a href="https://github.com/erikras/redux-form/" rel="nofollow noreferrer">redux-form</a>, <a href="https://github.com/callemall/material-ui" rel="nofollow noreferrer">material-ui</a> and <a href="https://github.com/ParsePlatform/Parse-SDK-JS/" rel="nofollow noreferrer">parse</a>.</p>
<p>In my app I have a form component that looks like this:</p>
<pre><code>class ObjectForm {

  render() {
    const { fields: { field }, handleSubmit, submitting } = this.props;

    return (
      &lt;form onSubmit={handleSubmit}&gt;
        &lt;TextField hintText=&quot;Hint Text&quot; {...field} /&gt;
        &lt;RaisedButton label=&quot;Send&quot; type=&quot;submit&quot; disabled={submitting} /&gt;
      &lt;/form&gt;
    );
  }

}
</code></pre>
<p>Wrapped by a container, something like:</p>
<pre><code>function mapStateToProps(state) {
  const { object } = state;
  return {
    object,
    initialValues: {
      field: object.get('field'),
    },
    onSubmit: data =&gt; {
      return object.save({
        field: data.field,
      });
    },
  };
}

export default reduxForm({
  form: 'objectForm',
  fields: [
    'field',
  ],
}, mapStateToProps)(ObjectForm);
</code></pre>
<p><strong>The problem</strong></p>
<p>The problem is that, when the form is dirty (I changed the value in the input), I get this error:</p>
<pre><code>Uncaught Invariant Violation: traverseParentPath(...): Cannot traverse from and to the same ID, ``.
</code></pre>
<p>Besides that, the parse object actually gets saved, but the button doesn't disable while until the save ends.</p>
<p>If I just submit the form again, without changing any value, everything works just fine.</p>
<p><strong>What could be causing it</strong></p>
<p>Until now, I could find 3 pieces of code that, if removed, makes the error go away!</p>
<p>The first one is the submit button's <code>disabled</code> property. Removing the <code>disabled={submitting}</code> part, make the error go away, but then I miss the visual feedback. <strong>Update:</strong> If I remove the <code>disabled</code> attribute, but use <code>submitting</code> property to conditionally show a loading indicator no error is thrown, but the indicator isn't shown as well (although it does show up if the form is clean).</p>
<p>The second is not to send the <code>initialValues</code> prop to the reduxForm. Removing <code>initialValues: {...}</code> also makes the error go away.</p>
<p>Last but not least, not to set the new value to the parse object property also makes the error go away. Just remove the parameter from <code>object.save</code> call and everything works just fine.</p>
<p><strong>Help!</strong></p>
<p>I'm struggling for days because of this, I'm out of ideas.</p>
<p><strong>Call stack</strong></p>
<p><a href="https://i.stack.imgur.com/g67zC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g67zC.png" alt="enter image description here" /></a></p>