fix: autocomplete demo on Android 7.1 shows list 2 times quasarframework#320

Author: rstoenescu

dev/components/form/autocomplete.vue

@@ -88,7 +88,7 @@ export default {
     search (terms, done) {
       setTimeout(() => {
         done(Utils.filter(terms, {field: 'value', list: parseCountries()}))
-      }, 1000)
+      }, 500)
     },
     selected (item) {
       Toast.create(`Selected suggestion "${item.label}"`)

src/vue-components/autocomplete/Autocomplete.vue

@@ -7,10 +7,7 @@
       />
     </slot>
     <q-popover ref="popover" :anchor-click="false">
-      <div v-if="searching" class="row justify-center" :style="{minWidth: width, padding: '3px 10px'}">
-        <spinner name="dots" :size="40"></spinner>
-      </div>
-      <div v-else class="list no-border" :class="{'item-delimiter': delimiter}" :style="computedWidth">
+      <div class="list no-border" :class="{'item-delimiter': delimiter}" :style="computedWidth">
         <q-list-item
           v-for="(result, index) in computedResults"
           :item="result"
@@ -87,47 +84,39 @@ export default {
   methods: {
     trigger () {
       this.width = Utils.dom.width(this.inputEl) + 'px'
-      this.$nextTick(() => {
-        const searchId = Utils.uid()
-        this.searchId = searchId
+      const searchId = Utils.uid()
+      this.searchId = searchId
 
-        if (this.model.length < this.minCharacters) {
-          this.searchId = ''
-          this.close()
-          return
-        }
+      if (this.model.length < this.minCharacters) {
+        this.searchId = ''
+        this.close()
+        return
+      }
+
+      if (this.staticData) {
+        this.searchId = ''
+        this.results = Utils.filter(this.model, this.staticData)
+        this.$refs.popover.open()
+        return
+      }
 
-        this.$refs.popover.close()
-        setTimeout(() => {
-          if (this.staticData) {
-            this.searchId = ''
-            this.results = Utils.filter(this.model, this.staticData)
-            this.$refs.popover.open()
+      this.$emit('search', this.model, results => {
+        if (results && this.searchId === searchId) {
+          this.searchId = ''
+          if (this.results === results) {
             return
           }
 
-          this.$refs.popover.open()
-          this.$emit('search', this.model, results => {
-            if (results && this.searchId === searchId) {
-              this.searchId = ''
-
-              if (Array.isArray(results) && results.length > 0) {
-                this.$refs.popover.close()
-                this.$nextTick(() => {
-                  this.results = results
-                  setTimeout(() => {
-                    if (this.$refs && this.$refs.popover) {
-                      this.$refs.popover.open()
-                    }
-                  }, 10)
-                })
-                return
-              }
-
-              this.close()
+          if (Array.isArray(results) && results.length > 0) {
+            this.results = results
+            if (this.$refs && this.$refs.popover) {
+              this.$refs.popover.open()
             }
-          })
-        }, 10)
+            return
+          }
+
+          this.close()
+        }
       })
     },
     close () {