UploadDropZone: Child Element Handling in onDragLeave has issues

[eduardbaitinger]

Describe the bug
The shouldRemoveDragOver callback of UploadDropZone is only called if dragLeave event target is not the container and ignores the related target. This makes it impossible to control the end of dragging when the dropzone has child elements that should also be handled as part of dropzone.

In addition, the setting enableOnContains is also ignored in onDragLeave. This causes that dragging is canceled when dragging over child elements.

To Reproduce
Steps to reproduce the behavior:

1. Create dropzone with child elements.
2. Drag a file over a child of the dropzone container.
3. The dragging is canceled and the dragOverClassName is removed.
   This behavior can't be fixed with shouldRemoveDragOver because it is not called when entering a direct child element of the dropzone.
   And also enableOnContains is not checked in onDragLeave.

Expected behavior
shouldRemoveDragOver should also be called for child elements of dropzone.
And if enableOnContains is set the dragging should not be canceled when entering a child element.

Versions
Specify the versions of the @rpldy packages you're using. -> v1.7.1
Which browser this bug reproduces in. -> Chrome

The reason should be the onDragLeave handler. It only checks event target but not the relatedTarget which is the target the dragover moves to and therefore important to decide if its inside or outside the dropzone container.

  const onDragLeave = useCallback(e => {
    if (dragLeaveTrackerRef.current && e.target === containerRef.current || shouldRemoveDragOver?.(e)) {
      handleEnd();
    }
  }, [handleEnd, containerRef, shouldRemoveDragOver]);

I think it could be implemented like this to fix both issues:

  const onDragLeave = useCallback(e => {
    if (dragLeaveTrackerRef.current && e.target === containerRef.current && (shouldRemoveDragOver?.(e) ?? !isOnTarget(e.relatedTarget, containerRef.current, enableOnContains))) {
      handleEnd();
    }
  }, [handleEnd, containerRef, shouldRemoveDragOver]);

I also changed isOnTarget so that it receives the element instead of the event.

[yoavniran]

thanks for the report @eduardbaitinger
I will look into it

[yoavniran]

fixed and released in 1.8.0

[eduardbaitinger]

@yoavniran Thank you for the fix 👍