Mui 自动完成在失去焦点时不会触发 onChange

Question

将 Mui

Autocomplete

与

multiple

和

freeSolo

一起使用，按 Return 会导致触发

onChange

事件。但是，按 Tab 键退出“自动完成”小部件则不会，用户输入的文本仍保留在那里，而“自动完成”本身的状态并未更新（仅更新“自动完成”内

TextField

的状态）。

  // Called when return is pressed
  function onAddNewItem(e, items) {
    console.log("Validation code goes here");
    setItems(items);
  }

  // Called on a keystroke for the text currently being typed
  function onInputChange(e, newItem) {
    setInputValue(newItem);
  }

  return (
    <Autocomplete
      multiple
      freeSolo
      disableClearable
      options={[]}
      value={items}
      onChange={onAddNewItem}
      inputValue={inputValue}
      onInputChange={onInputChange}
      renderInput={(params) => (
        <TextField {...params} error={error} placeholder="Type here" />
      )}
    />
  );

参见codesandbox

如何导致

onChange

被触发，或者在失去焦点时设置自动完成状态？使用

onBlur

没有帮助，因为我没有通过更新的自动完成中的“草稿”项目，因此无法设置新的自动完成状态。

Answer 1

您需要在自动完成中设置

autoSelect

<Autocomplete
  ....
  autoSelect={true}
/>