React Material UI: How to disable typing in Autocomplete text field?

0
votes

I have used material UI component Autocomplete to render some options, but I want Autocomplete to let user avoid typing to get suggestion. Is there any way to make it work as select dropdown and blocking the textField input. Here, I can use Material UI select dropdown but is there anyway I can change autocomplete to select?

I have tried passing disabled to the TextField props but it looks like the complete dropdown is disable and still it allows to enter text.

Here is my component of autocomplete to reuse:

 <Autocomplete
    fullWidth
    value={selected}
    onChange={handleChange}
    renderInput={(params) => <TextField {...params} {...getTextFieldProps({ value: value })} />}
    {...getAutocompleteProps({ value: value })}
  />
1
javascriptreactjsmaterial-ui
in handleChange function just return immediately, without setting the value to state. – Tom Bombadil
I have some options to show in dropdown. In handle change the option value is selected. There would also be a cursor which will make user to type. – Tales
@Tales why don't you use Select component? – NearHuscarl
@NearHuscarl I have seen material UI select demos and I have seen it shows the option in a sticky dialog which when opens it hovers on the dropdown. I want something similar to autocomplete if opens the options it should be shown below the dropdown – Tales
@Tales so you want something like this? – NearHuscarl

1 Answers

0
votes

Set the inputValue="" for Autocomplete.