javascript - React Material UI: How to disable typing in Autocomplete text field? - Stack Overflow

admin管理员组

文章数量:1356878

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

Share Improve this question Follow edited Apr 2 at 14:09 Olivier Tassinari 8,69166 gold badges2525 silver badges2828 bronze badges asked Apr 20, 2021 at 5:56 TalesTales 30311 gold badge55 silver badges1616 bronze badges 6

• 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

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 4

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
        }}
    />

本文标签： javascriptReact Material UI How to disable typing in Autocomplete text fieldStack Overflow