Infinite rendering invalidation detected when dynamic creation of tree data is made

[mikaellisselgard]

I'm working on an application where I'm using ember-cli-jstree to handle user bookmarks, and I'm getting Uncaught Error: infinite rendering invalidation detected when working with deeply nested tree strucutres.

In my application, the tree data provided to the ember-jstree component is a computed property with data of the result from a recursive function, something like below:

{{ember-jstree
  data=treeData
  ...
}}

treeData: computed('groups.[]', function() {
  return this.get('groups').map((group => this._treeData(group));
}

_treeData(group) {
  const children = [];

  group.get('children').forEach((child) => {
    children.push(this._treeData(child));
  });

  return { name: group.get('name'), children }
},

When the user has a tree structure that is deeper than 10 levels an error is thrown when the user tries to add a bookmark to the deepest level (10 is the maximum number of loops before the error is thrown). You can see where the error in ember-glimmer is thrown here

When digging around looking for solutions to this problem it seems that the problem many of the times is related to the ember runloop. And when I looked through your source code I noticed that there's a lot of Ember.run in your event handlers. In my case, changing Ember.run to Ember.run.next solves all my problems and the error can no longer be reproduced. Does anyone know if there's another solution to my problem? If not, is it possible to submit a PR making the necessary changes?

[mikaellisselgard]

Since #90 is now merged, can we close this?