MenuItem wrapped in Tooltip breaks Select's onChange callback

If you want to explain a Select field’s MenuItems via a tooltip, the onChange will no longer work.

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

Expected Behavior

Select a new value, state is updated

Current Behavior

Crash. Event target is the tooltip, not the MenuItem, and thus there is no target value

Steps to Reproduce (for bugs)

<FormControl>
    <InputLabel htmlFor='activity-level'>Activity Level</InputLabel>
    <SelectField
        input={<Input name="sort" id='activity-level' />}
        onChange={this.handleFormChange('activityLevel')}
        value={this.state.activityLevel}
    >
        <Tooltip id="tooltip-sedentary" title="Little or no exercise" placement="right">
            <MenuItem value={'sedentary'} >Sedentary</MenuItem>
        </Tooltip>
        <Tooltip id="tooltip-light" title="1-3/week" placement="right">
            <MenuItem value={'light'} >Light</MenuItem>
        </Tooltip>
    </SelectField>
</FormControl>


handleFormChange(key) {
    return (event) => {
        debugger
        let newState = {};
        newState[key] = event.target.value;
        this.setState(newState);
    }
}

Your Environment

Tech	Version
Material-UI	1.0.0-beta.26
React	16.1.0

[oliviertassinari]

@JarLowrey You need to create a custom menu item component, forward the injected property to the MenuItem. It’s fundamentally the same as what it’s documented here https://material-ui-next.com/guides/composition/#wrapping-components.

[nickfreemandesign]

@Jakeron thanks for providing this closure. I ended up just putting the tooltip inside the menuselect, rather than the reverse to solve my problem

<Select
  value={someValue}
  onChange={({ target: { value } }) => handleChange(value)}>
    {
      SOME_COLLECTION.map(({ name, description }) =>
        <MenuItem value={name}>
          <Tooltip
            title={description}
            placement={"left-start"}>
              <span>{name}</span>
          </Tooltip>
        </MenuItem>)
    }
</Select>