Tooltip onClose event not firing reliably in virtualized lists with react-select dropdowns

[Nikunj1729]

Steps to reproduce

Steps:

1. Open this link to live example: - https://tpczyv.csb.app/
2. Code - https://codesandbox.io/p/sandbox/nostalgic-snow-tpczyv

Title: Tooltip onClose event not firing reliably in virtualized lists with react-select dropdowns

Labels: bug, component: Tooltip, priority: high - impacting PROD application

---

Description

MUI Tooltip's onClose event doesn't fire reliably when tooltips are used in a virtualized list environment with react-select dropdowns. This causes tooltips to get "stuck" open, creating a poor user experience.

Current behavior

Current Behavior

• Tooltips remain open even after mouse leaves the trigger element
• Multiple tooltips can be open simultaneously (should be prevented)
• onClose event doesn't fire, causing tooltips to persist indefinitely
• Issue occurs specifically in virtualized list environments

Expected behavior

Expected Behavior

• Tooltips should close when mouse leaves the trigger element
• onClose event should fire reliably
• Only one tooltip should be open at a time
• Tooltips should work consistently in virtualized lists

Context

CodeSandbox Example

Sandbox - Complete reproducible example with:

• Virtualized list using react-window
• React-select dropdowns
• MUI Tooltips with onClose detection
• Issue counter to track occurrences
• Detailed console logging

Reproduction Steps

1. Open the CodeSandbox example: - https://codesandbox.io/p/sandbox/nostalgic-snow-tpczyv
2. Hover over the circular icons next to categories to open tooltips
3. Move mouse quickly between different icons
4. Hover over dropdown inputs while a tooltip is open
5. Try rapid mouse movements across the list
6. Observe that tooltips get stuck open and the issue counter increments

Technical Details

• Issue appears to be related to event propagation conflicts between tooltip and dropdown components
• Virtualization may be affecting event handling
• Rapid mouse movements trigger the issue more frequently
• Multiple tooltips in close proximity exacerbate the problem

Workarounds Attempted

• Using open prop for controlled tooltips
• Adding stopPropagation() and preventDefault()
• Implementing global tooltip state management
• Using setTimeout delays for onClose
• None of these approaches fully resolve the issue

Impact

• High impact on applications using tooltips in virtualized lists
• Poor UX with stuck tooltips
• Accessibility issues with persistent overlays
• Performance impact with multiple open tooltips

Additional Information

• The example includes detailed logging to help identify the root cause
• Issue counter increments when onClose doesn't fire properly
• Console shows "ISSUE: onClose was not called within expected time"
• Problem is reproducible 100% of the time with the provided steps

---

Your environment

Environment

• MUI Version: 6.1.9
• React Version: 18.3.1
• Browser: Chrome, Firefox, Safari (all affected)
• OS: Windows, macOS, Linux (all affected)

npx @mui/envinfo

    System:
    OS: macOS 15.6.1
  Binaries:
    Node: 23.11.0 - /opt/homebrew/bin/node
    npm: 8.19.4 - /Users/Downloads/node_modules/.bin/npm
    pnpm: 10.18.2 - /Users/Library/pnpm/pnpm
  Browsers:
    Chrome: 141.0.7390.77
    Edge: Not Found
    Firefox: 129.0.1
    Safari: 18.6
  npmPackages:
    @emotion/react: 11.10.0 => 11.10.0 
    @emotion/styled: 11.10.0 => 11.10.0 
    @mui/material: ^6.1.9 => 6.4.12 
    @types/react: 18.3.11 => 18.3.11 
    react: 18.3.1 => 18.3.1 
    react-dom: 18.3.1 => 18.3.1 
    typescript: ^5.7.3 => 5.8.3 

Search keywords: Tooltip, react-select, virtualized lists, onClose