Merge branch '321514-fix-clipboard-buttons' into 'master'

Fix copy to clipboard tooltip button

See merge request gitlab-org/gitlab!54472

app/assets/javascripts/behaviors/copy_to_clipboard.js

 import Clipboard from 'clipboard';
 import $ from 'jquery';
 import { sprintf, __ } from '~/locale';
-import { fixTitle, show } from '~/tooltips';
+import { fixTitle, add, show, once } from '~/tooltips';
 
 function showTooltip(target, title) {
-  const { originalTitle } = target.dataset;
-  const hideTooltip = () => {
-    target.removeEventListener('mouseout', hideTooltip);
-    setTimeout(() => {
+  const { title: originalTitle } = target.dataset;
+
+  once('hidden', (tooltip) => {
+    if (tooltip.target === target) {
       target.setAttribute('title', originalTitle);
       fixTitle(target);
-    }, 100);
-  };
+    }
+  });
 
   target.setAttribute('title', title);
-
   fixTitle(target);
   show(target);
-
-  target.addEventListener('mouseout', hideTooltip);
+  setTimeout(() => target.blur(), 1000);
 }
 
 function genericSuccess(e) {
   // Clear the selection and blur the trigger so it loses its border
   e.clearSelection();
-  $(e.trigger).blur();
-
   showTooltip(e.trigger, __('Copied'));
 }
 
@@ -88,24 +84,8 @@ export default function initCopyToClipboard() {
  * @param {HTMLElement} btnElement
  */
 export function clickCopyToClipboardButton(btnElement) {
-  const $btnElement = $(btnElement);
-
   // Ensure the button has already been tooltip'd.
-  // If the use hasn't yet interacted (i.e. hovered or clicked)
-  // with the button, Bootstrap hasn't yet initialized
-  // the tooltip, and its `data-original-title` will be `undefined`.
-  // This value is used in the functions above.
-  $btnElement.tooltip();
-  btnElement.dispatchEvent(new MouseEvent('mouseover'));
+  add([btnElement], { show: true });
 
   btnElement.click();
-
-  // Manually trigger the necessary events to hide the
-  // button's tooltip and allow the button to perform its
-  // tooltip cleanup (updating the title from "Copied" back
-  // to its original title, "Copy branch name").
-  setTimeout(() => {
-    btnElement.dispatchEvent(new MouseEvent('mouseout'));
-    $btnElement.tooltip('hide');
-  }, 2000);
 }

app/assets/javascripts/tooltips/components/tooltips.vue

@@ -82,9 +82,10 @@ export default {
     },
     triggerEvent(target, event) {
       const tooltip = this.findTooltipByTarget(target);
+      const tooltipRef = this.$refs[tooltip?.id];
 
-      if (tooltip) {
-        this.$refs[tooltip.id][0].$emit(event);
+      if (tooltipRef) {
+        tooltipRef[0].$emit(event);
       }
     },
     tooltipExists(element) {
@@ -113,6 +114,7 @@ export default {
       :boundary="tooltip.boundary"
       :disabled="tooltip.disabled"
       :show="tooltip.show"
+      @hidden="$emit('hidden', tooltip)"
     >
       <span v-if="tooltip.html" v-safe-html:[$options.safeHtmlConfig]="tooltip.title"></span>
       <span v-else>{{ tooltip.title }}</span>

app/assets/javascripts/tooltips/index.js

@@ -92,6 +92,7 @@ export const hide = createTooltipApiInvoker((element) =>
 export const show = createTooltipApiInvoker((element) =>
   tooltipsApp().triggerEvent(element, 'open'),
 );
+export const once = (event, cb) => tooltipsApp().$once(event, cb);
 export const destroy = () => {
   tooltipsApp().$destroy();
   app = null;

changelogs/unreleased/321514-fix-clipboard-buttons.yml

+---
+title: Fix copy to clipboard tooltip button
+merge_request: 54472
+author:
+type: fixed

spec/frontend/tooltips/components/tooltips_spec.js

@@ -217,4 +217,14 @@ describe('tooltips/components/tooltips.vue', () => {
     wrapper.destroy();
     expect(observersCount()).toBe(0);
   });
+
+  it('exposes hidden event', async () => {
+    buildWrapper();
+    wrapper.vm.addTooltips([createTooltipTarget()]);
+
+    await wrapper.vm.$nextTick();
+
+    wrapper.findComponent(GlTooltip).vm.$emit('hidden');
+    expect(wrapper.emitted('hidden')).toHaveLength(1);
+  });
 });