Resolve "Pasting an image into a comment still uploades a design"

app/assets/javascripts/design_management/pages/index.vue

@@ -106,7 +106,6 @@ export default {
     },
   },
   mounted() {
-    this.toggleOnPasteListener(this.$route.name);
     if (this.$route.path === '/designs') {
       this.$el.scrollIntoView();
     }

changelogs/unreleased/232980-pasting-an-image-into-a-comment-still-uploades-a-design.yml

+---
+title: Resolve Pasting an image into a comment still uploades a design
+merge_request: 38280
+author:
+type: fixed

spec/frontend/design_management/pages/index_spec.js

@@ -72,6 +72,7 @@ describe('Design management index page', () => {
   const dropzoneClasses = () => findDropzone().classes();
   const findDropzoneWrapper = () => wrapper.find('[data-testid="design-dropzone-wrapper"]');
   const findFirstDropzoneWithDesign = () => wrapper.findAll(DesignDropzone).at(1);
+  const findDesignsWrapper = () => wrapper.find('[data-testid="designs-root"]');
 
   function createComponent({
     loading = false,
@@ -508,6 +509,10 @@ describe('Design management index page', () => {
       });
 
       event = new Event('paste');
+      event.clipboardData = {
+        files: [{ name: 'image.png', type: 'image/png' }],
+        getData: () => 'test.png',
+      };
 
       router.replace({
         name: DESIGNS_ROUTE_NAME,
@@ -517,12 +522,18 @@ describe('Design management index page', () => {
       });
     });
 
-    it('calls onUploadDesign with valid paste', () => {
-      event.clipboardData = {
-        files: [{ name: 'image.png', type: 'image/png' }],
-        getData: () => 'test.png',
-      };
+    it('does not call paste event if designs wrapper is not hovered', () => {
+      document.dispatchEvent(event);
 
+      expect(wrapper.vm.onUploadDesign).not.toHaveBeenCalled();
+    });
+
+    describe('when designs wrapper is hovered', () => {
+      beforeEach(() => {
+        findDesignsWrapper().trigger('mouseenter');
+      });
+
+      it('calls onUploadDesign with valid paste', () => {
         document.dispatchEvent(event);
 
         expect(wrapper.vm.onUploadDesign).toHaveBeenCalledTimes(1);
@@ -532,11 +543,6 @@ describe('Design management index page', () => {
       });
 
       it('renames a design if it has an image.png filename', () => {
-      event.clipboardData = {
-        files: [{ name: 'image.png', type: 'image/png' }],
-        getData: () => 'image.png',
-      };
-
         document.dispatchEvent(event);
 
         expect(wrapper.vm.onUploadDesign).toHaveBeenCalledTimes(1);
@@ -555,6 +561,14 @@ describe('Design management index page', () => {
 
         expect(wrapper.vm.onUploadDesign).not.toHaveBeenCalled();
       });
+
+      it('removes onPaste listener after mouseleave event', async () => {
+        findDesignsWrapper().trigger('mouseleave');
+        document.dispatchEvent(event);
+
+        expect(wrapper.vm.onUploadDesign).not.toHaveBeenCalled();
+      });
+    });
   });
 
   describe('when navigating', () => {