react-dnd: After 7.4.5 this.props.connectDragPreview(getEmptyImage() fails intermittently

Describe the bug After 7.4.5 this.props.connectDragPreview(getEmptyImage()) fails intermittently

To Reproduce Steps to reproduce the behavior:

Implement a draggable item
this.props.connectDragPreview(getEmptyImage())
Use 7.4.5, see it works
Use any 7.X later than that and see a drag preview that shouldn’t be there

Expected behavior If I don’t want to see the default “transparent drag image” I shouldn’t

Screenshots The “token” is being dragged down and to the left. Large card is my <CustomDragLayer /> as expected and the transparent “token” is the default react-dnd drag preview I have explicitly turned off

Desktop (please complete the following information):

OS: Linux, Windows, macOS
Browser electron
Version 4.X

Additional context Love the library, looking at upgraded to 8.x so I can’t say for sure if it happens in the 8 branch but 7 is DEFINITELY having a regression!

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 4
Comments: 19 (6 by maintainers)

Commits related to this issue

fix: #1428 - remove code that detached dragpreviews when dragsources where disconnected — committed to react-dnd/react-dnd by darthtrevino 5 years ago
fix: #1428 - remove code that detached dragpreviews when dragsources where disconnected (#1441) — committed to react-dnd/react-dnd by darthtrevino 5 years ago
fix: #1428 - remove code that detached dragpreviews when dragsources where disconnected (#1441) — committed to react-dnd/react-dnd by darthtrevino 5 years ago

Most upvoted comments

No no, sorry, I’m not a contributor to react-dnd. What I meant is that I was suffering the same issue, but rewrote my component to use the hooks API instead of the ‘Legacy Decorator API’. It seems like the bug is specifically contained to the Legacy Decorator API. I had a look in the code changes for 7.0.0 but couldn’t see anything that should cause this. See the docs (http://react-dnd.github.io/react-dnd/about) You will need v7.6.0 or above, but it will possibly resolve your issue.

An example of the difference would be:

Before:

componentDidMount() {
  this.props.connectDragPreview(getEmptyImage())
}

After:

  const [,, preview] = useDrag({
    item: ITEM,
  });

  useEffect(() => {
    preview(getEmptyImage(), { captureDraggingState: true })
  }, [])

SeaOfTea on Jun 29, 2019