Adding custom components into Material-ui Select

Question

So, I'm trying to add <Button /> inside Material-ui <Select /> component (it should close the drop-down dialog when I click on the button) but the problem is that the button behaves as a <MenuItem /> component and i can`t set behavior i need.

Is anyone tried to customize select like so? Any ideas?

Answer 1

It works when you wrap the buttons in a <div> under <MenuItem/>s. For example,

<Select>
  <MenuItem>1</MenuItem>
  <MenuItem>2</MenuItem>
  <div>
    <button onClick={()=>console.log('close button clicked')}>close</button>
  </div>
</Select>

I've created a codesandbox