diff --git a/app/javascript/utilities/__tests__/dragAndDrop.test.js b/app/javascript/utilities/__tests__/dragAndDrop.test.js
index 0b1f1f582..c5ce95dcb 100644
--- a/app/javascript/utilities/__tests__/dragAndDrop.test.js
+++ b/app/javascript/utilities/__tests__/dragAndDrop.test.js
@@ -49,7 +49,7 @@ describe('drag and drop for components', () => {
         result.current.setElement(document.createElement('textarea'));
       });
 
-      expect(HTMLElement.prototype.addEventListener).toHaveBeenCalledTimes(4);
+      expect(HTMLElement.prototype.addEventListener).toHaveBeenCalledTimes(5);
       expect(HTMLDocument.prototype.addEventListener).toHaveBeenCalledTimes(2);
     });
 
@@ -78,7 +78,7 @@ describe('drag and drop for components', () => {
         2,
       );
       expect(HTMLElement.prototype.removeEventListener).toHaveBeenCalledTimes(
-        4,
+        5,
       );
     });
   });
@@ -115,7 +115,7 @@ describe('drag and drop for components', () => {
       );
 
       expect(HTMLDocument.prototype.addEventListener).toBeCalledTimes(2);
-      expect(HTMLElement.prototype.addEventListener).toHaveBeenCalledTimes(4);
+      expect(HTMLElement.prototype.addEventListener).toHaveBeenCalledTimes(5);
     });
 
     it('should not attach drag and drop events', async () => {
@@ -151,7 +151,7 @@ describe('drag and drop for components', () => {
       unmount();
       expect(HTMLDocument.prototype.removeEventListener).toBeCalledTimes(2);
       expect(HTMLElement.prototype.removeEventListener).toHaveBeenCalledTimes(
-        4,
+        5,
       );
     });
 
diff --git a/app/javascript/utilities/dragAndDrop.js b/app/javascript/utilities/dragAndDrop.js
index f74b1bea9..69d245654 100644
--- a/app/javascript/utilities/dragAndDrop.js
+++ b/app/javascript/utilities/dragAndDrop.js
@@ -43,6 +43,7 @@ export function useDragAndDrop({ onDragOver, onDragExit, onDrop }) {
     element.addEventListener('dragover', onDragOver);
     element.addEventListener('dragexit', onDragExit);
     element.addEventListener('dragleave', onDragExit);
+    element.addEventListener('dragend', onDragExit);
     element.addEventListener('drop', onDrop);
 
     return () => {
@@ -52,6 +53,7 @@ export function useDragAndDrop({ onDragOver, onDragExit, onDrop }) {
       element.removeEventListener('dragover', onDragOver);
       element.removeEventListener('dragexit', onDragExit);
       element.removeEventListener('dragleave', onDragExit);
+      element.removeEventListener('dragend', onDragExit);
       element.removeEventListener('drop', onDrop);
     };
   }, [element, onDragOver, onDragExit, onDrop]);