自定义自动补全Popper输入框无法输入，焦点强制锁定至搜索框

我开发的应用中有一个下拉组件，包含搜索输入框和两个用于添加影片的输入框（Label和Year）。当前核心问题是焦点被强制锁定在搜索输入框上，导致无法在Label和Year输入框中输入内容。

已尝试的操作 #

• 检查是否接收到正确数据
• 将Label输入框的defaultValue改为value
• 将原生<input>标签替换为Material UI的Input组件

相关代码 #

<AddOption>
  <input
    type="text"
    placeholder="Label"
    defaultValue={newFilm.label}
    onChange={(e) =>
      setNewFilm((prev) => ({ ...prev, label: e.target.value }))
    }
  />
  <input
    placeholder="Year"
    type="number"
    value={newFilm.year || ""}
    onChange={(e) =>
      setNewFilm((prev) => ({
        ...prev,
        year: Number(e.target.value),
      }))
    }
  />
  <button onClick={handleAddFilm}>Add</button>
</AddOption>

内容的提问来源于stack exchange，提问作者Dragos-Iustin Vlad