element [bug report] El autocomplete if you use remote search, click again to display the last suggestion first, and then load the content this time

guykilcj  于 2022-10-20  发布在  其他
关注(0)|答案(4)|浏览(138)

Element UI version

2.13.0

OS/Browsers version

window10

Vue version

2.6.11

https://codepen.io/pride_wu/pen/xxbPdZL

Steps to reproduce

el-autocomplete使用远程搜索,第一次点击显示建议内容,不做选择,然后使它失去焦点,之后再次点击时,会先把第一次点击时的历史建议显示,再加载第二次点击时的内容,这样第二次就会闪一下。 官网列子也可以重现

What is Expected?

失去焦点后,期望清空建议内容

What is actually happening?

失去焦点后,建议内容没有清空,只是隐藏了下拉框

0x6upsns

0x6upsns1#

Translation of this issue:

Element UI version

2.13.0

OS/Browsers version

Window10

Vue version

2.6.11

https://codepen.io/pride_wu/pen/xxbPdZL

Steps to reproduce

El autocomplete uses remote search to display the suggested content at the first click without making a selection, and then makes it lose focus. When clicking again, it will first display the historical suggestions at the first click, and then load the content at the second click, so that the second time will flash. Official website Liezi can also be reproduced

What is Expected?

After losing focus, it is expected to clear the suggestions

What is actually happening?

After losing focus, the suggestion content is not empty, but the drop-down box is hidden

guicsvcw

guicsvcw3#

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

zqry0prt

zqry0prt4#

不知道此方法是否有其他影响:

  1. 组件上增加 refhandleBlur 事件
<el-autocomplete ref="abc"
  v-model="state"
  :fetch-suggestions="querySearchAsync"
  placeholder="请输入内容"
  @select="handleSelect"
  @blur= "handleBlur"
></el-autocomplete>
  1. 然后在 blur 事件中增加调用来清空内部的 suggestions 变量:
handleBlur(){
  this.$refs.abc.suggestions = [];
  this.$refs.abc.highlightedIndex = -1;
}

相关问题