fix autocomplete blur bug

This reverts commit 876cb88ae6.

packages/autocomplete/src/autocomplete.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="el-autocomplete">
+  <div class="el-autocomplete" v-clickoutside="close">
     <el-input
       ref="input"
       :value="value"
@@ -14,7 +14,6 @@
       @compositionend.native="handleComposition"
       @change="handleChange"
       @focus="handleFocus"
-      @blur="handleBlur"
       @keydown.up.native.prevent="highlight(highlightedIndex - 1)"
       @keydown.down.native.prevent="highlight(highlightedIndex + 1)"
       @keydown.enter.native.prevent="handleKeyEnter"
@@ -37,6 +36,7 @@
 </template>
 <script>
   import ElInput from 'element-ui/packages/input';
+  import Clickoutside from 'element-ui/src/utils/clickoutside';
   import ElAutocompleteSuggestions from './autocomplete-suggestions.vue';
   import Emitter from 'element-ui/src/mixins/emitter';
 
@@ -52,6 +52,8 @@
       ElAutocompleteSuggestions
     },
 
+    directives: { Clickoutside },
+
     props: {
       props: {
         type: Object,
@@ -133,11 +135,8 @@
           this.getData(this.value);
         }
       },
-      handleBlur() {
+      close() {
-        // 因为 blur 事件处理优先于 select 事件执行
-        setTimeout(_ => {
         this.isFocus = false;
-        }, 100);
       },
       handleKeyEnter() {
         if (this.suggestionVisible && this.highlightedIndex >= 0 && this.highlightedIndex < this.suggestions.length) {

test/unit/specs/autocomplete.spec.js

@@ -1,4 +1,4 @@
-import { createVue, destroyVM } from '../util';
+import { createVue, triggerClick, destroyVM } from '../util';
 
 describe('Autocomplete', () => {
   let vm;
@@ -59,11 +59,11 @@ describe('Autocomplete', () => {
       expect(suggestions.style.display).to.not.equal('none');
       expect(suggestions.querySelectorAll('.el-autocomplete-suggestion__list li').length).to.be.equal(4);
 
-      inputElm.blur();
+      triggerClick(document);
       setTimeout(_ => {
         expect(suggestions.style.display).to.be.equal('none');
         done();
-      }, 600);
+      }, 500);
     }, 500);
   });
   it('select', done => {