diff --git a/app/assets/javascripts/mr_popover/index.js b/app/assets/javascripts/mr_popover/index.js index cc686b401d286e2e5ed43cf70a4c761c9f373afc..9a97e98f9db9019658280e4a39292e614a80323c 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 0000000000000000000000000000000000000000..ce942777dca9c24211dabc33a18c3f0e55f1c01c --- /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 0000000000000000000000000000000000000000..8c33e52a04bdc079bff89cefabc76e0ed755e1b3 --- /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(` +
MR1
+
MR2
+ `); + + 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); + }); +});