Material UI Autocomplete - 禁用键盘输入（在移动设备上）

Question

我正在使用带有多个 select 的 Material UI 自动完成组件。 它在桌面上运行良好，但在移动设备上，我想禁用键盘输入，只允许触摸选择。 换句话说，我不希望智能手机键盘出现。

我在文档中没有找到任何参数： https://material-ui.com/api/autocomplete/#props

我试图禁用 TextField，但我仍然可以输入文本 - 似乎禁用的参数没有添加到页面源中的输入字段中：

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

我需要没有自动完成功能的自动完成组件:) - 我也可以切换到默认的 Select 组件，但我想在桌面上保留自动完成功能。 此外，自动完成组件提供了带有复选框的多选功能。

Answer 1

如果您希望禁用本机键盘，我认为您应该为移动设备创建不同的组件。 Material-ui 自动完成功能建立在 Material-ui TextField 组件之上，其中一个是构建 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>

因此，如果您将禁用道具传递给自动完成组件中的 TextField，您的整个文件将被禁用。

要解决此问题，您可以创建一个组件，该组件对于桌面是自动完成的，而对于移动设备，则只有 select 字段。

编辑：常规 select 组件确实提供了一种显示复选框的方法： https://material-ui.com/components/selects/#multiple-select

Answer 2

您不希望出现键盘的原因可能是它使自动完成结果移动到文本字段本身，就像在我的应用程序中一样：

如果没有屏幕键盘，它看起来会很好：

要解决此“在输入字段上移动”的问题，您可以将列表框的 position 设为绝对值，例如：

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

由于某种原因，这确实使列表框失去了它的背景颜色和列表框边框，所以我也在那里再次声明了背景颜色，但是对于 rest，它将保留用户键盘下的建议：

希望这可以帮助。 @mods 如果屏幕截图太大，可以随意将它们更改为 url，但我认为这有助于描述问题/解决方案。