数据列表显示远离输入

如何解决数据列表显示远离输入

我正在使用数据列表和输入执行简单的自动完成。 问题在于数据列表显示的区域距离输入区域较远。 我正在将Tailwind与React一起用于该项目。

<div>
      <input
        type="text"
        name="search"
        placeholder="Search for products,brands"
        className="w-full p-4 text-sm rounded-lg bg-transparent border-solid border-2 border-black bg-white"
        onChange={(e) => setSearchTerm(e.target.value)}
        list="categories"
      />
      <datalist id="categories">
        {categories.map((category) => (
          <option value={category.name} />
        ))}
      </datalist>
    </div>

解决方法

更新，我在登录Firefox后发现它是Chrome中的错误。

这是解决问题的方法 fixing datalist problem with Chrome