Fix TooltipOnTruncate child target under Vue 3

Miguel Rinconrequested to merge
fix/tooltip-on-truncate-child-target-vue3 into master

What does this MR do and why?

TooltipOnTruncate shows a tooltip only when its content overflows. With truncate-target="child", it measures the first child of its root <span>.

The component read this.$el.childNodes[0]. That node is not always an element:

  • Under Vue 3, the slot renders as a fragment. The first child node is an empty text node.
  • Under both Vue versions, a v-if that renders nothing leaves a comment node.

Text and comment nodes have no scrollWidth. The overflow check returns false. The tooltip never shows. Nothing is logged, so the bug is silent.

This MR changes the lookup to this.$el.firstElementChild. This skips text and comment nodes and returns the slotted element.

About seven components pass truncate-target="child". Examples:

  • app/assets/javascripts/ci/pipelines_page/components/pipeline_url.vue
  • app/assets/javascripts/vue_shared/components/commit.vue
  • app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue

How to set up and validate locally

  1. Run GDK with VUE_VERSION=3.
  2. Open a project's pipelines list.
  3. Make the browser window narrow so a commit title is cut off.
  4. Hover the commit title. Confirm a tooltip with the full title appears.

Run the spec under both Vue versions:

yarn jest spec/frontend/vue_shared/components/tooltip_on_truncate_spec.js
VUE_VERSION=3 yarn jest spec/frontend/vue_shared/components/tooltip_on_truncate_spec.js

The new test mounts the component through a real parent template. The slot contains a v-if that renders nothing, followed by a <div>. The test asserts that the overflow check receives the <div> element. With the fix reverted, the test fails under both Vue 2 and Vue 3.

References

Merge request reports