Merge branch 'fix-duplicated-user-popover' into 'master'

Fix duplicated user popovers

See merge request gitlab-org/gitlab!24405

app/assets/javascripts/user_popovers.js

@@ -54,11 +54,17 @@ const populateUserInfo = user => {
   );
 };
 
+const initializedPopovers = new Map();
+
 export default (elements = document.querySelectorAll('.js-user-link')) => {
   const userLinks = Array.from(elements);
+  const UserPopoverComponent = Vue.extend(UserPopover);
 
   return userLinks.map(el => {
-    const UserPopoverComponent = Vue.extend(UserPopover);
+    if (initializedPopovers.has(el)) {
+      return initializedPopovers.get(el);
+    }
+
     const user = {
       location: null,
       bio: null,
@@ -73,6 +79,8 @@ export default (elements = document.querySelectorAll('.js-user-link')) => {
       },
     });
 
+    initializedPopovers.set(el, renderedPopover);
+
     renderedPopover.$mount();
 
     el.addEventListener('mouseenter', ({ target }) => {

changelogs/unreleased/fix-duplicated-user-popover.yml

+---
+title: Fix duplicated user popovers
+merge_request: 24405
+author:
+type: fixed

spec/javascripts/user_popovers_spec.js

@@ -38,6 +38,13 @@ describe('User Popovers', () => {
     expect(document.querySelectorAll(selector).length).toBe(popovers.length);
   });
 
+  it('does not initialize the user popovers twice for the same element', () => {
+    const newPopovers = initUserPopovers(document.querySelectorAll(selector));
+    const samePopovers = popovers.every((popover, index) => newPopovers[index] === popover);
+
+    expect(samePopovers).toBe(true);
+  });
+
   describe('when user link emits mouseenter event', () => {
     let userLink;