Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

`onDragLeave` Usage with React component throws console error and fails to reset styling

See original GitHub issue

Do you want to request a feature or report a bug?

I found a bug

What is the current behavior?

onDropLeave inherit functionality broken in new versions of React (16.5). Leaving the dropzone produces the following console error:

index.js:181 Uncaught TypeError: _this.node.contains is not a function
    at index.js:181
    at Array.filter (<anonymous>)
    at Dropzone._this.onDragLeave (index.js:180)
    at HTMLUnknownElement.callCallback (react-dom.development.js:147)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
    at invokeGuardedCallback (react-dom.development.js:250)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:265)
    at executeDispatch (react-dom.development.js:571)
    at executeDispatchesInOrder (react-dom.development.js:596)
    at executeDispatchesAndRelease (react-dom.development.js:695)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:704)
    at forEachAccumulated (react-dom.development.js:676)
    at runEventsInBatch (react-dom.development.js:844)
    at runExtractedEventsInBatch (react-dom.development.js:852)
    at handleTopLevel (react-dom.development.js:5025)
    at batchedUpdates$1 (react-dom.development.js:19916)
    at batchedUpdates (react-dom.development.js:2246)
    at dispatchEvent (react-dom.development.js:5105)

If the current behavior is a bug, please provide the steps to reproduce.

Add dropzone with base functionality to a new React component.
Drag file over dropzone.
Still dragging, move mouse to non-dropzone area.

What is the expected behavior?

That the isDropActive bool resets to false and the dropzone is de-activated without any errors.

If this is a feature request, what is motivation or use case for changing the behavior?

Please mention other relevant information such as the browser version, Operating System and react-dropzone version. react-dropzone v. 8.0.0 Chrome v. 71

Issue Analytics

State:
Created 5 years ago
Reactions:6
Comments:12

Top GitHub Comments

7reactions

padrisimocommented, Jan 15, 2019

I’m experiencing the issue only when using styled-components to style my Container. (styled-components v3.4.10)

Remember, if u use styled-components u may pass a custom refKey like {...getRootProps({ refKey: 'innerRef' })} instead of just {...getRootProps()} and all this problems should be solved.

2reactions

ARChiltoncommented, Jan 29, 2019

You were right it was the ref. I am using Emotion to style my components and so the ref needed to be innerRef just like the example here: https://github.com/react-dropzone/react-dropzone#custom-refkey

Thank you for pointing me in the right direction.

Top Results From Across the Web

Recommended way of making React component/div ...

Impose as little structure as possible on consuming components;; Use HTML5 drag and drop as primary backend but make it possible to add...

Component error handling in React using Error Boundaries

This component keeps throwing the error in the componentDidMount lifecycle method. It's not a real use-case example but enough to show a ...

Design Patterns with React Easy State | by Bertalan Miklos

React Easy State is a transparent reactive state management library with two functions and two accompanying rules. Always wrap your components with view()...

The React Handbook – Learn React for Beginners

When anything in the chain of promises fails and raises an error or rejects the promise, the control goes to the nearest catch()...

react-dropzone

Simple React hook to create a HTML5-compliant drag'n'drop zone for files. ... as refKey import styled from 'styled-components' const StyledDiv = styled.div` ...