clauderic / clauderic/react-sortable-hoc

React Sortable HOC interfering with React Draggable

Open
#170 0 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.