[Select] [Input] Infinite loop error

[caub]

I'm trying to have an <Input> inside a Select like below

But it's triggering an infinite loop, I'll try to do it without a Select, but with a Popover, MenuList, etc.. to see if the error is still there

Edit: it doesn't happen without a wrapping Select https://codesandbox.io/s/n370kz19y0, I guess the problem is that Select uses an Input already, but it's still buggy

<Select
  value={selectedData.toJS()}
  onChange={e => {
    this.setState({ selectedData: Set(e.target.value) });
  }}
>
  {[(
    <MenuItem key="close" style={{background:'transparent'}}>
      <Input
        placeholder="Filter"
        value={filter}
        onChange={e => {
          e.stopPropagation();
          this.setState({ filter: e.target.value });
        }}
      />
      <IconButton style={{ marginLeft: 'auto' }}><Icon>close</Icon></IconButton>
    </MenuItem>
  )].concat(data.valueSeq().map(({ name, description, id }) => (
    <MenuItem key={id} value={id}>
      <Checkbox checked={selectedData.has(id)} />
      <ListItemText primary={name} />
    </MenuItem>
  )))}
</Select>

demo with an <input> it works: https://codesandbox.io/s/6r4p7p2w3

demo with an <Input> https://codesandbox.io/s/5wvmmoxppx I get:

Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Tech	Version
Material-UI	1.0.0-beta.32
React	16.2.0
browser	chrome/firefox

[oliviertassinari]

@caub Oh man, this is a great catch. The fix is trivial. I'm on it.

[kpennell]

@oliviertassinari I had to fix this with checkbox via including () => . Feels dirty because I'm just avoiding the 'this' rabbit hole. ie. it works but I don't know why really.

onChange={() => this.superFunction}

[caub]

@kpennell Can you share a repro? (on codesanbox for ex)