Auto-focus first item of license dropdown during filter

Author: abelsiqueira

src/components/ScreenLicense.vue

@@ -17,6 +17,8 @@
                 bg-color="white"
                 label="license"
                 clearable
+                fill-input
+                hide-selected
                 input-debounce="0"
                 outlined
                 standout
@@ -47,6 +49,7 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
 import { useCff } from '../store/cff'
+import { QSelect } from 'quasar'
 import schema from '../schemas/1.2.0/schema.json'
 import Stepper from 'components/Stepper.vue'
 import StepperActions from 'components/StepperActions.vue'
@@ -67,17 +70,20 @@ export default defineComponent({
             licenses,
             options,
             setLicense,
-            licenseFilterFunction (val: string, update: (a: unknown) => void) {
-                if (val === '') {
-                    update(() => {
-                        options.value = licenses
-                    })
-                    return
-                }
-
+            licenseFilterFunction (val: string, update: (a: unknown, b: unknown) => void) {
                 update(() => {
-                    const needle = val.toLowerCase()
-                    options.value = licenses.filter(v => v.toLowerCase().indexOf(needle) > -1)
+                    if (val === '') {
+                        options.value = licenses
+                    } else {
+                        const needle = val.toLowerCase()
+                        options.value = licenses.filter(v => v.toLowerCase().indexOf(needle) > -1)
+                    }
+                },
+                (ref: QSelect) => {
+                    if (val !== '' && ref.options !== undefined && ref.options.length > 0) {
+                        ref.setOptionIndex(-1)
+                        ref.moveOptionSelection(1, true)
+                    }
                 })
             }
         }