close quasarframework#2140: Fix highlight on QSelect and QAutocomplete (quasarframework#2153)

close quasarframework#2140

Author: pdanpdan

src/components/autocomplete/QAutocomplete.js

@@ -241,9 +241,9 @@ export default {
         style: this.computedWidth
       },
       this.computedResults.map((result, index) => h(QItemWrapper, {
-        key: result.id || JSON.stringify(result),
+        key: result.id || index,
         'class': {
-          active: this.keyboardIndex === index,
+          'q-select-highlight': this.keyboardIndex === index,
           'cursor-pointer': !result.disable,
           'text-faded': result.disable
         },

src/components/autocomplete/autocomplete.ios.styl

@@ -0,0 +1,2 @@
+body.desktop .q-select-highlight
+  background $item-highlight-color !important

src/components/autocomplete/autocomplete.mat.styl

@@ -0,0 +1,2 @@
+body.desktop .q-select-highlight
+  background $item-highlight-color !important

src/components/select/QSelect.vue

@@ -103,12 +103,12 @@
         <template v-if="multiple">
           <q-item-wrapper
             v-for="(opt, index) in visibleOptions"
-            :key="JSON.stringify(opt)"
+            :key="index"
             :cfg="opt"
-            :link="!opt.disable"
             :class="[
               opt.disable ? 'text-faded' : 'cursor-pointer',
-              index === keyboardIndex ? 'q-select-highlight' : ''
+              index === keyboardIndex ? 'q-select-highlight' : '',
+              opt.disable ? '' : 'cursor-pointer'
             ]"
             slot-replace
             @click.capture.native="__toggleMultiple(opt.value, opt.disable)"
@@ -139,12 +139,12 @@
         <template v-else>
           <q-item-wrapper
             v-for="(opt, index) in visibleOptions"
-            :key="JSON.stringify(opt)"
+            :key="index"
             :cfg="opt"
-            :link="!opt.disable"
             :class="[
               opt.disable ? 'text-faded' : 'cursor-pointer',
-              index === keyboardIndex ? 'q-select-highlight' : ''
+              index === keyboardIndex ? 'q-select-highlight' : '',
+              opt.disable ? '' : 'cursor-pointer'
             ]"
             slot-replace
             :active="value === opt.value"

src/components/select/select.ios.styl

@@ -1,2 +1,2 @@
 body.desktop .q-select-highlight
-  background rgba(0, 0, 0, .2) !important
+  background $item-highlight-color !important

src/components/select/select.mat.styl

@@ -1,2 +1,2 @@
 body.desktop .q-select-highlight
-  background rgba(0, 0, 0, .2) !important
+  background $item-highlight-color !important