fix: Ensure tooltips are displayed behind modals (#22957)

Author: mike-plummer

packages/frontend-shared/src/components/StandardModal.cy.tsx

@@ -1,5 +1,7 @@
 import StandardModal from './StandardModal.vue'
+import Tooltip from './Tooltip.vue'
 import { defaultMessages } from '@cy/i18n'
+import { DialogOverlay } from '@headlessui/vue'
 import { ref } from 'vue'
 
 const title = 'Test Title'
@@ -63,6 +65,42 @@ describe('<StandardModal />', { viewportWidth: 800, viewportHeight: 400 }, () =>
 
       cy.percySnapshot()
     })
+
+    it('automatically closes tooltips on open', () => {
+      const tooltipSlots = {
+        default: () => <div data-cy="tooltip-trigger">Trigger</div>,
+        popper: () => <div data-cy="tooltip-content">Tooltip Content</div>,
+      }
+      const modalSlots = {
+        default: () => <div>Modal Content!</div>,
+        overlay: ({ classes }) => <DialogOverlay class={[classes, 'bg-gray-800', 'opacity-90']} />,
+      }
+      const isOpen = ref(false)
+
+      cy.mount(() => (
+        <div>
+          <Tooltip v-slots={tooltipSlots} isInteractive />
+          <StandardModal v-slots={modalSlots} modelValue={isOpen.value} />
+        </div>
+      ))
+
+      // Open tooltip
+      cy.findByTestId('tooltip-trigger').trigger('mouseenter')
+
+      // Wait for tooltip to be visible
+      cy.findByTestId('tooltip-content')
+      .should('be.visible')
+      .then(() => {
+        // Open modal
+        isOpen.value = true
+      })
+
+      // Verify tooltip is no longer open once modal was opened
+      cy.findByTestId('tooltip-content')
+      .should('not.be.visible')
+
+      cy.percySnapshot()
+    })
   })
 
   describe('mouse and keyboard behavior', () => {

packages/frontend-shared/src/components/StandardModal.vue

@@ -52,6 +52,9 @@ import StandardModalHeader from './StandardModalHeader.vue'
 import StandardModalBody from './StandardModalBody.vue'
 import StandardModalFooter from './StandardModalFooter.vue'
 
+import { hideAllPoppers } from 'floating-vue'
+import { watch } from 'vue'
+
 import {
   Dialog,
   DialogOverlay,
@@ -84,6 +87,18 @@ const setIsOpen = (val: boolean) => {
   emit('update:modelValue', val)
 }
 
+// Ensure all tooltips are closed when the modal opens - this prevents tooltips from beneath that
+// are stuck open being rendered on top of the modal due to the use of a fixed z-index in `floating-vue`
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (value) {
+      hideAllPoppers()
+    }
+  },
+  { immediate: true },
+)
+
 const closeModal = () => {
   setIsOpen(false)
 }

packages/frontend-shared/src/gql-components/topnav/LoginModal.cy.tsx

@@ -1,6 +1,8 @@
 import { LoginModalFragmentDoc } from '../../generated/graphql-test'
 import LoginModal from './LoginModal.vue'
 import { defaultMessages } from '@cy/i18n'
+import Tooltip from '../../components/Tooltip.vue'
+import { ref } from 'vue'
 
 const text = defaultMessages.topNav
 
@@ -194,4 +196,42 @@ describe('<LoginModal />', { viewportWidth: 1000, viewportHeight: 750 }, () => {
       .and('be.disabled')
     })
   })
+
+  it('automatically closes tooltips on open', () => {
+    const tooltipSlots = {
+      default: () => <div data-cy="tooltip-trigger">Trigger</div>,
+      popper: () => <div data-cy="tooltip-content">Tooltip Content</div>,
+    }
+    const isOpen = ref(false)
+
+    cy.mountFragment(LoginModalFragmentDoc, {
+      render: (gqlVal) => {
+        gqlVal.authState.browserOpened = true
+
+        return (
+          <div>
+            <Tooltip v-slots={tooltipSlots} isInteractive />
+            <LoginModal gql={gqlVal} utmMedium="testing" modelValue={isOpen.value} />
+          </div>
+        )
+      },
+    })
+
+    // Open tooltip
+    cy.findByTestId('tooltip-trigger').trigger('mouseenter')
+
+    // Wait for tooltip to be visible
+    cy.findByTestId('tooltip-content')
+    .should('be.visible')
+    .then(() => {
+      // Open modal
+      isOpen.value = true
+    })
+
+    // Verify tooltip is no longer open once modal was opened
+    cy.findByTestId('tooltip-content')
+    .should('not.be.visible')
+
+    cy.percySnapshot()
+  })
 })

packages/frontend-shared/src/gql-components/topnav/LoginModal.vue

@@ -90,13 +90,14 @@
 <script setup lang="ts">
 import { useI18n } from '@cy/i18n'
 import { gql } from '@urql/core'
-import { computed } from 'vue'
+import { computed, watch } from 'vue'
 import Auth from '../Auth.vue'
 import ExternalLink from '../ExternalLink.vue'
 import { useOnline } from '@vueuse/core'
 import NoInternetConnection from '../../components/NoInternetConnection.vue'
 import CopyText from '@cy/components/CopyText.vue'
 import StandardModalHeader from '@cy/components/StandardModalHeader.vue'
+import { hideAllPoppers } from 'floating-vue'
 
 import {
   Dialog,
@@ -133,6 +134,18 @@ fragment LoginModal on Query {
 }
 `
 
+// Ensure all tooltips are closed when the modal opens - this prevents tooltips from beneath that
+// are stuck open being rendered on top of the modal due to the use of a fixed z-index in `floating-vue`
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (value) {
+      hideAllPoppers()
+    }
+  },
+  { immediate: true },
+)
+
 const setIsOpen = (value: boolean) => {
   emit('update:modelValue', value)
 }