Hover and drop not being called when a DragLayer is used.

When I use the DragLayer HOC to customise the drag preview, hovering over a drop target doesn’t work if the drag preview is placed directly under the mouse pointer. However if the drag preview is placed adjacent to the pointer everything works as expected.

So basically if I define a DragLayer like this…

const dragLayerConnector = monitor => ({
  isDragging: monitor.isDragging(),
  itemType: monitor.getItemType(),
  item: monitor.getItem(),
  currentOffset: monitor.getSourceClientOffset(),
  initialClientOffset: monitor.getInitialClientOffset(),
  initialSourceClientOffset: monitor.getInitialSourceClientOffset(),
});

class MyDragLayer extends Component {
  getStyles() {
    const { currentOffset } = this.props;

    if (!currentOffset) {
      return {
        display: 'none',
      };
    }
    const { x, y } = currentOffset;
    
    return {
      transform: `translate(${x}px, ${y}px)`,
      position: 'absolute',
      width: '200px',
    };
  }

  render() {
    const {
      isDragging,
      itemType,
      item,
      currentOffset,
      initialClientOffset,
      initialSourceClientOffset,
      ...other
    } = this.props;

    if (!isDragging) {
      return null;
    }

    if (itemType !== Types.MyItem) {
      return null;
    }

    if (!item) {
      return null;
    }

    const style = this.getStyles();

    return (
      <div style={style}>
        Preview test
      </div>
    );
  }
}

export default DragLayer(dragLayerConnector)(MyDragLayer);

…if my drag source is wider than 200px and I begin to drag from beyond the 200px that the drag layer draws, everything works as expected. However if I begin to drag from within the 200px width, where the draglayer preview is rendered, dragging is automatically stopped as soon as the drag layer renders the first time.

I’ve managed to work around this by leaving the preview drawn by the drag layer one pixel under my pointer, using the following solution inside getStyles, however it would be nice if this wasn’t necessary:

getStyles() {
    const { currentOffset, initialClientOffset, initialSourceClientOffset } = this.props;

    if (!currentOffset || !initialClientOffset || !initialSourceClientOffset) {
      return {
        display: 'none',
      };
    }
    const { x, y } = currentOffset;
    const { y: yInitPointer } = initialClientOffset;
    const { y: yInitSource } = initialSourceClientOffset;

    return {
      transform: `translate(${x}px, ${y + (yInitPointer - yInitSource + 1)}px)`,
      position: 'absolute',
      width: '200px',
    };
  }

[MihirGH]

Adding pointer-events: none in the preview that is rendered in my DragLayer solved this issue.

[MihirGH]

Hi, I am also facing the same issue. Here is the link to the codesandbox: https://codesandbox.io/s/awesome-currying-q646k?file=/src/components/Table.tsx

Steps to reproduce in the codesandbox:

• Click on the button to enable custom drag layer
• Try dragging the first column cell and drop - hover/drop is not getting called and hence the rows are not getting swapped.

For me the solution above is also not working. Can someone please help?