Element: [Bug Report] Issue with Tree when being dragged onto itself, or a child of itself. Causes nasty memory recursive issue. Seems to only be happening on Chrome

[johndatserakis]

Element UI version

2.4.0

OS/Browsers version

Mac Chrome

Vue version

2.5.17-beta.0

Reproduction Link

https://jsfiddle.net/mrn8e9b5/

Steps to reproduce

PLEASE NOTE - After much testing, I am finding that this issue is only happening in Chrome! (I'm on mac). On Safari and Firefox it behaves normally. I hope this means the fix will not be too hard to sort out!

There are 2 major issues.

To reproduce the first issue, simply click and drag Level One 3 right under itself. Go very slowly, and you will see a blue bar appear, which lets you drop itself on itself. This of course causes a browser crash.

For the second issue, click and drag Level One 3 all the way to its last child, which is Level 3-2-1. Again, go slowly, as you won't be able to drop directly on Level 3-2-1, but you will be able to drop right after it, even though the blue bar does not show up on this one. This crashes the browser and causes a memory leak.

What is very strange, on the actual demo page - I cannot get this to happen. I don't know if it's because you are using a special build for the docs or what. I can reproduce it in my own project and in a clean jsfiddle.

What is Expected?

It is expected that a parent cannot be dragged and dropped to be a child of his child, as that causes a lot of recursive problems. Also, the blue bar should not show up when the drop should not be allow.

What is actually happening?

What seems to be happening is that the check for acceptable drop works most of the time, but it doesn't seem to work when a parent is asked to be a child of his child.

I tried a lot of fixes to this, compared css, props, js, all amounted to nothing. I tried using :allowDrop, which should allow me to prevent a specific scenario from happening - for instance, checkin to make sure the dropped element is not a parent of an element. The problem is that allowDrop doesn't work for this situation - and I can't figure out why. I console.logged it and it should be returning false - but it doesn't stop the drop. Below is the allowDrop code I tried:

allowDrop(draggingNode, dropNode, type) {
  if (draggingNode.data.id === dropNode.parent.data.id) {
    console.log('we get here successfully - but it doesn't stop the drop!')
    return false
  } else {
    console.log('we get here too')
    return true
 }
}

And here is there error that the recursive memory leak is causing - there's actually 2 versions:

vue.runtime.esm.js:588 [Vue warn]: Error in event handler for "tree-node-drag-end": "TypeError: Cannot read property 'insertAfter' of null"
found in
---> <ElTree>
       <Tree> at src/components/Partials/Components/Tree.vue
         <Files> at src/components/Layouts/Main/Program/Files.vue
           <App> at src/App.vue
             <Root>
warn @ vue.runtime.esm.js:588
logError @ vue.runtime.esm.js:1732
globalHandleError @ vue.runtime.esm.js:1727
handleError @ vue.runtime.esm.js:1716
Vue.$emit @ vue.runtime.esm.js:2535
e.(anonymous function) @ backend.js:1
handleDragEnd @ element-ui.common.js:22986
dragend @ element-ui.common.js:23043
invoker @ vue.runtime.esm.js:2022
fn._withTask.fn._withTask @ vue.runtime.esm.js:1821
vue.runtime.esm.js:1736 TypeError: Cannot read property 'insertAfter' of null
    at VueComponent.eval (webpack:///./node_modules/element-ui/lib/element-ui.common.js?:21730:32)
    at VueComponent.Vue.$emit (webpack:///./node_modules/vue/dist/vue.runtime.esm.js?:2533:18)
    at VueComponent.e.(anonymous function) [as $emit] (chrome-extension://vue-js-devtools/build/backend.js:1:17624)
    at VueComponent.handleDragEnd (webpack:///./node_modules/element-ui/lib/element-ui.common.js?:22986:17)
    at dragend (webpack:///./node_modules/element-ui/lib/element-ui.common.js?:23043:549)
    at invoker (webpack:///./node_modules/vue/dist/vue.runtime.esm.js?:2022:18)
    at HTMLDivElement.fn._withTask.fn._withTask (webpack:///./node_modules/vue/dist/vue.runtime.esm.js?:1821:18)

[Vue warn]: Error in event handler for "tree-node-drag-end": "RangeError: Maximum call stack size exceeded"

found in

---> <ElTree>
       <Tree> at src/components/Partials/Components/Tree.vue
         <Files> at src/components/Layouts/Main/Program/Files.vue
           <App> at src/App.vue
             <Root>
warn @ vue.runtime.esm.js:588
logError @ vue.runtime.esm.js:1732
globalHandleError @ vue.runtime.esm.js:1727
handleError @ vue.runtime.esm.js:1716
Vue.$emit @ vue.runtime.esm.js:2535
e.(anonymous function) @ backend.js:1
handleDragEnd @ element-ui.common.js:22986
dragend @ element-ui.common.js:23043
invoker @ vue.runtime.esm.js:2022
fn._withTask.fn._withTask @ vue.runtime.esm.js:1821
vue.runtime.esm.js:1736 RangeError: Maximum call stack size exceeded
    at TreeStore.reactiveGetter [as key] (vue.runtime.esm.js:982)
    at Node.get (element-ui.common.js:22666)
    at TreeStore.registerNode (element-ui.common.js:21923)
    at new Node (element-ui.common.js:22274)
    at Node.insertChild (element-ui.common.js:22376)
    at Node.setData (element-ui.common.js:22328)
    at new Node (element-ui.common.js:22285)
    at Node.insertChild (element-ui.common.js:22376)
    at Node.setData (element-ui.common.js:22328)
    at new Node (element-ui.common.js:22285)

I think you guys did a great job with this library, but this issue is too big - it is critical, and will cause the app to crash when found. I do hope the fix is quick, as plan to use this component in production very soon! Let me know if there's any other data I can provide. Thanks!

[biggerV]

I also encountered this error

it doesn't stop the drop，and Caused an error

env: Chrome

    allowDrop (dragingNode, dropNode, type) { // type: before、after、inner
      if (Number(dropNode.data.type) === 1) {
        return true
      } else {
        return false   // it doesn't stop the drop，and Caused an error
      }
    },

vue.esm.js?efeb:591 [Vue warn]: Error in event handler for "tree-node-drag-end": "TypeError: Cannot read property 'insertAfter' of null"

found in

---> <ElTree>
       <Permission> at src\pages\Sys\Permissions\Permission.vue
         <ElTabPane>
           <ElTabs>
             <Index> at src\pages\Sys\Permissions\index.vue
               <ElMain>
                 <ElContainer>... (1 recursive calls)
                   <App> at src\pages\Dash.vue
                     <App> at src\App.vue
                       <Root>
warn @ vue.esm.js?efeb:591
logError @ vue.esm.js?efeb:1737
globalHandleError @ vue.esm.js?efeb:1732
handleError @ vue.esm.js?efeb:1721
Vue.$emit @ vue.esm.js?efeb:2540
e.(anonymous function) @ backend.js:1
handleDragEnd @ element-ui.common.js?52a2:22809
dragend @ element-ui.common.js?52a2:22866
invoker @ vue.esm.js?efeb:2027
fn._withTask.fn._withTask @ vue.esm.js?efeb:1826
vue.esm.js?efeb:1741 TypeError: Cannot read property 'insertAfter' of null
    at VueComponent.eval (element-ui.common.js?52a2:21565)
    at VueComponent.Vue.$emit (vue.esm.js?efeb:2538)
    at VueComponent.e.(:8080/anonymous function) [as $emit] (chrome-extension://nhdogjmejiglipccpnnnanhbledajbpd/build/backend.js:1:17624)
    at VueComponent.handleDragEnd (element-ui.common.js?52a2:22809)
    at dragend (element-ui.common.js?52a2:22866)
    at invoker (vue.esm.js?efeb:2027)
    at HTMLDivElement.fn._withTask.fn._withTask (vue.esm.js?efeb:1826)

i do hope you guys can fix it .
Thanks!

[elfman]

I can't reproduce this in my browser.
Chrome 70.0.3538 (Mac OS X 10.14.0)

[johndatserakis]

Ok great - I just tried out my jsfiddle from many months ago and it seems like I cannot reproduce the error either - maybe Chrome updated something on it's side? Perhaps this can be closed - if I come across it again I'll look to have this reopened. Thank you.

[iAn-Pinto]

I get similar error when dragging outside limits of tree as seen in attached screenshot below. My Google chrome version is Version 71.0.3578.98 (Official Build) (64-bit) macOS Mojave 10.14.2 (18C54). Element UI team kindly address this issue as drag and drop feature is otherwise great.

[ianfabs]

I'm having the same issue 😥

[oulafen]

Me too, the version 2.4.6

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[willwsn]

FYI.
This issue still exists.
please fix it!