clauderic / clauderic/react-sortable-hoc

Bug? Nested lists break on initial sort when `distance` prop is set

Open
#264 2 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 @clauderic,

First off, thanks for a superb library! My team and I are big fans. :)

I've encountered a situation that I _think_ is a bug. If you:
* Nest multiple `SortableContainer` lists,
* Set a `distance` prop on each,
* Click within a member of the _outer_ list, and
* Try to drag a member of the _inner_ list,

...the drag behavior will break: the outer list item will move instead. After that, sorting the inner list will work as expected.

**Here's a repro: https://jsfiddle.net/bxz1716v/**
* Click within "Section B"
* Try to drag a child within the section (drag fails)
* Try again (drag succeeds)

(In that repro, the only change from your nesting demo at https://jsfiddle.net/8tw72bgy/12/ is the addition of`distance={10}` props.)

[![https://gyazo.com/47810b4748278077342621cf49940fa4](https://i.gyazo.com/47810b4748278077342621cf49940fa4.gif)](https://gyazo.com/47810b4748278077342621cf49940fa4)

So far as I can tell, the issue involves the fact that:
* [The `handleStart` handler sets `this.manager.active` regardless of whether `distance` is set](https://github.com/clauderic/react-sortable-hoc/blob/master/src/SortableContainer/index.js#L143-L172)
* [The `handleEnd` handler only cancels (unsets `this.manager.active`) if distance is _not_ set](https://github.com/clauderic/react-sortable-hoc/blob/master/src/SortableContainer/index.js#L224-L226)

So, that initial click in "Section B" sets the _outer_ list to active (and doesn't unset it on `mouseup`). Then the initial (broken) drag gets as far as [`handleSortEnd`, which sets `this.manager.active` to null](https://github.com/clauderic/react-sortable-hoc/blob/master/src/SortableContainer/index.js#L418). After that, child dragging works.

Does this appear to be a bug to you as well, or am I overlooking something?

Thanks!

P.S. I noticed that https://github.com/clauderic/react-sortable-hoc/issues/130 involves very similar conditions, but a different outcome -- not sure what to make of that yet.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.