Error when dropping an item with nested list into a another item with nested list

[filipkis]

Consider the following case:

• item 1
  • subitem 1
• item 2
• item 3
  • subitem 2

If both the main list and sublists are connected then root items can be normally sorted each other and item 2 can be dragged to subitem of item 1 or item 3.

However, if you drag item 3 as subitem of item 1, i.e. aiming to get the following:

• item 1
  • subitem 1
  • item 3
    • subitem 2
• item 2

then there will be the following error (and the subitem 2 will not be shown):

Sortable.js:1823 Uncaught TypeError: Cannot read property 'Sortable1551478014931' of null
    at _dispatchEvent (VM1983 Sortable.js:1823)
    at Sortable._onDrop (VM1983 Sortable.js:1446)
    at Sortable.handleEvent (VM1983 Sortable.js:1527)

A bit of debugging showed that ng-sortable triggers destroy which deletes, I believe, the sortable of the dragging item i.e. item 3.

Here is a minimal codepen demo.

This might be related to #43

[filipkis]

A bit of debugging showed that the reason is that during onAdd method the ng-sortable will the dragged item from the list and call the $scope.apply() which will trigger the $destroy on the ng-sortable.

Removing that $scope.apply() is however not enough because there's another one that's called also to early.

However, removing both of those actually removes the above reported error and on the first glance all seems to work fine.

So now the question remains why was there a need to trigger the digest twice in onAdd (once through _sync and once directly) and in once onUpdate (through _sync).

Isn't it enough to just call scope.$apply() in onEnd?