AutoComplete中嵌套Input时出现两个清空按钮

[SuniRein]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

4.2.6

Environment

Chrome 138, vue 3.5.17

Reproduction link

none

Steps to reproduce

<template>
  <a-auto-complete>
    <a-input allow-clear />
  </a-auto-complete>
</template>

<script></script>

What is expected?

正常的带有一个 clear icon 的 input。

What is actually happening?

出现了两个 clear icons，其中一个是 Chrome 原生的 clear icon。

---

该问题只能在 Chrome 上复现，在 Firefox 和 CodePen 均不能复现。

使用下面的 css 可以解决这个问题：

input[type='search']::-webkit-search-cancel-button {
  display: none;
}

[AiFu-o]

AutoComplete本来就是一个输入框 为什么还要在嵌套一个输入框呢

[AiFu-o]

如果你需要清除按钮 这样写就好了<a-auto-complete
v-model:value="value"
:options="options"
style="width: 200px"
placeholder="Clearable"
:allow-clear="true"
@select="onSelect"
@search="onSearch"
/>

[SuniRein]

我需要给输入框添加 addon-before 等属性，AutoComplete 没有。看文档也允许将 Input 作为 slot 传入，我就这样做了。

此外，我还发现，如果我自定义了 clearIcon Slot，也得提供 Input slot 来设置属性。如果直接在 AutoComplete 上设置 allowClear 等属性，会有警告：

<AutoComplete allow-clear :placeholder="t('search')">
  <template #clearIcon>
    <CloseCircleFilled @click.capture="emit('update:value', '')" />
  </template>
</AutoComplete>

Customize getInputElement should customize clear and placeholder logic instead of configuring allowClear and placeholder

[AiFu-o]

给个完整 demo

[SuniRein]

vite-project.zip

在本地运行 pnpm dev 后在 Chrome 打开网页，在输入框中输入任意文本，然后将鼠标悬浮在上面后，就能看到两个关闭按钮。

这个问题只能在 Chrome 上复现，无法在 Vue Playground 中复现，所以我无法提供一个 demo 的链接。

[AiFu-o]

收到我看看

[AiFu-o]

应该是因为 input 使用了search 类型 但是 Input 组件并没有清除掉这个浏览器默认样式 Input 组件也有一样的问题 我提个 pr 看看能不能通过