Removing dragged element on hover throws "Expected to find a valid target."

[giladv]

hi guys,

i cannot really post a specific code example as it's too cluttered at the moment but i think iv'e isolated the steps required to reproduce the issue.

• start drag
• on hover on dragged item (the item is both drop and drag connected)
  • remove state corresponding to dragged item

the error was thrown at DragDropMonitor.prototype.canDropOnTarget
because it couldn't find a target with the targetID (obviously).

use case: i"m building a sortable tree and i need to relocate the dragged & hovered item
to after it's parent node:

• if it is the last item in a nested list
• and the hovered item has an horizontal offset to the left
  (normal behaviour for tree's: http://pqx.github.io/react-ui-tree/)

on more thing: while the error occurs, it still works.

thanks!

[rachelsison]

+1 I am also having this issue

[gaearon]

Please provide an example reproducing the issue. I can take a look then.

[gaearon]

This is probably fixed in 2.1.0.
I’ll close but please let me know if not, and I’ll reopen.

[ad1992]

@gaearon I recently upgraded to react-dnd v5 and this issue is replicated again. Seems like it worked fine in 2.6.0 and also 3.0.2 but breaks in 4.0.5 and 5.0.0.

[mwielocha]

Any news on this?

[ad1992]

@gaearon any update?

[Jarch09]

Same problem here

[drjkuo]

same here in 5.0.0

[happier2]

same problem here

[dmitrii-esin]

same problem here

[ravi5b2]

same problem , Any suggestions for fix ?

[prateekkarkare]

Anyone had any luck with this?

[neilshah2000]

I have this issue on react-sortable-tree external source sample. Dragging to a red area.

https://frontend-collective.github.io/react-sortable-tree/?path=/story/advanced--drag-from-external-source
https://github.com/frontend-collective/react-sortable-tree/blob/master/stories/external-node.js

vendors~main.91acd83f50dfbcb80997.bundle.js:1 Uncaught Invariant Violation: Expected to find a valid target. at module.exports (https://frontend-collective.github.io/react-sortable-tree/vendors~main.91acd83f50dfbcb80997.bundle.js:2:592) at DragDropMonitorImpl.canDropOnTarget (https://frontend-collective.github.io/react-sortable-tree/vendors~main.91acd83f50dfbcb80997.bundle.js:2:186636) at DropTargetMonitorImpl.canDrop (https://frontend-collective.github.io/react-sortable-tree/vendors~main.91acd83f50dfbcb80997.bundle.js:2:71541) at https://frontend-collective.github.io/react-sortable-tree/main.91acd83f50dfbcb80997.bundle.js:1:132866 at DragDropContainer.getCurrentState (https://frontend-collective.github.io/react-sortable-tree/vendors~main.91acd83f50dfbcb80997.bundle.js:2:87049) at DragDropContainer._this.handleChange (https://frontend-collective.github.io/react-sortable-tree/vendors~main.91acd83f50dfbcb80997.bundle.js:2:84210) at handleChange (https://frontend-collective.github.io/react-sortable-tree/vendors~main.91acd83f50dfbcb80997.bundle.js:2:185746) at dispatch (https://frontend-collective.github.io/react-sortable-tree/vendors~main.91acd83f50dfbcb80997.bundle.js:2:168058) at Object.endDrag (https://frontend-collective.github.io/react-sortable-tree/vendors~main.91acd83f50dfbcb80997.bundle.js:2:199234) at HTML5Backend.handleTopDragEndCapture (https://frontend-collective.github.io/react-sortable-tree/vendors~main.91acd83f50dfbcb80997.bundle.js:2:152270)

[prateekkarkare]

The following fix worked for me

frontend-collective/react-sortable-tree@9a84113

[GNARGNARDAVE]

I added a debounce to the hover handler (with trailing option) and that solved the issue. The components were updating too quickly by setting the state before DnD could catch up, and the target ID had changed by the time the user dropped the item. So for those of you that could get the above solutions to work, maybe this may help.

[karlavv]

I added a debounce to the hover handler (with trailing option) and that solved the issue. The components were updating too quickly by setting the state before DnD could catch up, and the target ID had changed by the time the user dropped the item. So for those of you that could get the above solutions to work, maybe this may help.

Thank you! @GNARGNARDAVE That really helped me. I wrapped my dnd function in useCallback and debounce like this:

const moveColumnToDebounce = (dragIndex, hoverIndex) => {
const dragCol = visibleColumns[dragIndex];
let arr = visibleColumns.slice();
arr.splice(dragIndex, 1);
arr.splice(hoverIndex, 0, dragCol);
setColumnOrder(arr.map(c => c && c.id));
};
const moveColumn = useCallback(debounce(moveColumnToDebounce, 300), [visibleColumns], isEqual);

It finally works!

[GNARGNARDAVE]

I added a debounce to the hover handler (with trailing option) and that solved the issue. The components were updating too quickly by setting the state before DnD could catch up, and the target ID had changed by the time the user dropped the item. So for those of you that could get the above solutions to work, maybe this may help.

Thank you! @GNARGNARDAVE That really helped me. I wrapped my dnd function in useCallback and debounce like this:

const moveColumnToDebounce = (dragIndex, hoverIndex) => {
const dragCol = visibleColumns[dragIndex];
let arr = visibleColumns.slice();
arr.splice(dragIndex, 1);
arr.splice(hoverIndex, 0, dragCol);
setColumnOrder(arr.map(c => c && c.id));
};
const moveColumn = useCallback(debounce(moveColumnToDebounce, 300), [visibleColumns], isEqual);

It finally works!

Glad that you were able to get it to work!

[ChickendCode]

I have this issue on react-sortable-tree external source sample. Dragging to a red area.

https://frontend-collective.github.io/react-sortable-tree/?path=/story/advanced--drag-from-external-source
https://github.com/frontend-collective/react-sortable-tree/blob/master/stories/external-node.js

vendors~main.91acd83f50dfbcb80997.bundle.js:1 Uncaught Invariant Violation: Expected to find a valid target. at module.exports (https://frontend-collective.github.io/react-sortable-tree/vendors~main.91acd83f50dfbcb80997.bundle.js:2:592) at DragDropMonitorImpl.canDropOnTarget (https://frontend-collective.github.io/react-sortable-tree/vendors~main.91acd83f50dfbcb80997.bundle.js:2:186636) at DropTargetMonitorImpl.canDrop (https://frontend-collective.github.io/react-sortable-tree/vendors~main.91acd83f50dfbcb80997.bundle.js:2:71541) at https://frontend-collective.github.io/react-sortable-tree/main.91acd83f50dfbcb80997.bundle.js:1:132866 at DragDropContainer.getCurrentState (https://frontend-collective.github.io/react-sortable-tree/vendors~main.91acd83f50dfbcb80997.bundle.js:2:87049) at DragDropContainer._this.handleChange (https://frontend-collective.github.io/react-sortable-tree/vendors~main.91acd83f50dfbcb80997.bundle.js:2:84210) at handleChange (https://frontend-collective.github.io/react-sortable-tree/vendors~main.91acd83f50dfbcb80997.bundle.js:2:185746) at dispatch (https://frontend-collective.github.io/react-sortable-tree/vendors~main.91acd83f50dfbcb80997.bundle.js:2:168058) at Object.endDrag (https://frontend-collective.github.io/react-sortable-tree/vendors~main.91acd83f50dfbcb80997.bundle.js:2:199234) at HTML5Backend.handleTopDragEndCapture (https://frontend-collective.github.io/react-sortable-tree/vendors~main.91acd83f50dfbcb80997.bundle.js:2:152270)

Have you solved this problem yet?

[GNARGNARDAVE]

I posted a potential solution - if you haven't tried it yet, I'd suggest putting in a console.log on the hover handler if you haven't tried to debounce solution on the handler. From the console log - output the target ids and you'll notice that the target id doesn't match up because it's triggering too many changes. Try adding the debounce to the hover handler

[ShahStackOverflow]

let me know if anyone find solution to this problem

[Aromokeye]

If you are still facing this problem, check how you update your collection (array) state when the dragging happens. Better to use an immutability helpers such as immerjs or immutability-helper.

[YoannBuzenet]

Anyone wondering about the Hover handler, here is a working example for me with the debounce:

const [{ isOver, canDrop }, drop] = useDrop(
    () => ({
      accept: types.PEC,
      canDrop: () => true,
      drop: () => console.log("it did drop ! On PEC :", order),
      collect: (monitor) => ({
        isOver: !!monitor.isOver(),
        canDrop: !!monitor.canDrop(),
      }),
      hover: debounce(() => setOver(order), 300),
    }),
    []
  );

SetOver is a custom state passed from the parent to update the order of all the elements.

[alexya]

I met the same error.

I have a tree structure, when I dragged a node from one node to another node (change the parent), this error will happen. But if I only dragged a node in the current list (don't change the parent, just reorder), it is okay.
In the hover function, I don't really change the data collection in real-time. I updated the data collection just when dropping the node, in drop function.

const MyTreeItem: React.FC<Props> = (props: Props) => {

/*
  import {debounce, throttle } from "throttle-debounce";
  rootNode and Node are passed in through the props of the component
*/

  const ref = useRef(null);
  const [, dragRef] = useDrag({
    type: DragType, // const DragType = "my-drag-and-drop";
    item: dragItem, // type DragItem {id, name, parentId}
    canDrag: true,
    collect: monitor => ({
      isDragging: monitor.isDragging()
    })
  });

  const [{ isOver }, dropRef] = useDrop({
    accept: DragType,
    collect: monitor => ({
      isOver: monitor.isOver(),
      canDrop: monitor.canDrop()
    }),
    drop: debounce(500, true, (item: DragItem, _monitor: DropTargetMonitor) => {
         // I am using react-redux & redux-saga, dipatch the action to move the node to the target
         dispatch?.(moveItemTo(item.id, node.id));
    }),
    hover: throttle(300, true, (_item: DragItem, monitor: DropTargetMonitor) => {
      if (ref && ref.current && monitor.canDrop()) {
        const target = ref.current as HTMLElement;
        const currentRect = target.getBoundingClientRect();
        const clientOffset = monitor.getClientOffset();

        if (currentRect && clientOffset) {
          const dropPosition = calcDropToPosition(currentRect, clientOffset);
          // according to the dragNode and hoverNode position to draw the image/effect layout, etc.
        }
      }
    }),
    canDrop: (_item: DragItem, _monitor) => {
      return true;
    }
  });

  const dragDropRef = dragRef(dropRef(ref));
  return <TreeItem itemRef={dragDropRef} {...otherProps} />;
}

Hi, @karlavv I meet this issue too. Where did u put the function moveColumn to? assign it to the hover in the useDrop?

any help will be much appreciated.