clauderic / clauderic/react-sortable-hoc
React Sortable HOC interfering with React Draggable
- Dominant language
- JavaScript
- Stars
- 10.9k
- Forks
- 959
- PR merge metrics
- No merged PRs in 30d
Description
Hi,
Based on the [following](https://embed.plnkr.co/N4iYHYE9gPLp4Y3NHbhk/) code I tried to implement sortable table columns with React Sortable HOC and React Virtualized Table. The code uses React Draggable for column resizing.
Upon some testing I realized that React Sortable HOC is interfering with React `Draggable`, probably because the Draggable component is inside `SortableElement`. I get undefined error messages to the `collection` property. The problem happens when a `Draggable` element is dragged over another `SortableElement`. This is because the `Draggable` component doesn't have a `collection` property, which is referenced by the `Manager.getActive` function.
The fix I came up is pretty simple, I just had to modify the `Manager.getActive` function to check if `this.active` is defined and only return `find` if `this.active` is not undefined. The `find` method would return `undefined` anyway if no item is found so there is no need for other code changes.
I'm preparing a pull request.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by locating the Manager.getActive function mentioned in the issue and reproduce the interaction using the linked Plunker example. Verify the failure when a React Draggable element is dragged over another SortableElement, then confirm that the undefined collection case no longer throws and the sortable behavior still works.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100