5

フリー ソロ モードでマテリアル UI のオートコンプリートを一種のコンボ入力として使用しようとしています。ユーザーは、オートコンプリートを介して提案されたオプションを選択できる必要があります。オプションが使用できない場合は、入力値を最終的なフォーム値として使用する必要があります。

問題：

ケース 1: オートコンプリートが機能し、選択して送信できるオプションを提案しますが、入力にカスタム値がある場合、送信されません。

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

ケース 2: オートコンプリートとカスタム入力値から選択したオプションが送信されますが、オートコンプリート ドロップダウンには候補が表示されなくなり、入力が選択されている間ずっと開いたままになります。

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

オートコンプリート リストにはいくつかのオプションしかないため、ケース 2 を受け入れることができますが、誰かがヒントや解決策を持っている場合は、本当に感謝しています。

4

1 に答える 1

22

を使用してfreeSoloいますが、オプションを追加していないautoSelectため、コードの問題は、inputフォーカスを失ったときに値がまだ古いものであることです。ここでの理由は、制御されたコンポーネントを使用しているためですが、コントローラーは react-hook-form です。

ここには 2 つのオプションがあります。

  1. を追加するautoSelectと、ユーザーが入力にフォーカスを失った場合でも、現在の値がオートコンプリートの値になります。
  2. 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

于 2020-05-01T20:40:06.827 に答える