I am using the Material UI Autoplete ponent with multi select. It works great on desktop, but on mobile, I would like to disable keyboard input and only allow touch selection. In other words, I don't want the smartphone keyboard to appear.

I did not find any params for this in the docs:

I tried to disable the TextField, but I could still enter text - it seems that the disabled param does not get added to the input field in the page source:

<Autoplete
    disableClearable
    options={[...]}
    renderInput={(params) => <TextField {...params} label="xxx" disabled />}
    blurOnSelect="touch"
/>

I need the autoplete ponent without the autoplete feature :) - I could also switch to the default Select ponent, but i would like to keep autoplete on desktop. Also, the Autoplete ponent offers multi-selection with checkboxes.

I am using the Material UI Autoplete ponent with multi select. It works great on desktop, but on mobile, I would like to disable keyboard input and only allow touch selection. In other words, I don't want the smartphone keyboard to appear.

I did not find any params for this in the docs: https://material-ui./api/autoplete/#props

I tried to disable the TextField, but I could still enter text - it seems that the disabled param does not get added to the input field in the page source:

<Autoplete
    disableClearable
    options={[...]}
    renderInput={(params) => <TextField {...params} label="xxx" disabled />}
    blurOnSelect="touch"
/>

I need the autoplete ponent without the autoplete feature :) - I could also switch to the default Select ponent, but i would like to keep autoplete on desktop. Also, the Autoplete ponent offers multi-selection with checkboxes.

• javascript
• reactjs
• material-ui

2 Answers 2

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

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

<InputLabel id="label">Age</InputLabel>
<Select labelId="label" id="select" value="20">
   <MenuItem value="10">Ten</MenuItem>
   <MenuItem value="20">Twenty</MenuItem>
</Select>

<TextField id="select" label="Age" value="20" select>
  <MenuItem value="10">Ten</MenuItem>
  <MenuItem value="20">Twenty</MenuItem>
</TextField>

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

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

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

The reason you don't want a keyboard to appear might be that it makes the Autoplete 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:

<Autoplete
    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.