Nesting MaterialUI HtmlTooltip inside of Material UI Select MenuItem results in is undefined when a menuitem is selected


I am attempting to have a Material UI select with MenuItems that are wrapped in HtmlTooltips, which display hover information about each list choice.

I’m keeping it simple intentionally now as a PoC and will map it dynamically later.


I am using the controller/view pattern and have the following material UI Select component in the view:

  <InputLabel id="owner">Owner</InputLabel>

    <MenuItem value="0" disabled>
      (Select a Value)

    <MenuItem value="1" disabled>
      Charlie Person

          <Typography color="inherit">
            Steve Human
          <b>{"Next PTO:"}</b>{" "}
          <i style={{ color: "red" }}>
            {" 12/25/20-01/01/20"}
      <MenuItem value="2">
        Steve Human

…in the controller, my state getter/setter…

   const [owner, setOwner] = useState(0);

…and also in the controller, a function which the select uses to change the state value when a list item is selected:

   const handleOwnerChange = (event) => {


With this configuration, I can select Charlie Person in the list(who does not have an HtmlTooltip). Selecting him runs the handleOwnerChange function and is defined as expected, everything works and the Select is populated – but no mouseOver, obviously, as it is not implemented.

If I mouseOver Steve Human in the list I get the appropriate HtmlTooltip that I want, but when I select Steve Human as the Select value, the Select gets set to a blank value:

enter image description here

When Steve Human is selected, a debugger statement inside of the handleOwnerChange function shows me that is undefined <—–

I have tried nesting the HtmlTooltip INSIDE of the MenuItem instead and that results in a white screen.


  1. Is nesting the MenuItem inside of the HtmlToolTip making it change how I have to reference inside of the handleOwnerChange function? From the observations, it feels like there might be some kind of parent/child relationship in play here with the HTML or Javascript objects that that I probably don’t understand.

  2. If i’m way off here, any advice regarding what’s going on and how to get this to correctly define the target would help, thank you!!!

Source: Ask Javascript Questions