[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); } }

hope can help you