[Tooltip] does not close if wrapping icon button with conditional icon

[DenysVuika]

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/stoic-wind-zs3hfr?file=/src/App.tsx

Steps:

1. Declare a tooltip
2. Declare an icon button inside a tooltip
3. Declare a conditional icon inside the button
4. Click the button

The tooltip stays on the screen

<Tooltip title={'Conversation information'}>
  <IconButton onClick={() => setSettingsOpen(!showChatSettings)}>
    {showChatSettings ? <Info /> : <InfoOutlinedIcon />}
  </IconButton>
</Tooltip>

The tooltip works as expected

<Tooltip title={'Conversation information'}>
  <IconButton onClick={() => setSettingsOpen(!showChatSettings)}>
     <Info />
  </IconButton>
</Tooltip>

Current behavior 😯

The tooltip stays open on the screen

Expected behavior 🤔

The tooltip should disappear

Context 🔦

I have a button that changes the icon based on the boolean flag. The button is wrapped with the tooltip.

Your environment 🌎

npx @mui/envinfo

    @emotion/react: ^11.11.1 => 11.11.1 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.14 
    @mui/core-downloads-tracker:  5.14.8 
    @mui/icons-material: ^5.14.8 => 5.14.8 
    @mui/material: ^5.14.8 => 5.14.8 
    @mui/private-theming:  5.14.8 
    @mui/styled-engine:  5.14.8 
    @mui/system:  5.14.8 
    @mui/types:  7.2.4 
    @mui/utils:  5.14.8 
    @types/react: 18.2.14 => 18.2.14 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: ~5.1.3 => 5.1.6 

[Nagendra88688]

hello @DenysVuika @zannager , can i pick this task?
Please let me know

[ZeeshanTamboli]

Please provide a CodeSandbox reproducing the issue. The issue template is a good starting point. Code snippets alone are not sufficient, as they don't provide insight into how you're rendering the code. A minimal practical live example is essential.

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

[DenysVuika]

Please see the link with example: https://codesandbox.io/s/stoic-wind-zs3hfr?file=/src/App.tsx

[ZeeshanTamboli]

This relates to issues #12246 and #12347. When you move your mouse away, the tooltip will close. However, if you want to close it immediately after clicking, you'll need to customize the behavior with controlled tooltips. See https://codesandbox.io/s/exciting-euler-g2ct58?file=/src/App.tsx.

[github-actions]

👋 Thanks for using MUI Core!

We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support, please check out https://mui.com/getting-started/support/. Thanks!

If you have a question on Stack Overflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[DenysVuika]

@ZeeshanTamboli the problem is that layout changes, the button moves away, and the tooltip stays there. And the only case when this problem occurs is when icon inside the button is conditionally rendered. Replace that with the static icon and issue won't happen. It's very strange moving to a controlled tooltip and writing more code just to hide the problem.

[DenysVuika]

Check the second example with a static icon, it works as expected: https://codesandbox.io/s/exciting-pare-gq7q39?file=/src/App.tsx

[ZeeshanTamboli]

@DenysVuika I did some debugging and found that the onMouseLeave event is triggered when the icon is static, but it doesn't trigger when the icons are rendered conditionally on click. The code for handling the mouseleave event is located here, and it's called on children.

I believe this issue is related to React issues - facebook/react#6807 and facebook/react#4492. The problem occurs because when elements are conditionally rendered, they get replaced, causing the mouseleave event to be lost.

I attempted the solution mentioned in the second point of facebook/react#4492 (comment) by using pointerEvents: none, and it worked. You can check the updated CodeSandbox. I don't see how we can fix this on Material UI's side.