在带有 react-hook-form 的 freeSolo 模式下使用 Material UI 自动完成

Question

我正在尝试使用 Material UI 在自由独奏模式下的自动完成功能作为一种组合输入。用户应该能够通过自动完成 select 建议的选项，或者如果没有可用的选项，则输入值应该用作最终表单值。

问题：

案例一：自动完成工作并建议可以 selected 并提交的选项，但当输入具有自定义值时，它不会被提交。

https://codesandbox.io/s/autocomplete-free-solo-case-1-i7kin?file=/demo.js

案例二：提交了来自自动完成和自定义输入值的 selected 选项，但自动完成下拉列表不再显示建议，而是在整个输入 selected 期间保持打开状态

https://codesandbox.io/s/autocomplete-free-solo-case-2-uk9db?file=/demo.js

我可以接受第二种情况，因为我的自动完成列表只有几个选项，但如果有人有一些提示或解决方案，我将不胜感激。

Answer 1

您正在使用 freeSolo，但您没有添加 autoSelect 选项，因此您的代码的问题是当 input 失去焦点时 - 值为还是旧的。这里的原因是你用的是受控组件，而controller是react-hook-form。

这里有两个选项：

添加 autoSelect，因此即使用户失去对输入的关注 - 当前值仍将是自动完成的值。
要求用户点击 enter 以保存他当前拥有的值。（您可以为此使用 clearOnBlur 选项）。

这里是第一个选项的实现：

<Autocomplete
  id="autocomplete"
  freeSolo
  autoSelect
  options={["option1", "option2", "another option"]}
  renderInput={params => (
    <TextField
      {...params}
      label="freeSolo"
      margin="normal"
      variant="outlined"
    />
  )}
/>

和一个工作示例（基于您的代码和框）：https://codesandbox.io/s/autocomplete-freesolo-with-auto-value-on-blur-e2smn?file=/demo.js

在带有 react-hook-form 的 freeSolo 模式下使用 Material UI 自动完成

Use Material UI autocomplete in freeSolo mode with react-hook-form

reactjs

material-ui

react-hook-form