How to make the button clickable when MuI Dropdown is open

Question

I am new to MUI and I used something like this (Sample code)

<Select 
 name="premiumUser" 
 value={1}
 displayEmpty={true}
 fullWidth>
 <MenuItem value={1}>True</MenuItem>
 <MenuItem value={2}>False</MenuItem>
</Select>

but when the dropdown is open, I can't click on any button (say submit button), instead, the dropdown closes and the I have to click again on the button to submit. Is there any workaround for this?

I think it's acting as a "Popover" what I need is to make it act like "Popper"

The button is not clickable when the dropdown is open

Answer 1

MUI has done a pretty good job with their documentation. If you're looking for a dropdown with select values you are missing to add menu items to your MUI Select component, and make sure to make the values controlled using useState. Try using the MUI Autocomplete control which should serve your purpose

  <Autocomplete
    id="demo-simple-select"
    value={'true'}
    disableClearable
    inputValue=''
    fullWidth
    options={['true', 'false']}
    autoComplete={false}
    renderInput={params => (
        <TextField
            {...params}
            name="premiumUser"
            variant="outlined" />
    )} />