Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[bug] Removing items while dragging causes multiple issues #188

Open
wdoug opened this issue Oct 7, 2020 · 5 comments
Open

[bug] Removing items while dragging causes multiple issues #188

wdoug opened this issue Oct 7, 2020 · 5 comments

Comments

@wdoug
Copy link

wdoug commented Oct 7, 2020

Describe the bug
When you are dragging an item, if the list prop is updated such that it should remove the element you are dragging we have seen multiple bugs:

  1. The element dragging should be removed, but it consistently wasn't
  2. Multiple JavaScript errors were frequently thrown

To Reproduce
Steps to reproduce the behavior:

  1. Have a list of sortable elements in the <ReactSortableJS /> component
  2. Start dragging an element
  3. While you're dragging, have an event trigger updating the list prop so that the element you are dragging should be removed

Expected behavior
The element you are dragging should be removed with no errors thrown and the state of things continuing to work properly

Information
This is required. Issues without this critical information will be closed.

Versions - Look in your package.json for this information:
react-sortablejs = 6.0.0 (also had seen this same behavior with an earlier version)
react = 16.9.0

Additional context
Hoping to set up a codesandbox example at some point, just wanted to start the conversation here first

@wdoug
Copy link
Author

wdoug commented Oct 7, 2020

Here's a codesandbox to play around with: https://codesandbox.io/s/react-sortablejs-forked-oprbs?file=/src/index.js

I haven't been able to reproduce all the issues yet, but I've seen a few.

@wdoug
Copy link
Author

wdoug commented Oct 7, 2020

Example 1 (Recorded on Chrome):

@wdoug
Copy link
Author

wdoug commented Oct 7, 2020

Example 2 (Recorded on Firefox):

Error when dropping the element that should have already been removed. I didn't record it, but in this case, the element remains behind in the DOM after dropping even though React thinks it shouldn't be there and you can't interact with it.

@wdoug
Copy link
Author

wdoug commented Oct 7, 2020

Example 3 (Recorded on Firefox):

Unfortunately, I didn't capture the second error here, but the same issue happened after closing that overlay where the element existed in the DOM but couldn't be interacted with anymore.

@wdoug
Copy link
Author

wdoug commented Oct 8, 2020

Update: It turns out that at least some of these issues come from Sortablejs itself: SortableJS/Sortable#1943

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant