How do I disable TextField input with MUI Autocomplete?

user_1008891 0
Viewed 1060

I'm using Autocomplete with TextField for renderInput throughout my app for form field input, but have one case where I don't want to allow any text input and only permit the selection of one of the dropdown elements.

If I switch to the more natural Select component, however, the styling of the dropdown elements is different. In particular, the width of the options doesn't seem to be inherited from the FormControl element.

If I use Autocomplete and use dev tools in the browser to set the disabled property of the input element, everything behaves as I would like. But if I pass inputProps={{disabled: true}} to TextField, things blow up when I click the dropdown.

Any suggestions?

material-ui textfield autocomplete
1 Answers

You should rewrite readOnly attribute of a native input element to true via inputProps of renderInput to achieve the desired result:

    <Autocomplete
      renderInput={({ inputProps, ...rest }) =>    <TextField
      {...rest}
      inputProps={{ ...inputProps, readOnly: true }}
    />

Demo

user_141906900
Related