Question: So I'm trying to write a custom combo box with React and Material-UI. It will show the selected value in the input, provide a list of options (MenuItems) in a dropdown, and have a textbox to enter new options at the bottom.

[Here's what it looks like](https://i.stack.imgur.com/XEEE7.png)

```
<TextField
  className={classes.textBox}
  select
  onChange={handleChange}
  label="My input"
>
  <MenuItem value={10}>Ten</MenuItem>
  <MenuItem value={20}>Twenty</MenuItem>
  <MenuItem value={30}>Thirty</MenuItem>
  <MenuItem>
    <TextField />
  </MenuItem>
</TextField>

```

The problem is whenever I click the TextField, it thinks I'm selecting that and it closes the dropdown. Is it possible to prevent this behavior?

Answer: 
After a lot of digging and even more trial and error, I've found a workaround.
In the case of my example, I needed to intercept the click event on my TextField and apply `event.stopPropagation()`.

Full working example:

```
 <TextField
  select
  onChange={handleChange}
  label="My input"
>
  <MenuItem value={10}>Ten</MenuItem>
  <MenuItem value={20}>Twenty</MenuItem>
  <MenuItem value={30}>Thirty</MenuItem>
  <MenuItem>
    <TextField
      onClick={(event) => event.stopPropagation()}
      label="New item"
      onChange={() => { console.log('change') }}
    />
  </MenuItem>
</TextField>

```
I tried it, really tried and couldn't find a way. It looks like it doesn't have the function to control the close event. Like for EX: `Menu` has `onClose` `prop` but `TextField` doesn't have that

Edit:
I think you should use [this](https://material-ui.com/components/autocomplete/#playground) the second option `disableClosOnSelect`