Version 0.2.7

src/views/test/test.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="q-pa-md">
+    <div class="q-gutter-md">
+      <q-select
+        filled
+        v-model="model"
+        clearable
+        use-input
+        hide-selected
+        fill-input
+        input-debounce="0"
+        label="Focus after filtering"
+        :options="options"
+        @filter="filterFn"
+        @filter-abort="abortFilterFn"
+        style="width: 250px"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              No results
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+
+      <q-select
+        filled
+        v-model="model"
+        clearable
+        use-input
+        hide-selected
+        fill-input
+        input-debounce="0"
+        label="Autoselect after filtering"
+        :options="options"
+        @filter="filterFnAutoselect"
+        @filter-abort="abortFilterFn"
+        style="width: 250px"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              No results
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+const stringOptions = [
+  'Google', 'Facebook', 'Twitter', 'Apple', 'Oracle'
+].reduce((acc, opt) => {
+  for (let i = 1; i <= 5; i++) {
+    acc.push(opt + ' ' + i)
+  }
+  return acc
+}, [])
+
+export default {
+  setup () {
+    const options = ref(stringOptions)
+
+    return {
+      model: ref(null),
+      options,
+
+      filterFn (val, update, abort) {
+        // call abort() at any time if you can't retrieve data somehow
+
+        setTimeout(() => {
+          update(
+            () => {
+              if (val === '') {
+                options.value = stringOptions
+              }
+              else {
+                const needle = val.toLowerCase()
+                options.value = stringOptions.filter(v => v.toLowerCase().indexOf(needle) > -1)
+              }
+            },
+
+            // "ref" is the Vue reference to the QSelect
+            ref => {
+              if (val !== '' && ref.options.length > 0) {
+                ref.setOptionIndex(-1) // reset optionIndex in case there is something selected
+                ref.moveOptionSelection(1, true) // focus the first selectable option and do not update the input-value
+              }
+            }
+          )
+        }, 300)
+      },
+
+      filterFnAutoselect (val, update, abort) {
+        // call abort() at any time if you can't retrieve data somehow
+
+        setTimeout(() => {
+          update(
+            () => {
+              if (val === '') {
+                options.value = stringOptions
+              }
+              else {
+                const needle = val.toLowerCase()
+                options.value = stringOptions.filter(v => v.toLowerCase().indexOf(needle) > -1)
+              }
+            },
+
+            // "ref" is the Vue reference to the QSelect
+            ref => {
+              if (val !== '' && ref.options.length > 0 && ref.getOptionIndex() === -1) {
+                ref.moveOptionSelection(1, true) // focus the first selectable option and do not update the input-value
+                ref.toggleOption(ref.options[ ref.optionIndex ], true) // toggle the focused option
+              }
+            }
+          )
+        }, 300)
+      },
+
+      abortFilterFn () {
+        // console.log('delayed filter aborted')
+      }
+    }
+  }
+}
+</script>

src/views/user/editprofile/editprofile.vue

@@ -157,6 +157,7 @@
           :id="myuser._id"
           :rec="myuser"
           field="profile.born_city_id"
+          :sameclassasfielddb="true"
           :canEdit="true"
           :canModify="true">
         </CMyFieldRec>

src/views/user/myprofile/myprofile.vue

@@ -20,7 +20,6 @@
           {{ myuser.username }}
         </div>
 
-        ID: {{myuser.profile.born_city_id}}
         <div class="col-12 text-h7">
           <span v-if="myuser.profile && myuser.profile.born_city_id">
               <CMyFieldRec

src/views/user/test/test.vue

@@ -1,14 +0,0 @@
-<template>
-  <div class="q-gutter-sm q-pa-xs q-pb-md">
-
-
-
-  </div>
-</template>
-
-<script lang="ts" src="./test.ts">
-</script>
-
-<style lang="scss" scoped>
-@import './test.scss';
-</style>