Drag Controls not working with touch after dispatch function

hey guys,

i have a quite strange problem with the function:

    function onDocumentTouchMove( event ) {
    	event.preventDefault();
    	event = event.changedTouches[ 0 ];
    	var rect = _domElement.getBoundingClientRect();

    	_mouse.x = ( ( event.clientX - rect.left ) / rect.width ) * 2 - 1;
    	_mouse.y = - ( ( event.clientY - rect.top ) / rect.height ) * 2 + 1;

    	_raycaster.setFromCamera( _mouse, _camera );

    	if ( _selected && scope.enabled ) {
    		if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {
    			_selected.position.copy( _intersection.sub( _offset ).applyMatrix4( _inverseMatrix ) );
    			}
    			scope.dispatchEvent( { type: 'drag', object: _selected } );
    			return;
    	}
    }

from the drag controls example.

Keep in mind that there is also the function:

function onDocumentMouseMove( event ) {...}

which has more or less the same code for dragging.

In another file i call the “drag” event by:

this._dragControls.addEventListener('drag', () => {
    this.dispatch && this.dispatch(setOverlayPopupConfig(false));
});

dispatch is generated within a custom hook with const dispatch = useDispatch(); I need this function to hide a react component while dragging is active.

So here is my problem: I can use this setup on a desktop using my mouse with no problem. I can drag and drop my object and my react comp is hidden. But if i use this setup on a tablet or in the chrome development tools for mobile devices this happens:

  • I touch on my object an want to start dragging - OK
  • The react comp disappears - OK
  • the object is not moving. dragging is not working.
  • I have to touch again on the object
  • now dragging is working as desired - OK
  • when releasing my finger the react comp shows up again - OK

I recognized that the function onDocumentTouchMove(event) is not running anymore after the dispatch().The function onDocumentMouseMove(event) on the other hand is still working.
If I delete the dispatch() function, drag and drop is also working with touch input, like on my desktop.

I hope someone can help me.