Автозаполнение пользовательского интерфейса материала - отключить ввод с клавиатуры (на мобильных устройствах)

Question

Я использую компонент Material UI Autocomplete с множественным выбором. Он отлично работает на настольных компьютерах, но на мобильных устройствах я хотел бы отключить ввод с клавиатуры и разрешить выбор только касанием. Другими словами, я не хочу, чтобы отображалась клавиатура смартфона.

Я не нашел никаких параметров для этого в документации: https://material-ui.com/api/autocomplete/#props

Я пробовал чтобы отключить TextField, но я все еще могу ввести текст - похоже, что отключенный параметр не добавляется в поле ввода в источнике страницы:

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

Мне нужен компонент автозаполнения без функции автозаполнения: ) - Я мог бы также переключиться на компонент Select по умолчанию, но я бы хотел сохранить автозаполнение на рабочем столе. Кроме того, компонент Автозаполнение предлагает множественный выбор с помощью флажков.

Answer 1

Я думаю, вам следует создать другой компонент для мобильных устройств, если вы sh отключите встроенную клавиатуру. Автозаполнение Material-ui построено на компоненте TextField Material-ui, на котором построен компонент Select.

Это для частей кода делает то же самое (https://material-ui.com/components/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>

Итак, если вы передадите опцию disable для TextField в вашем компоненте Autocomplete, все ваше поле будет отключено. только поле выбора.

Изменить: обычный компонент выбора предлагает способ отображения флажков: https://material-ui.com/components/selects/#multiple -select