InstantSearch 无法删除重置查询的蓝叉

问题描述

我正在使用 algolia 的 InstantSearch 创建一个输入字段，但是我在调​​试这个交叉的来源时遇到了问题。当输入字段被聚焦或悬停时，它会出现，蓝色十字出现，看起来它清除了查询。 （我已经有一个用于重置的按钮）。当悬停/聚焦时，检查元素不会显示任何“弹出”，我想知道它是如何到达那里的

有什么我跳过的吗？或在 css 中添加额外内容？在实施之前，我可能已经为此使用了模板

我的 html：

novel_books

我的CSS：

  <div className="items-center h-full">
        <InstantSearch
          indexName={variables.ALGOLIA_INDEX}
          searchClient={algolia}
        >
          <div className="h-full flex flex-col items-center justify-center">
            <SearchBox
              translations={{
                placeholder: '',resetTitle: 'Tøm søkefeltet',}}
              reset={
                <SearchCloseIcon className=" h-5 md:h-10 transform duration-500 hover:scale-110 cursor-pointer" />
              }
              autoFocus={true}
            />
            <Results />
          </div>
        </InstantSearch>
      </div>

解决方法

输入上的 type="search" 似乎是这里的问题。（SearchBox 标签已经自动给了它类型）

将其添加到 css:

.ais-SearchBox-input[type="search"]::-webkit-search-cancel-button {
  display: none;
}