[Bug Report] el-autocomplete emits `blur` when selecting from the dropdown

[silvioricardoc]

Element UI version

2.12.0

OS/Browsers version

Ubuntu 18.04.5 / Google Chrome 85.0.4183.83

Vue version

2.6.10

Reproduction Link

https://jsfiddle.net/b4wz7fqn/5/

Steps to reproduce

Click the <el-autocomplete>. Select one of the suggestions.

What is Expected?

I expected the callback for @select to be called. And maybe @blur afterwards... But only AFTER @select, otherwise there is no way to know whether the user is clicking out or not.

What is actually happening?

The callback for @blur is called, which means that I cannot know if the user is clicking out or just selecting something from the dropdown.

[xuejiangjun]

same problem, who resolved?

[canhai]

Adding setTimeout to focus can alleviate this problem，But I also want to know a better solution

[12138mICHAEL1111]

Same problem, in addition, the blur function is called before the value is assigned, so if the el-autocomplete is in form to be validated and the validation rule is set to blur, the validation will be triggered

[takkiraz]

Same Bug in el-select #10810

[ginkosen]

same issues

[ginkosen]

Element UI version

2.12.0

OS/Browsers version

Ubuntu 18.04.5 / Google Chrome 85.0.4183.83

Vue version

2.6.10

Reproduction Link

https://jsfiddle.net/b4wz7fqn/5/

Steps to reproduce

Click the <el-autocomplete>. Select one of the suggestions.

What is Expected?

I expected the callback for @select to be called. And maybe @blur afterwards... But only AFTER @select, otherwise there is no way to know whether the user is clicking out or not.

What is actually happening?

The callback for @blur is called, which means that I cannot know if the user is clicking out or just selecting something from the dropdown.

add setTimeout can't alleviate this problem

I found a way to circumvent the blur issue, But it’s not very elegant.

1. remove @blur
2. add this code when mounted

<template>
<el-autocomplete
            ref="input"
            v-model="editValue"
            :debounce="600"
            select-when-unmatched
            @select="fireConfirmEdit('select')"/>
</template>
<script>
export default {
data() {
        return {
            editValue: null
        };
},
mounted(){
      setTimeout(()=>{
          this.$refs.input.close = (e) => {
              this.$refs.input.activated = false;
              this.fireConfirmEdit('close');
           };
      })
}

methods:{
    fireConfirmEdit(type){
          console.log(type,this.editValue);
    }
}
</script>

hope can help you