Fix bug where MR Popover wont go away60241-merge-request-popover-doesn-t-go-away-on-mouse-leave

Add a check to make sure eventListener is not added twice

3 files changed, 40 insertions, 1 deletions

diff --git a/app/assets/javascripts/mr_popover/index.js b/app/assets/javascripts/mr_popover/index.js
index cc686b401d2..9a97e98f9db 100644
--- a/app/assets/javascripts/mr_popover/index.js
+++ b/app/assets/javascripts/mr_popover/index.js
@@ -54,9 +54,13 @@ export default elements => {
     const apolloProvider = new VueApollo({
       defaultClient: createDefaultClient(),
     });
+    const listenerAddedAttr = 'data-mr-listener-added';
 
     mrLinks.forEach(el => {
-      el.addEventListener('mouseenter', handleMRPopoverMount(apolloProvider));
+      if (!el.getAttribute(listenerAddedAttr)) {
+        el.addEventListener('mouseenter', handleMRPopoverMount(apolloProvider));
+        el.setAttribute(listenerAddedAttr, true);
+      }
     });
   }
 };
diff --git a/changelogs/unreleased/60241-merge-request-popover-doesn-t-go-away-on-mouse-leave.yml b/changelogs/unreleased/60241-merge-request-popover-doesn-t-go-away-on-mouse-leave.yml
new file mode 100644
index 00000000000..ce942777dca
--- /dev/null
+++ b/changelogs/unreleased/60241-merge-request-popover-doesn-t-go-away-on-mouse-leave.yml
@@ -0,0 +1,5 @@
+---
+title: Fix bug where MR popover doesn't go away on mouse leave
+merge_request:
+author:
+type: fixed
diff --git a/spec/frontend/mr_popover/index_spec.js b/spec/frontend/mr_popover/index_spec.js
new file mode 100644
index 00000000000..8c33e52a04b
--- /dev/null
+++ b/spec/frontend/mr_popover/index_spec.js
@@ -0,0 +1,30 @@
+import * as createDefaultClient from '~/lib/graphql';
+import { setHTMLFixture } from '../helpers/fixtures';
+import initMRPopovers from '~/mr_popover/index';
+
+createDefaultClient.default = jest.fn();
+
+describe('initMRPopovers', () => {
+  let mr1;
+  let mr2;
+
+  beforeEach(() => {
+    setHTMLFixture(`
+      <div id="one" class="gfm-merge_request">MR1</div>
+      <div id="two" class="gfm-merge_request">MR2</div>
+    `);
+
+    mr1 = document.querySelector('#one');
+    mr2 = document.querySelector('#two');
+
+    mr1.addEventListener = jest.fn();
+    mr2.addEventListener = jest.fn();
+  });
+
+  it('does not add the same event listener twice', () => {
+    initMRPopovers([mr1, mr1, mr2]);
+
+    expect(mr1.addEventListener).toHaveBeenCalledTimes(1);
+    expect(mr2.addEventListener).toHaveBeenCalledTimes(1);
+  });
+});