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

—GOAL—

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.

—CURRENT CODE—

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

<FormControl
  variant="outlined"
>
  <InputLabel id="owner">Owner</InputLabel>

  <Select
    labelId="owner"
    id="owner"
    defaultValue="0"
    value={props.owner}
    onChange={props.handleOwnerChange}
  >
    <MenuItem value="0" disabled>
      (Select a Value)
    </MenuItem>

    <MenuItem value="1" disabled>
      Charlie Person
    </MenuItem>

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

…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) => {
    setOwner(event.target.value);
  };

—OBSERVATIONS / WHAT I’VE TRIED—

With this configuration, I can select Charlie Person in the list(who does not have an HtmlTooltip). Selecting him runs the handleOwnerChange function and event.target 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 event.target is undefined <—–

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

—QUESTIONS—

  1. Is nesting the MenuItem inside of the HtmlToolTip making it change how I have to reference event.target 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

LEAVE A COMMENT