title: React dnd Drop firing twice
body: <p>I have a component Port which is both draggable and droppable.
  I am using react-dnd. For backend I am using react-dnd-mouse-backend since I am working with svg and html5 backend does not support svg. I have a feeling that <code>react-dnd-mouse-backend</code> could be the root of the problem
  The code for the component is as follows :-</p>
  
  <p>Port.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import { compose } from 'redux';
  import { PropTypes } from 'prop-types';
  import { itemTypes, portInnerRadius, portOuterRadius } from './constants';
  import { DragSource, DropTarget } from 'react-dnd';
  
  const portSource = {
      beginDrag: (props) =&gt; {
          const { id, pin, position } = props.port;
          console.log('Drag props ', id, pin, position );
          return {
              type: 'port',
              port: props.port
          };
      },
  
      endDrag: (props, monitor) =&gt; {
          if (!monitor.didDrop()) {
              console.log('Drop invalid');
              return;
          }
          const draggedPort = monitor.getItem().port;
          const droppedPort = monitor.getDropResult().port;
          console.log('dragged item ', draggedPort.id, draggedPort.pin);
          console.log('dropped item ', droppedPort.id, droppedPort.pin);
      }
  };
  
  const portTarget = {
      drop: (props) =&gt; {
          const { id, pin, position } = props.port;
          console.log('Drop props ', id, pin, position);
          return {
              type: 'port',
              port: props.port
          };
      }
  };
  
  function collectDrag(connect, monitor) {
      return {
          connectDragSource: connect.dragSource(),
          isDragging: monitor.isDragging(),
          cursorDeltaOffset: monitor.getDifferenceFromInitialOffset()
      }
  }
  
  function collectDrop(connect, monitor) {
      return {
          connectDropTarget: connect.dropTarget(),
          isOver: monitor.isOver(),
          canDrop: monitor.canDrop()
      };
  }
  
  class Port extends Component {
  
      static propTypes = {
          connectDragSource: PropTypes.func.isRequired,
          isDragging: PropTypes.bool.isRequired,
          cursorDeltaOffset: PropTypes.object
      }
  
      render() {
          const { connectDragSource, connectDropTarget, isDragging, cursorDeltaOffset, port } = this.props;
          const { position } = port;
          const { x, y } = position;
  
          let path = '';
          if ( isDragging &amp;&amp; cursorDeltaOffset ) {
              path = `M${x},${y} l${cursorDeltaOffset.x},${cursorDeltaOffset.y}`;
          }
  
          return connectDragSource(connectDropTarget(
              &lt;g className={`g-connector-port`}&gt;
                  &lt;g&gt;
                      &lt;circle className="circle-connector-pin circle-outer" cx={ position.x } cy={ position.y } r={ portOuterRadius } /&gt;
                      &lt;circle className="circle-connector-pin circle-inner" cx={ position.x } cy={ position.y } r={ portInnerRadius } /&gt;
                  &lt;/g&gt;
                  { isDragging &amp;&amp; path &amp;&amp;
                      &lt;path className="path-port-drag" d={ path } stroke="black"/&gt;
                  }
              &lt;/g&gt;
          ));
      }
  }
  
  
  export default compose(
      DragSource(itemTypes.PORT, portSource, collectDrag),
      DropTarget(itemTypes.PORT, portTarget, collectDrop)
  )(Port);
  </code></pre>
  
  <p>The problem is that when I try to drag from one port to another, sometimes it works fine. But some other times the drop gets fired twice. </p>
  
  <p><a href="https://gyazo.com/5956c9c75fcf9c3bf93e1b5c5281bcd7" rel="nofollow noreferrer">https://gyazo.com/5956c9c75fcf9c3bf93e1b5c5281bcd7</a></p>
  
  <p>As you can see above, the 1st time when I connect left box pin 1 to right box pin 1.
  The log should be</p>
  
  <pre><code>drag props 1 1
  drop props 2 1 
  </code></pre>
  
  <p>instead, it is </p>
  
  <pre><code>drag props 1 1
  drop props 2 1 
  drop props 1 1
  </code></pre>
  
  <p>You can see the drop is happening twice, on the source and on the target.</p>
  
  <p>The 2nd time when I connect left pin 2 to right pin 2, the log output is as expected.</p>
  
  <p>Also in the following gif, notice how the isOver prop is randomly being set to true even though the cursor is not over it.
  <a href="https://gyazo.com/9ca3652713ffab789e6d2fc0c3426cc7" rel="nofollow noreferrer">https://gyazo.com/9ca3652713ffab789e6d2fc0c3426cc7</a></p>
  
  <p>I want to know why the drop is happening twice and why only on sometimes.</p>