Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix(utils): useDropzone fix around onDragLeave behavior
  • Loading branch information
mlaursen committed Sep 8, 2021
1 parent 644971d commit fdff9f2
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 9 deletions.
46 changes: 38 additions & 8 deletions 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>
);
}

Expand Down Expand Up @@ -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");
});
});
9 changes: 8 additions & 1 deletion packages/utils/src/useDropzone.ts
Expand Up @@ -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]
);
Expand Down

1 comment on commit fdff9f2

@vercel
Copy link

@vercel vercel bot commented on fdff9f2 Sep 8, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.