Cannot use Select inside Tooltip that has ClickAwayListener

[nishikantparmariam]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/quizzical-allen-vsg344?file=/Demo.js

Steps:

1. Click on Click
2. Select a value from Select component
3. Notice that the Select options come behind the Tooltip

Current behavior 😯

(Similar issue reported in #36278 (comment) with Popper) An attempt to increase zIndex of MenuProps (uncomment line 26 in above code), closes the Tooltip abnormally:

An attempt to pass MenuProps={{disablePortal: true}} in Select (as suggested in https://stackoverflow.com/a/61544521/22132048) works but it makes the position and CSS of Select options very odd, is there a way to make it as it is with disablePortal: false? Also, I would expose this as a library and we allow users to render their custom component inside Tooltip, the problem is we would have to tell users/document that pass disablePortal:true, certain CSS, and determine position yourselves if you want to make Select work inside Tooltip. Is there a better way?

Expected behavior 🤔

Select options should work properly on top of Tooltip/Popper.

Context 🔦

My use-case is to open a Tooltip / Popper upon an icon click, I also want that Tooltip should hide if user clicks away so I've used ClickAwayListener. Inside the Tooltip, I want to render a custom component in title that has Selects, Buttons, TextInputs etc. I found this behavior specially with Select component.

Please suggest solutions/workarounds. Thanks!

Your environment 🌎

Browser: Chrome Version 116.0.5845.188
MUI Version: Reproducible in Latest (See sandbox example)

[samuelsycamore]

I would argue that this is an inappropriate use of a tooltip. According to Nielsen Norman Group's Tooltip Guidelines, a tooltip should only be used to display brief messages that are not vital to the user's completion of a task. As such, I can't think of a valid use case for placing a Select inside of one. It looks like you'd be better off using a Menu instead.

[nishikantparmariam]

I agree that one should not use Select inside Tooltip but these issues exist in Popper also - #36278 (comment)