fix(VTooltip): avoid stealing focus

fixes #22891

Author: J-Sek

packages/vuetify/src/components/VOverlay/VOverlay.tsx

@@ -209,6 +209,22 @@ export const VOverlay = genericComponent<OverlaySlots>()({
 
     useFocusTrap(props, { isActive, localTop, contentEl })
 
+    let openedWithActivatorFocus = false
+
+    function ownsFocus (activeElement: Element | null): boolean {
+      let current = activeElement
+      const visited = new Set<Element>()
+      while (current) {
+        const el = current.closest('.v-overlay__content')
+        if (!el || visited.has(el)) return false
+        if (el === contentEl.value) return true
+        visited.add(el)
+        const ownerId = el.closest('.v-overlay')?.id
+        current = ownerId ? document.querySelector(`[aria-owns~="${CSS.escape(ownerId)}"]`) : null
+      }
+      return false
+    }
+
     function returnFocusToActivator () {
       const el = activatorEl.value
       if (!el || !el.isConnected) return
@@ -219,11 +235,10 @@ export const VOverlay = genericComponent<OverlaySlots>()({
 
       const activeEl = document.activeElement
       const focusWasInOverlay =
-        !activeEl ||
-        activeEl === document.body ||
+        ((!activeEl || activeEl === document.body) && openedWithActivatorFocus) ||
         activeEl === el ||
         el.contains(activeEl) ||
-        !!activeEl.closest('.v-overlay__content')
+        ownsFocus(activeEl)
       if (!focusWasInOverlay) return
 
       const parent = el.parentElement
@@ -239,7 +254,13 @@ export const VOverlay = genericComponent<OverlaySlots>()({
     }
 
     watch(isActive, val => {
-      if (!val) returnFocusToActivator()
+      if (val) {
+        const activeEl = document.activeElement
+        const el = activatorEl.value
+        openedWithActivatorFocus = !!el && (activeEl === el || el.contains(activeEl))
+      } else {
+        returnFocusToActivator()
+      }
     }, { flush: 'post' })
 
     IN_BROWSER && watch(isActive, val => {

packages/vuetify/src/components/VTooltip/__tests__/VTooltip.spec.browser.tsx

@@ -0,0 +1,65 @@
+// Components
+import { VTooltip } from '../VTooltip'
+import { VBtn } from '@/components/VBtn'
+import { VList, VListItem } from '@/components/VList'
+import { VMenu } from '@/components/VMenu'
+
+// Utilities
+import { render, screen, userEvent, wait } from '@test'
+
+describe('VTooltip', () => {
+  it('should not focus the activator after closing on mouseleave', async () => {
+    render(() => (
+      <VList>
+        <VListItem data-testid="item" link title="Item">
+          <VTooltip activator="parent" openDelay={ 0 } closeDelay={ 0 }>Tooltip</VTooltip>
+        </VListItem>
+        <VListItem link title="Other" data-testid="other" />
+      </VList>
+    ))
+
+    const item = screen.getByTestId('item')
+    await userEvent.hover(item)
+    await expect.poll(() => screen.queryByCSS('.v-tooltip .v-overlay__content')).toBeVisible()
+
+    await userEvent.unhover(item)
+    await wait(100)
+
+    expect(screen.queryByCSS('.v-tooltip .v-overlay__content')).not.toBeVisible()
+    expect(document.activeElement).not.toBe(item)
+  })
+
+  it('should not focus the activator after closing on mouseleave while another menu is open', async () => {
+    render(() => (
+      <div>
+        <VBtn data-testid="tooltip-btn">
+          Hover me
+          <VTooltip activator="parent" openDelay={ 0 } closeDelay={ 0 }>Tooltip</VTooltip>
+        </VBtn>
+        <VBtn data-testid="menu-btn">
+          Open menu
+          <VMenu activator="parent">
+            <VList>
+              <VListItem link title="Item" />
+            </VList>
+          </VMenu>
+        </VBtn>
+      </div>
+    ))
+
+    await userEvent.click(screen.getByTestId('menu-btn'))
+    await expect.poll(() => screen.queryByCSS('.v-menu .v-overlay__content')).toBeVisible()
+
+    const tooltipBtn = screen.getByTestId('tooltip-btn')
+    await userEvent.hover(tooltipBtn)
+    await expect.poll(() => screen.queryByCSS('.v-tooltip .v-overlay__content')).toBeVisible()
+
+    await userEvent.unhover(tooltipBtn)
+    await wait(100)
+
+    expect(screen.queryByCSS('.v-tooltip .v-overlay__content')).not.toBeVisible()
+    expect(document.activeElement).not.toBe(tooltipBtn)
+    // the menu should remain open
+    expect(screen.queryByCSS('.v-menu .v-overlay__content')).toBeVisible()
+  })
+})