fix(UsaTooltip): fix initial positioning of tooltip

Added workaround for: uswds/uswds#4458 causing initial tooltip positioning to be incorrect.
patrickcate · Jul 3, 2022 · d840af7 · d840af7
1 parent 6ec5f2f
commit d840af7
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 17 deletions.
diff --git a/src/components/UsaTooltip/UsaTooltip.test.js b/src/components/UsaTooltip/UsaTooltip.test.js
@@ -30,7 +30,7 @@ describe('UsaTooltip', () => {
       .and('not.have.class', 'is-visible')
       .and('have.attr', 'role', 'tooltip')
       .and('have.attr', 'aria-hidden', 'true')
-      .and('have.class', 'usa-tooltip__body--top')
+      .and('have.class', 'usa-tooltip__body--bottom')
       .and('contain', 'Test tooltip label')
       .and('be.hidden')
 
@@ -78,6 +78,22 @@ describe('UsaTooltip', () => {
 
     cy.get('@tooltip').type('{esc}')
 
+    cy.get('@tooltipLabel')
+      .should('be.hidden')
+      .and('not.have.class', 'is-set')
+      .and('not.have.class', 'is-visible')
+      .and('have.attr', 'aria-hidden', 'true')
+
+    cy.get('@tooltipTrigger').focus()
+
+    cy.get('@tooltipLabel')
+      .should('be.visible')
+      .and('have.class', 'is-set')
+      .and('have.class', 'is-visible')
+      .and('have.attr', 'aria-hidden', 'false')
+
+    cy.get('@tooltip').type('{enter}')
+
     cy.get('@tooltipLabel')
       .should('be.hidden')
       .and('not.have.class', 'is-set')
@@ -127,15 +143,18 @@ describe('UsaTooltip', () => {
     const positions = ['top', 'bottom', 'left', 'right']
 
     positions.forEach(position => {
-      mount(UsaTooltip, {
-        props: {
-          position: position,
-          label: 'Test tooltip label',
+      const wrapperComponent = {
+        components: { UsaTooltip },
+        data() {
+          return {
+            position: position,
+            label: 'Test tooltip label',
+          }
         },
-        slots: {
-          default: () => 'Test tooltip trigger',
-        },
-      }).as('wrapper')
+        template: `<div style="padding:150px;"><UsaTooltip :position="position" :label="label">Test tooltip trigger</UsaTooltip></div>`,
+      }
+
+      mount(wrapperComponent, {}).as('wrapper')
 
       cy.get('.usa-tooltip__body').and(
         'have.class',

diff --git a/src/components/UsaTooltip/UsaTooltip.vue b/src/components/UsaTooltip/UsaTooltip.vue
@@ -5,7 +5,7 @@ export default {
 </script>
 
 <script setup>
-import { computed, ref, onMounted, onBeforeUnmount, watch } from 'vue'
+import { computed, ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
 import {
   computePosition,
   autoUpdate,
@@ -63,7 +63,7 @@ const floatingElement = ref(null)
 const isSet = ref(false)
 const isVisible = ref(isSet.value)
 const currentPosition = ref(props.position)
-const currentCoordinates = ref({})
+const currentCoordinates = ref({ left: 0, top: 0, opacity: 0 })
 const computedId = computed(() => props.id || nextId('usa-tooltip'))
 
 const labelClasses = computed(() => [
@@ -93,27 +93,40 @@ const updatePosition = () => {
     ],
   }).then(({ x, y, placement }) => {
     currentPosition.value = placement
-    currentCoordinates.value = {
-      left: `${x}px`,
-      top: `${y}px`,
-    }
+    currentCoordinates.value.left = `${x}px`
+    currentCoordinates.value.top = `${y}px`
   })
 }
 
 watch(isSet, currentlySet => {
-  requestAnimationFrame(() => {
+  nextTick(() => {
     requestAnimationFrame(() => {
       isVisible.value = currentlySet
+      // May be able to be removed once:
+      // https://github.com/uswds/uswds/issues/4458 is fixed.
+      currentCoordinates.value.opacity = currentlySet ? 1 : 0
     })
   })
 })
 
 onMounted(() => {
+  // `isSet` needs to be `true` until floating UI has initialized and has
+  // calculated it's initial position.
+  // May be able to be removed once:
+  //  https://github.com/uswds/uswds/issues/4458 is fixed.
+  isSet.value = true
+
   cleanupFloatingUi = autoUpdate(
     referenceElement.value,
     floatingElement.value,
     updatePosition
   )
+
+  nextTick(() => {
+    requestAnimationFrame(() => {
+      isSet.value = false
+    })
+  })
 })
 
 onBeforeUnmount(() => {
@@ -134,11 +147,12 @@ onBeforeUnmount(() => {
       class="usa-tooltip__trigger"
       tabindex="0"
       :aria-describedby="computedId"
+      @mouseenter="isSet = true"
       @mouseover="isSet = true"
       @mouseout="isSet = false"
       @focus="isSet = true"
       @blur="isSet = false"
-      @keyup.esc="isSet = false"
+      @keydown="isSet = false"
       ><slot></slot
     ></component>
     <span