From b119f683c5b6a4238229cc35f1d6be0b154d4014 Mon Sep 17 00:00:00 2001
From: Shaade <s.shaade77@gmail.com>
Date: Sat, 3 Sep 2022 19:46:11 +0200
Subject: [PATCH] [@mantine/dropzone] Fix Dropzone.Fullscreen not disappearing
 when mouse is moved slowly outside its wrapper (#2305)

* [@mantine/dropzone] Dropzone.FullScreen: fixed not disappearing when mouse is moved slowly outside the wrapper

* [@mantine/dropzone] removed unused property
---
 .../src/DropzoneFullScreen.tsx                | 29 ++++++++++++++-----
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/mantine-dropzone/src/DropzoneFullScreen.tsx b/src/mantine-dropzone/src/DropzoneFullScreen.tsx
index 07290a76265..1c5d72c06f6 100644
--- a/src/mantine-dropzone/src/DropzoneFullScreen.tsx
+++ b/src/mantine-dropzone/src/DropzoneFullScreen.tsx
@@ -61,6 +61,7 @@ export const DropzoneFullScreen = forwardRef<HTMLDivElement, DropzoneFullScreenP
       ...others
     } = useComponentDefaultProps('DropzoneFullScreen', fullScreenDefaultProps, props);
 
+    const [counter, setCounter] = React.useState(0);
     const [visible, { open, close }] = useDisclosure(false);
     const { classes, cx } = useFullScreenStyles(null, {
       name: 'DropzoneFullScreen',
@@ -69,15 +70,30 @@ export const DropzoneFullScreen = forwardRef<HTMLDivElement, DropzoneFullScreenP
       unstyled,
     });
 
+    const handleDragEnter = () => {
+      setCounter((prev) => prev + 1);
+      open();
+    };
+
+    const handleDragLeave = () => {
+      setCounter((prev) => prev - 1);
+    };
+
     useEffect(() => {
-      if (active) {
-        document.addEventListener('dragover', open, false);
-        return () => document.removeEventListener('dragover', open, false);
-      }
+      counter === 0 && close();
+    }, [counter]);
 
-      return undefined;
-    }, [active]);
+    useEffect(() => {
+      if (!active) return undefined;
 
+      document.addEventListener('dragenter', handleDragEnter, false);
+      document.addEventListener('dragleave', handleDragLeave, false);
+
+      return () => {
+        document.removeEventListener('dragover', handleDragEnter, false);
+        document.removeEventListener('dragleave', handleDragLeave, false);
+      };
+    }, [active]);
     return (
       <OptionalPortal withinPortal={withinPortal}>
         <Box
@@ -107,7 +123,6 @@ export const DropzoneFullScreen = forwardRef<HTMLDivElement, DropzoneFullScreenP
             }}
             onDragLeave={(event: any) => {
               onDragLeave?.(event);
-              close();
             }}
           />
         </Box>