fix: dropping file out of drop zone makes it stuck in visible state (#5394)

* fix: dropping file out of drop zone makes it stuck in visible state

* Changelog

* Fix race condition

* Add a test case

* Fix missing semicolon

---------

Co-authored-by: William Wong <[email protected]>

Author: OEvgeny

CHANGELOG.md

@@ -121,6 +121,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 -  Fixed math parsing that could cause Web Chat to hang when processing certain LaTeX expressions, in PR [#5377](https://github.com/microsoft/BotFramework-WebChat/pull/5377), by [@OEvgeny](https://github.com/OEvgeny)
 -  Fixed long math formula should be scrollable, in PR [#5380](https://github.com/microsoft/BotFramework-WebChat/pull/5380), by [@compulim](https://github.com/compulim)
 -  Fixed [#4948](https://github.com/microsoft/BotFramework-WebChat/issues/4948). Microphone should stop after initial silence, in PR [#5385](https://github.com/microsoft/BotFramework-WebChat/pull/5385)
+-  Fixed [#5390](https://github.com/microsoft/BotFramework-WebChat/issues/5390). Fixed drop zone remaining visible when file is dropped outside of the zone, in PR [#5394](https://github.com/microsoft/BotFramework-WebChat/pull/5394), by [@OEvgeny](https://github.com/OEvgeny)
 
 # Removed
 

__tests__/__image_snapshots__/html/drag-and-drop-upload-js-fluent-theme-applied-drag-and-drop-upload-4-snap.png

@@ -46,36 +46,66 @@
         dataTransfer.items.add(new File([new ArrayBuffer(100)], 'simple.txt'));
 
         // WHEN: Dragging a file into document.
-        const dragEnterDocumentEvent = new DragEvent('dragenter', { dataTransfer });
-
-        dragEnterDocumentEvent.initEvent('dragenter', true, true);
+        const dragEnterDocumentEvent = new DragEvent('dragenter', {
+          bubbles: true,
+          cancelable: true,
+          dataTransfer
+        });
 
         document.dispatchEvent(dragEnterDocumentEvent);
 
         // THEN: Should render the drop zone.
         await host.snapshot();
 
         // WHEN: Dragging into the drop zone.
-        const dragEnterDropZoneEvent = new DragEvent('dragenter', { dataTransfer });
-
-        dragEnterDropZoneEvent.initEvent('dragenter', true, true);
+        const dragEnterDropZoneEvent = new DragEvent('dragenter', {
+          bubbles: true,
+          cancelable: true,
+          dataTransfer
+        });
 
         document
           .querySelector(`[data-testid="${WebChat.testIds['sendBoxDropZone']}"]`)
           .dispatchEvent(dragEnterDropZoneEvent);
 
-        // THEN: Should render the drop zone.
+        // THEN: Should render element dropped.
         await host.snapshot();
 
         // WHEN: Dropping into the drop zone.
-        const dropEvent = new DragEvent('drop', { dataTransfer });
-
-        dropEvent.initEvent('drop', true, true);
+        const dropEvent = new DragEvent('drop', {
+          bubbles: true,
+          cancelable: true,
+          dataTransfer
+        });
 
         document.querySelector(`[data-testid="${WebChat.testIds['sendBoxDropZone']}"]`).dispatchEvent(dropEvent);
 
         // THEN: Should render the drop zone.
         await host.snapshot();
+
+        // WHEN: Dragging a file into document.
+        const dragEnterDocumentEvent1 = new DragEvent('dragenter', {
+          bubbles: true,
+          cancelable: true,
+          dataTransfer
+        });
+
+        document.dispatchEvent(dragEnterDocumentEvent1);
+
+        // THEN: Should render the drop zone.
+        await host.snapshot();
+
+        // WHEN: Dropping out of the drop zone.
+        const dropEvent1 = new DragEvent('drop', {
+          bubbles: true,
+          cancelable: true,
+          dataTransfer
+        });
+
+        document.body.dispatchEvent(dropEvent1);
+
+        // THEN: Should render single element dropped.
+        await host.snapshot();
       });
     </script>
   </body>

__tests__/__image_snapshots__/html/drag-and-drop-upload-js-fluent-theme-applied-drag-and-drop-upload-5-snap.png

@@ -67,14 +67,22 @@ const DropZone = (props: { readonly onFilesAdded: (files: File[]) => void }) =>
       setDropZoneState(false);
     };
 
-    document.addEventListener('dragenter', handleDragEnter, false);
-    document.addEventListener('dragleave', handleDragLeave, false);
-    document.addEventListener('dragend', handleDragEnd, false);
+    const handleDocumentDrop = (event: DragEvent) => {
+      if (!dropZoneRef.current?.contains(event.target as Node)) {
+        handleDragEnd();
+      }
+    };
+
+    document.addEventListener('dragenter', handleDragEnter);
+    document.addEventListener('dragleave', handleDragLeave);
+    document.addEventListener('dragend', handleDragEnd);
+    document.addEventListener('drop', handleDocumentDrop);
 
     return () => {
       document.removeEventListener('dragenter', handleDragEnter);
       document.removeEventListener('dragleave', handleDragLeave);
       document.removeEventListener('dragend', handleDragEnd);
+      document.removeEventListener('drop', handleDocumentDrop);
     };
   }, [setDropZoneState]);