[SOLVED] How to get value of a Select with a Tooltip for every option in ReactJS?

How to get value of a Select with a Tooltip for every option in ReactJS?

Hello I'm using MUI Select for my form but for some reason selected value is lost if I add a Tooltip for it's options?

Select defenition:

<Select
   style={{width: "-webkit-fill-available"}}
   onChange={(e) => {
       console.log('indexed: ', e);
   }}
  labelId="client-request-select-label">

Option defenition:

<Tooltip title="big text to display as tooltip">
     <MenuItem value={"short summary to display as option"}>{"short summary to display as option"}</MenuItem>
</Tooltip>

Console output:

PointerEvent {isTrusted: false, target: {…}, pointerId: 1, width: 1, height: 1, …}

***

target : {value: undefined, name: undefined}

***

If I don't use Tooltip component, this code works fine and displays selected value. How do I access this select's value in ReactJS? Or, alternatively, is there any other component I can use to display a tooltip for select's options? Thanks

Solution

Wrapping MenuItem directly breaks Select's functionality. Try making MenuItem the parent.

<MenuItem value="option">
    <Tooltip title="big text to display as tooltip">
        <Typography>short summary to display as option</Typography>
    </Tooltip>
</MenuItem>