Material Ui Autocomplete - Disable Keyboard Input (on Mobile)

I am using the Material UI Autocomplete component with multi select. It works great on desktop, but on mobile, I would like to disable keyboard input and only allow touch selection

Solution 1:

I think that you should create different component for mobile if you wish disable native keyboard. Material-ui Autocomplete is build on the Material-ui TextField component, on which one is build Select component.

This to pieces of code do the same (https://material-ui.com/components/selects/#api )

<InputLabelid="label">Age</InputLabel><SelectlabelId="label"id="select"value="20"><MenuItemvalue="10">Ten</MenuItem><MenuItemvalue="20">Twenty</MenuItem></Select><TextFieldid="select"label="Age"value="20"select><MenuItemvalue="10">Ten</MenuItem><MenuItemvalue="20">Twenty</MenuItem></TextField>

So if you pass a disable prop to the TextField in your Autocomplete component your whole filed will be disable.

To resolve that you can create one component which for desktop is autocomplete and for mobile is only select field.

Edit: The regular select component does offer a way to show checkboxes: https://material-ui.com/components/selects/#multiple-select

Solution 2:

The reason you don't want a keyboard to appear might be that it makes the Autocomplete results move over the textfield itself like in my application:

Where without onscreen keyboard it would look fine:

To solve this "moving over the input field" you can make the position of your listbox absolute, like:

<Autocomplete
    disableClearable
    options={[...]}
    renderInput={(params) =><TextField {...params} label="xxx"disabled />}
    blurOnSelect="touch"ListboxProps={{ style: { position: 'absolute', backgroundColor: '#fafafa'} }}
/>

This did for some reason made the listbox lose it's background color and the listbox border, so I declared the background color in there too again, but for the rest it will keep the suggestions under the users keyboard:

Hope this helps. @mods If the screenshots are too big feel free to change them into urls but I think it helps describing the problem/solution.