[IFRAME] Uncaught TypeError: Cannot read property 'unshift' of undefined when dragging

[Vadorequest]

I get the following message when I'm dragging my item: Uncaught TypeError: Cannot read property 'unshift' of undefined.

I looked at the error and found out that the following code was throwing the exception.

  HTML5Backend.prototype.handleDragStart = function handleDragStart(e, sourceId) {
    this.dragStartSourceIds.unshift(sourceId);// HERE
  };

So, I took a look at this:

The field dragStartSourceIds simply doesn't exist.

---

Here is my code (CJSX)

React = require 'react'
{ DragSource, DropTarget } = require 'react-dnd'

patternSource =
    beginDrag: (props) ->
        console.log props
        return { context: context }
    endDrag: (props, monitor, component) ->
        console.log props, monitor, component

collect = (connect, monitor) ->
    return {
        connectDragSource: connect.dragSource()
        isDragging: monitor.isDragging()
    }

TYPE_PATTERN = 'PATTERN'

...

module.exports = DragSource(TYPE_PATTERN, patternSource, collect)(PatternEditor)

The component itself is wrapped into another component (many levels higher), my App component, basically, as explained in the doc.

The drag action itself works, but I'm trying to implement the drop now and was trying to simply display a class when the component is being dragged and it fails because of the exception.

What did I do wrong? I'm just getting started with it.

[froatsnook]

Sorry you're having trouble :/.

What browser are you using? Can you show how you're creating the DragDropContext? Can you show how you're using connectDragSource in your component?

[Vadorequest]

Thanks for the quick reply. I'm using Chrome latest.

App.cjsx

HTML5Backend = require('react-dnd-html5-backend')
{ DragDropContext } = require('react-dnd')

class App extends React.Component
  #internal logic

module.exports = DragDropContext(HTML5Backend)(App)

AFAIK I follow exactly what the doc explains, I'm following the tutorial right now to see if I haven't missed a step.

[Vadorequest]

Okay, I think I found out why. It's because my components are within an Iframe using react-frame-component@0.5.2 => https://github.com/ryanseddon/react-frame-component

When I setup my components exactly the same way outside of the iframe, it seems to work fine.

[froatsnook]

Ah that explains it!

The code that's not running is in HTML5Backend from react-dnd-html5-backend here:

  handleTopDragStartCapture() {
    this.clearCurrentDragSourceNode();
    this.dragStartSourceIds = [];
  }

and this is bound like window.addEventListener('dragstart', this.handleTopDragStartCapture, true);. And this isn't going to fire for dragstart events within an iframe.

Are you using an iframe per component? Or just one that your drag&drop components live within?

[Vadorequest]

I'm using only one iframe which contains my Pattern elements, those Pattern can be drag & dropped.
I've read the #241 thread and found an ugly workaround. I'm looking for a proper way to do it, if you have any insight.

[Vadorequest]

I think I just understood that I actually just needed to execute the DragDropContext(HTML5Backend)(MyComponent) inside the iframe and not outside of it as I do. I'll give it a try tomorrow.

In the meantime, I've changed the code of the HTML5Backend to apply/remove listener on an array of targets, which are my iframe.contentDocument and window so I can have DnD everywhere. :)
Works like a charm, but that's a bit hacky.

[killroy42]

Hmm, I am getting this issue without using iframes. Perhaps related to some other, unrelated component doing it's on drag and drop thing. I noticed that this.dragOverTargetIds is not initialized in the constructor, and the error occurs because handleDragOver fires before that property is ever initialized. Would it not be best to either initialize taht property, or gate the handler correctly that it only fires when required? I feel this is a bug.

[svsool]

Might fix the problem, not sure it's the best way though

import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';

const FixedHTML5Backend = manager => {
  const backend = new HTML5Backend(manager);
  const originalConnectDragSource = backend.connectDragSource;

  backend.connectDragSource = function(sourceId, node, options) {
    backend.handleDragStart = function(e, sourceId) {
      if (!backend.dragStartSourceIds) backend.dragStartSourceIds = [];
      backend.dragStartSourceIds.unshift(sourceId);
    };

    return originalConnectDragSource.apply(backend, [sourceId, node, options]);
  };

  return backend;
};

export default DragDropContext(FixedHTML5Backend);

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.