ElementUi el-autocomplete 使用clearable属性,点击清除重新输入提示不显示

Question

如题，
点击清除按钮后，重新输入querySearchAsync有执行,也有返回值，但提示不显示。光标移到别处点击再回来有时又正常。

文档中，clearable 是input的属性， Autocomplete没有，clear事件是否影响cb()方法执行？（没找到cb()方法的文档以及源码）

不知道是什么原因导致，代码如下：

<el-autocomplete
    v-model="state"
    :fetch-suggestions="querySearchAsync"
    value-key="name"
    debounce=10
    placeholder="请输入"
    @select="handleSelect"
    :trigger-on-focus="false"
    :clearable="true"
>
</el-autocomplete>



methods: {
    querySearchAsync(queryString, cb) {
       var results = [];
        if(queryString){
          ...
          var _that = this;
          this.$http.post(url, req).then(res => {
            if(res.errcode == 0){
              results = res.data.sellers;
              console.log(results);//当提示不显示时，此处有值
              clearTimeout(this.timeout);
              this.timeout = setTimeout(() => {
                console.log(results);//当提示不显示时，此处有值
                cb(results);    //这个方法在哪？不提示时，执行失败？
              }, 500);

            }
          }).catch(err => {
           ....
          })
        }else{
          ....
        }
      },
},
watch: {
    state (val) {
      if(!val){
        ...
      }
    }
  },

Answer 1

通过反复测试对比发现，点击清除重新输入时input没有失去焦点，这个问题会导致再次输入时没有聚焦，所以出现不显示的问题。通过查看源码发现点击输入时候会执行以下方法，主要原因是把 this.activated的值设置为false了，然后回调成功的时候没有设置 this.activated = true,所以就导致了不显示的问题。源码如下：

handleClear() {
        this.activated = false;
        this.$emit('clear');
      }

临时的解决办法是设置一个ref='elautocomplete'，然后执行cb()方法的时候再执行this.$refs.elautocomplete.handleFocus()方法，解决的核心思路就是想办法把this.activated的值设置为true,如以下代码：

 <el-autocomplete
    v-model="state"
    :fetch-suggestions="querySearchAsync"
    value-key="name"
    debounce=10
    placeholder="请输入"
    @select="handleSelect"
    :trigger-on-focus="false"
    :clearable="true"
    ref="elautocomplete"
>
</el-autocomplete>
methods: {
    querySearchAsync(queryString, cb) {
       var results = [];
        if(queryString){
          ...
          var _that = this;
          this.$http.post(url, req).then(res => {
            if(res.errcode == 0){
              results = res.data.sellers;
                cb(results);
                this.$refs.elautocomplete.handleFocus()
            }
          }).catch(err => {
           ....
          })
        }else{
          ....
        }
      },
},

Answer 2

亲测有效！！！

 <el-autocomplete
                       :fetch-suggestions="queryRoomName"
                       clearable
                       @clear="setBlur()"
                       placeholder="机房名称"></el-autocomplete>

  setBlur() {
      // 在点击由 clearable 属性生成的清空按钮时，主动触发失去焦点，解决‘fetch-suggestions’输入建议不提示的bug
      document.activeElement.blur()
    }