Ad

React DnD: BeginDrag() Never Called On Firefox

I'm using React DnD for a couple of different dragsources. In chrome they all work fine but for one of the components in Firefox, although it looks like the component is being dragged, nothing happens on the droptarget. Some investigation shows that beginDrag() is never called:

I have the following wrapper on the malfunctioning component (with some debug printing):

DragSource(
  DIALOGUE,
  {
    beginDrag(props) {
      console.log('beginDrag()');
      return {
        id: props.id,
      };
    },
  },
  (connection, monitor) => {
    console.log('monitor.canDrag()', monitor.canDrag());
    console.log('monitor.isDragging()', monitor.isDragging());
    console.log('monitor.getItemType()', monitor.getItemType());
    console.log('monitor.getItem()', monitor.getItem());
    return {
      connectDragSource: connection.dragSource(),
      isDragging: monitor.isDragging(),
    };
  },
)

When I start dragging the component in chrome (where it's working) I see the following console output:

beginDrag()
monitor.canDrag() false
monitor.isDragging() false
monitor.getItemType() DIALOGUE
monitor.getItem() {id: "bcf5947c-29ec-4fd8-9efc-6f3810ea167a"}
monitor.canDrag() false
monitor.isDragging() true
monitor.getItemType() DIALOGUE
monitor.getItem() {id: "bcf5947c-29ec-4fd8-9efc-6f3810ea167a"}

while in Firefox, where it's not working, I get

monitor.canDrag() false
monitor.isDragging() false
monitor.getItemType() __NATIVE_URL__
monitor.getItem() Object { urls: Getter }

So I see that beginDrag is never called, isDragging never becomes true and itemType and item have some strange values.

I'm using react version 16.3.2, react-dnd version 2.6.0 and Firefox version 59.0.3.

Any idea what's going on?

Ad

Answer

I hit this problem when trying to make a button draggable - it turns out buttons aren't draggable as of Firefox 61.0.1 (https://bugzilla.mozilla.org/show_bug.cgi?id=568313) - and fixed it by switching to a <span>.

Ad
source: stackoverflow.com
Ad