After unmounting the source and mounting the target on drag start, it's impossible to trigger drag end without touching

Expected behavior

The backend is react-dnd-touch-backend, the testing is done on an actual phone, and with Chrome's devtools.

I've got an application with react-dnd and react-router-dom. If the user starts dragging an item on route /drag, a history.push to /drop is issued, where the item can be dropped. Therefore, on drag start, the source is unmounted, and the target is mounted.

Since the issue is reproducible just with useState instead of react-router-dom, I've used it for simplicity. The idea is the same:

The parent has an isDragging useState.
Draggable uses useDrag, on drag start it calls props.setIsDragging(true)
The parent component has isDragging === true ? <DropZone /> : <Draggable />
On drag end, Draggable calls props.isDragging(false), and thus we return to the draggable's view.

Actual behavior

useDrag's begin fires properly. isDragging is set to true, therefore DropZone is rendered instead of Draggable.
Upon touch end, the drop end is not triggered at all, whether touch was ended over the DropZone or not - just nothing happens. The application just keeps DropZone rendered. To trigger the drop end, the user must tap another time.

Steps to reproduce

git clone https://github.com/Sun-2/react-dnd-mount-drop-bug && cd react-dnd-mount-drop-bug && npm i && npm run start
Enable Chrome Devtools, in Devtools, enable mobile device simulation
Start dragging the draggable. The draggable will unmount, the dropzone will mount. Try to drop the draggable over the dropzone. Once you lift your finger (that is, release the mouse button), Nothing will happen, and you'll have to tap once more to trigger drop end.

Versions

"react": "^17.0.1",

"react-dnd": "^11.1.3",
"react-dnd-touch-backend": "^11.1.3",

What browser are you using?

Chrome 88.0.4324.150 (Official Build) (64-bit) OS: Ubuntu 20.10

Demo

useDrag throws with nextCreate is not a function in CodeSandbox, therefore here's a GitHub repo. The link leads to the only relevant file.

Hi there @Sun-2 ! I saw your post and had a similar issue, thought I would post my solution in case it helps.

I was only removing the source item after the drag started. As with you, as soon as my source item is removed the touch would 'pause'. I would need to lift my finger and then tap once more to make the drag end event happen.

For me (and maybe for you!) this happened because touchmove events REQUIRE the original source item to stay mounted. See the answer in this post, and the associated links they add: https://stackoverflow.com/questions/56653453/why-touchmove-event-is-not-fired-after-dom-changes.

I solved the issue by 'caching' the source item in the list where it was being removed, a bit like this (shortened my code because there's lots of other logic going on in that component -- please ask if this is not clear):

const MyList = ({ items }) => {

  // items: (array of strings) identifying item ids in my list
  const removedItemRef = React.useRef(null);

  // Add cached removed item back into list
  // Despite it not being in 'items' passed to this component
  if (removedItemRef.current){
    if (!items.includes(removedItemRef.current)){
      items = [ ...items, removedItemRef.current ]
    }
  }

  const renderItem = (item, index) => {
    return (
      <DraggableItem
        itemId={item}
        handleDragStart={() => {
          // When dragging starts, cache the id
          removedItemRef.current = item;
        }}
        handleDragEnd={() => {
          // When dragging ends, clear cached id
          removedItemRef.current = null;
        }}
      />
    );
  }

  return (
    <div>
      {items.map(renderItem)}
    </div>
  );
}

react-dnd / react-dnd