Tooltip stays displayed on top of MenuItem components of a Select component

[Tuaniwan]

When using a Tooltip component around a Select component containing MenuItems, when you click the Select (not only Tooltip stays displayed but it also sticks above the MenuItems) and click a MenuItem, the Tooltip stays displayed as if we were still hovering the Select component. Now to make it disappear you can re-hover the Select, or click anywhere else in the DOM.

I feel like these are two separate issues.

1. The Tooltip having a z-Index above the one of the MenuItem (although this may be specific to my very own use case only)

2. The other one would be that the tooltip stays displayed after clicking a MenuItem to change the Select's value, when it is not even being hovered anymore.

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

When clicking the Select component, the tooltip should disappear. Therefore, when the MenuItems appear, they won't have the tooltip on top of them, and if your MenuItems have a tooltip, it will still be displayed above the other MenuItems as you would expect it and the tooltip would still be invisible after selecting an item in the Select component.

Current Behavior

The tooltip stays displayed on top of everything until the Select component is hovered, or the user clicks anywhere other than the Select component.

Steps to Reproduce (for bugs)

Here is the live example on codesandbox.io.

1. Click the Select component. (Notice the tooltip stays on top of the MenuItems)
2. Select any of the MenuItems. (Notice how the Tooltip flickers as you move your mouse)
3. Click it (The MenuItems disappear but the tooltip is still displayed as if there was a mouse hovering the Select)

Context

Your Environment

Tech	Version
Material-UI	next
React	16.0.0
browser	Chrome 65.0.3325.181

[Tuaniwan]

@oliviertassinari I would like to know if this actually an issue or not, if possible! I know that a Button with a Menu/MenuItems has the behavior that I want but I am limited to the use of Select in my case.

[sethduncan]

I'm experiencing the same issue. I have a tooltip on an icon button that opens a dialog. After the dialog is dismissed, the tooltip appears and will remain active until the button is activated with a mouseover event.

[sethduncan]

I found a fix for my issue. See here.

[lukePeavey]

I think there are two separate issues here.

The first issue (@Tuaniwan's example) occurs when using a Tooltip around a component that creates a modal, ie a Select or Menu. The onMouseLeave event doesn't fire on the Select as you would expect when the modal opens on top of it. I think this is due to the way that event bubbling works in portals. Even though the Menu is rendered outside of the Select in the DOM, onMouseEnter and onMouseLeave behave as though its a child.

There is an open issue about this on the React repo facebook/react#11387.

[Tuaniwan]

I got my asnwer here.

[oliviertassinari]

The controlled answer looks good to me: https://codesandbox.io/s/oxlmqo4m9z.

[w5lurz]

I am still experiencing this issue.

Currently using a TextField component with the type "select" (the Select component's label is buggy when it shrinks to the top that's why i need it like this) and with the controlled Tooltip open/!open state with the events onMouseEnter, onMouseLeave works just fine but the onClick not.

CodeSandbox: https://codesandbox.io/s/sharp-rain-7y0be?file=/src/App.tsx

[yogeshjain999]

I also faced same issues while using disableTriggerFocus or defining controlled tooltip as suggested above.

With controlled tooltip, onMouseEnter and onMouseLeave works when select dropdown is opened/closed. But if dropdown is kept open and cursor is moved outside of window and again inside of the open dropdown, tooltip gets shown and overlapped.

Instead, using renderValue prop to wrap the selected value with tooltip worked for me.

const renderValueWrappedByTooltip = (value: any) => {
  return (
    <Tooltip title={title} placement='top'>
      <div className={classes.selectValue}>{value}</div>
    </Tooltip>
  );
};

return (
  <Select
    ...
    renderValue={renderValueWrappedByTooltip}
  >
    ...
  </Select>
);

[SantoshKumarRavi]

https://stackoverflow.com/questions/49198777/material-ui-tooltip-zindex-over-menuitem-in-select-component

try this simple solution with z-index. we have control without making state also