onDrop, receiving console error node.contains is not a function

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

• I found a bug
• I want to propose a feature

What is the current behavior? All functionality works as expected, however, when dragging and dropping files there is always this console error: Uncaught TypeError: r.node.contains is not a function at HTMLDocument.r.onDocumentDrop

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

With the following code:

<Dropzone
      className={classes.dropzone}
      accept="image/jpeg, image/png"
      onDrop={onDrop}
      id="poster-dropzone"
    >
      {({ getRootProps, getInputProps, isDragActive }) => (
        <Paper
          {...getRootProps()}
          className={classNames({
            [classes.posterArt]: true,
            [classes.hoverPoster]: isDragActive,
          })}
          elevation={8}
        >
          <input {...getInputProps()} />
          <Masonry>
            {posterFiles.map(poster => (
              <PosterThumbnail
                key={poster._id}
                data={data}
                onChange={onChange}
                poster={poster}
                posterTitle={getPosterTitle(posterTypes, posterMetadata, poster._id)}
              />
            ))}
          </Masonry>

          <div className={classes.addIcon}>
            <Add />
          </div>
        </Paper>
      )}
    </Dropzone>

Clicking the input to upload works with no problems. But when dragging and dropping, the upload works, but I get this error: Uncaught TypeError: r.node.contains is not a function at HTMLDocument.r.onDocumentDrop Upon inspecting this error, I see it takes me to the minified react-dropzone dist/index.js

What is the expected behavior?

For the functionality to work with no console errors.

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

Testing in Chrome on macOs Mojave. Using react-dropzone 8.1.0

[pauldiloreto]

@rolandjitsu Thanks for your response! Unfortunately, adding the refKey: 'innerRef' gave me some console error about refs not working on function components.

However, simply wrapping my <Paper> component with <div {...getRootProps()}> fixed the issue. Thanks!

[rolandjitsu]

@vanyakosmos we already have this sort of issue example in our docs, but for styled components. Since they moved away from innerRef, I think it’s a good idea to use mui instead as example for setting references using custom refKey.