fix #5150

examples/routers/auto-complete.vue

@@ -1,40 +1,41 @@
 <template>
   <div style="margin: 100px;width: 200px;">
-        <AutoComplete placement="top" transfer v-model="value" icon="ios-search" :data="data" @on-search="handleSearch" @on-change="hc" :filter-method="fm">
-            <!--<Option v-for="item in data" :value="item" :label="item" :key="item">-->
-                <!--<span style="color: red">{{ item }}</span>-->
-            <!--</Option>-->
-        </AutoComplete>
+    <auto-complete v-model="value" :data="data" :disabled="disabled"></auto-complete>
   </div>
 </template>
 <script>
-
-    export default {
-        props: {
-
-        },
-        data () {
+export default {
+  data() {
     return {
-                value: '',
-                data: [],
-//                data: ['Burns Bay Road', 'Downing Street', 'Wall Street']
+      value: "",
+      disabled: false,
+      data: []
     };
   },
-        computed: {},
-        methods: {
-            handleSearch (value) {
-                this.data = !value ? [] : [
-                    value + '@qq.com',
-                    value + '@sina.com',
-                    value + '@163.com'
-                ]
-            },
-            hc (v) {
-//                console.log(v)
-            },
-            fm (value, item) {
-                return item.toUpperCase().indexOf(value.toUpperCase()) !== -1;
+  methods: {},
+  created() {
+    setTimeout(() => {
+      this.value = "1.0.0.5";
+      this.data = [
+        "12412515",
+        "123444",
+        "12355",
+        "12345",
+        "12312",
+        "1234",
+        "123",
+        "111",
+        "5.2.3.4",
+        "1.2.3.4",
+        "1.2.3.4.5",
+        "1.2.3.4.5.6",
+        "1.2.3.4.5.6.7",
+        "1.0.0.8",
+        "1.0.0.5",
+        "whb-03"
+      ];
+      //   this.disabled = true;
+    }, 1000);
   }
-        }
-    };
+};
 </script>

src/components/select/select.vue

@@ -635,7 +635,18 @@
                 }, ANIMATION_TIMEOUT);
             },
             onQueryChange(query) {
-                if (query.length > 0 && query !== this.query) this.visible = true;
+                if (query.length > 0 && query !== this.query) {
+                  // in 'AutoComplete', when set an initial value asynchronously,
+                  // the 'dropdown list' should be stay hidden.
+                  // [issue #5150]
+                    let isInputFocused =
+                    document.hasFocus &&
+                    document.hasFocus() &&
+                    document.activeElement === this.$el.querySelector('input');
+
+                    this.visible = isInputFocused;
+                }
+
                 this.query = query;
                 this.unchangedQuery = this.visible;
                 this.filterQueryChange = true;