0

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

Kaushik Manoharan
  • 1
  • 2

1 Answers1

0

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" />
    )} />
HuSaad
  • 78
  • 7
  • Hi, Thanks for the reply, but my issue is different, I just gave the component that I used, Have updated the snippet in question for better understanding – Kaushik Manoharan Apr 27 '22 at 13:07
  • What about the handle change event on the Select component, I just included the handleChange action in the code snippet make sure to change the state value onChange as shown, Values must be controlled to take effect. – HuSaad Apr 27 '22 at 13:37
  • The issues does not lie with the data capturing/handling part, but with the UI component itself. When I click on the dropdown, it opens the dropdown menu. The issues is that I could not click on any interactive element in the page (I.e. a backdrop is added by default) I need a way /option to remove the backdrop in order to make the other elements interactive – Kaushik Manoharan Apr 27 '22 at 17:14
  • I see what u mean now, I think this is the normal behavior of the MUI Select Control try using the MUI autocomplete control it should serve your purpose. – HuSaad Apr 28 '22 at 08:00