I have used Material UI ponent Autoplete to render some options, but I want Autoplete 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 autoplete to select?

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

Here is my ponent of autoplete to reuse:

 <Autoplete
    fullWidth
    value={selected}
    onChange={handleChange}
    renderInput={(params) => <TextField {...params} {...getTextFieldProps({ value: value })} />}
    {...getAutopleteProps({ value: value })}
  />

I have used Material UI ponent Autoplete to render some options, but I want Autoplete 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 autoplete to select?

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

Here is my ponent of autoplete to reuse:

 <Autoplete
    fullWidth
    value={selected}
    onChange={handleChange}
    renderInput={(params) => <TextField {...params} {...getTextFieldProps({ value: value })} />}
    {...getAutopleteProps({ value: value })}
  />

• javascript
• reactjs
• material-ui
• autoplete

• in handleChange function just return immediately, without setting the value to state. – Tom Bombadil Commented Apr 20, 2021 at 6:00
• 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 Commented Apr 20, 2021 at 6:06
• @Tales why don't you use Select ponent? – NearHuscarl Commented Apr 20, 2021 at 6:19
• @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 autoplete if opens the options it should be shown below the dropdown – Tales Commented Apr 20, 2021 at 6:34
• 1 @Tales so you want something like this? – NearHuscarl Commented Apr 20, 2021 at 7:24

3 Answers 3

You might wanna addonKeyPress={(e) => {e.preventDefault();}} in the textfield and if the caret in the text field is annoying you can change its color to match the rest by adding sx in the inputprops so it won't show upInputProps={{sx: {caretColor: "white",}}}

Set the inputValue="" for Autoplete.

For anyone who wants the Select option to open (down) as a dropdown, you need to update the anchorOrigin or transformOrigin to reposition your options.

As follow:

<Select
     ...
     MenuProps={{
            anchorOrigin: {
                vertical: "bottom",
                horizontal: "left"
            },
            transformOrigin: {
                vertical: "top",
                horizontal: "left"
            },
            getContentAnchorEl: null
        }}
    />