From d2798fb35a2969ec707f633b9830cf9ae37b7e99 Mon Sep 17 00:00:00 2001 From: Eugene Date: Mon, 27 Jan 2025 11:39:20 -0800 Subject: [PATCH] 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 --- CHANGELOG.md | 1 + ...me-applied-drag-and-drop-upload-4-snap.png | Bin 0 -> 13405 bytes ...me-applied-drag-and-drop-upload-5-snap.png | Bin 0 -> 16575 bytes .../html/fluentTheme/dragAndDrop.upload.html | 50 ++++++++++++++---- .../src/components/dropZone/DropZone.tsx | 14 +++-- 5 files changed, 52 insertions(+), 13 deletions(-) create mode 100644 __tests__/__image_snapshots__/html/drag-and-drop-upload-js-fluent-theme-applied-drag-and-drop-upload-4-snap.png create mode 100644 __tests__/__image_snapshots__/html/drag-and-drop-upload-js-fluent-theme-applied-drag-and-drop-upload-5-snap.png diff --git a/CHANGELOG.md b/CHANGELOG.md index afc846f7a6..50f26b434f 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/__tests__/__image_snapshots__/html/drag-and-drop-upload-js-fluent-theme-applied-drag-and-drop-upload-4-snap.png b/__tests__/__image_snapshots__/html/drag-and-drop-upload-js-fluent-theme-applied-drag-and-drop-upload-4-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..5e52507bf7078d64e70b8dab4544060a30218e70 GIT binary patch literal 13405 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 D!Juu@ literal 0 HcmV?d00001 diff --git a/__tests__/__image_snapshots__/html/drag-and-drop-upload-js-fluent-theme-applied-drag-and-drop-upload-5-snap.png b/__tests__/__image_snapshots__/html/drag-and-drop-upload-js-fluent-theme-applied-drag-and-drop-upload-5-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..25170920f0d03d1a1e7a4a9a384f785c2ff59617 GIT binary patch literal 16575 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 UWo2qDZbp%pQ974;=JK8Y1Gn3$>Hq)$ literal 0 HcmV?d00001 diff --git a/__tests__/html/fluentTheme/dragAndDrop.upload.html b/__tests__/html/fluentTheme/dragAndDrop.upload.html index d5a1f5d3f9..d00310302b 100644 --- a/__tests__/html/fluentTheme/dragAndDrop.upload.html +++ b/__tests__/html/fluentTheme/dragAndDrop.upload.html @@ -46,9 +46,11 @@ 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); @@ -56,26 +58,54 @@ 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(); }); diff --git a/packages/fluent-theme/src/components/dropZone/DropZone.tsx b/packages/fluent-theme/src/components/dropZone/DropZone.tsx index d39300d491..31aef8f468 100644 --- a/packages/fluent-theme/src/components/dropZone/DropZone.tsx +++ b/packages/fluent-theme/src/components/dropZone/DropZone.tsx @@ -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]);