fix(utils): useDropzone fix around onDragLeave behavior

Author: mlaursen

packages/utils/src/__tests__/useDropzone.tsx

@@ -1,18 +1,19 @@
-import React, { ReactElement } from "react";
+import React, { ReactElement, ReactNode } from "react";
 import cn from "classnames";
 import { fireEvent, render } from "@testing-library/react";
 
 import { DropzoneHanders, useDropzone } from "../useDropzone";
 
-function Test(props: DropzoneHanders<HTMLElement>): ReactElement {
-  const [isOver, handlers] = useDropzone(props);
+function Test({
+  children,
+  ...options
+}: DropzoneHanders<HTMLElement> & { children?: ReactNode }): ReactElement {
+  const [isOver, handlers] = useDropzone(options);
 
   return (
-    <div
-      data-testid="dropzone"
-      {...handlers}
-      className={cn(isOver && "over")}
-    />
+    <div data-testid="dropzone" {...handlers} className={cn(isOver && "over")}>
+      {children}
+    </div>
   );
 }
 
@@ -95,4 +96,33 @@ describe("useDropzone", () => {
     expect(onDragLeave).not.toBeCalled();
     expect(onDrop).not.toBeCalled();
   });
+
+  it("should not disable the isOver state if a dragleave event is called on a child element", () => {
+    const { getByTestId } = render(
+      <Test>
+        <div data-testid="child1" />
+        <div data-testid="child2" />
+      </Test>
+    );
+
+    const dropzone = getByTestId("dropzone");
+    const child1 = getByTestId("child1");
+    const child2 = getByTestId("child2");
+    expect(dropzone).not.toHaveClass("over");
+
+    fireEvent.dragEnter(dropzone);
+    expect(dropzone).toHaveClass("over");
+
+    fireEvent.dragOver(child1);
+    expect(dropzone).toHaveClass("over");
+
+    fireEvent.dragLeave(child1);
+    expect(dropzone).toHaveClass("over");
+
+    fireEvent.dragOver(child2);
+    expect(dropzone).toHaveClass("over");
+
+    fireEvent.dragLeave(dropzone);
+    expect(dropzone).not.toHaveClass("over");
+  });
 });

packages/utils/src/useDropzone.ts

@@ -91,7 +91,14 @@ export function useDropzone<E extends HTMLElement>(
       propOnDragLeave?.(event);
       event.preventDefault();
       event.stopPropagation();
-      setOver(false);
+
+      if (
+        !event.target ||
+        event.currentTarget === event.target ||
+        !event.currentTarget.contains(event.target as HTMLElement)
+      ) {
+        setOver(false);
+      }
     },
     [propOnDragLeave]
   );