React-sortable-hoc: Cannot read property 'top' of undefined

[george-norris-salesforce]

https://codepen.io/stoplion/pen/QMzpVL?editors=0010

Each item has unique client id. When adding a new item, sorting the items causes error.
Using client id because in our situation, we can't depend on any other property of item being unique.

[schnubor]

+1, having the same issue although using unique keys as described here https://github.com/clauderic/react-sortable-hoc/issues/270

[arbaaz]

+1

[webamon]

+1

[yueshuiniao]

I try set 'index' and 'key' different value, it worked

[Thomas101]

Hey, we've been seeing this with our project. After a lot of digging, we found that passing a custom component to SortableElement was the cause...

const SortableItem = SortableElement((props) => {
  return (<MySortableItem {...props} />)
})

...rather than doing this, we wrapped our custom component in a native dom element and it seems to have fixed the issue...

const SortableItem = SortableElement((props) => {
  return (
    <div>
      <MySortableItem {...props} />
    </div>
  )
})

More info...

Digging through the react-sortable-hoc code, it looks like when a SortableElement is created it uses ReactDom.findDOMNode to grab the dom node and store it in a list of sortable elements. This is fine, however if a custom component has a dramatic re-render call which changes the root dom node it orphans the node out the dom and leaks it. For example...

class MyComponent extends React.Component {
  render () {
    if (this.state.something) {
      return (<div>{...}</div>)
    } else {
      return (<li>{...}</li>)
    }
  }
}

(@george-norris-salesforce I see your example does this). When it does this, it generates the Cannot read property value when trying to calculate edgeOffset because the function bombs out failing to find the parent node.

Hope it helps someone else :)

[clauderic]

Closing this issue for now, this will be solved in a future release with ref forwarding, as findDOMNode will eventually be deprecated from future versions of React

[panlina]

@Thomas101 's answer saved my day. This issue still exists as of now. Is there any plan to fix it? @clauderic