fix filterable dropdown and prepopulating select value

src/components/ui/TacticalDropdown.vue

@@ -3,7 +3,7 @@
     dense
     options-dense
     @update:model-value="value => $emit('update:modelValue', value)"
-    :options="filterable ? filteredOptions : options"
+    :options="filtered ? filteredOptions : options"
     :model-value="modelValue"
     :map-options="mapOptions"
     :emit-value="mapOptions"
@@ -31,8 +31,7 @@
 </template>
 <script>
 // composition imports
-import { toRefs, computed } from "vue";
-import { useDropdownFilter } from "@/composables/quasar";
+import { ref, toRefs, computed } from "vue";
 
 export default {
   name: "tactical-dropdown",
@@ -53,14 +52,33 @@ export default {
     options: !Array,
   },
   setup(props) {
-    const { options } = toRefs(props);
-    const { filterFn, filteredOptions } = useDropdownFilter(options, !props.mapOptions);
+    const filtered = ref(false);
+    const filteredOptions = ref(props.options);
+
+    function filterFn(val, update, abort) {
+      update(() => {
+        if (val === "") {
+          filtered.value = false;
+        } else {
+          filtered.value = true;
+          const needle = val.toLowerCase();
+
+          if (!props.mapOptions)
+            filteredOptions.value = props.options.filter(v => v.toLowerCase().indexOf(needle) > -1);
+          else
+            filteredOptions.value = props.options.filter(v => {
+              return !v.category ? v.label.toLowerCase().indexOf(needle) > -1 : false;
+            });
+        }
+      });
+    }
 
     const filterEvent = computed(() => {
       return props.filterable ? "filter" : null;
     });
 
     return {
+      filtered,
       filteredOptions,
       filterFn,
       filterEvent,

src/composables/quasar.js

@@ -1,30 +0,0 @@
-
-import { ref, unref } from "vue"
-
-// used to filter dropdown options. Set flat to true id options are in ["option1", "option2"]
-export function useDropdownFilter(options, flat = false) {
-  const filteredOptions = ref([])
-
-  function filterFn(val, update, abort) {
-
-    update(() => {
-      if (!val) {
-        filteredOptions.value = unref(options);
-      } else {
-        const needle = val.toLowerCase();
-
-        if (flat)
-          filteredOptions.value = unref(options).filter(v => v.toLowerCase().indexOf(needle) > -1);
-        else
-          filteredOptions.value = unref(options).filter(v => {
-            return !v.category ? v.label.toLowerCase().indexOf(needle) > -1 : false
-          });
-      }
-    });
-  }
-
-  return {
-    filteredOptions,
-    filterFn
-  }
-}

src/composables/scripts.js

@@ -3,11 +3,11 @@ import { fetchScripts } from "@/api/scripts"
 import { formatScriptOptions } from "@/utils/format"
 
 // script dropdown
-export function useScriptDropdown() {
+export function useScriptDropdown(setScript = null) {
   const scriptOptions = ref([])
   const defaultTimeout = ref(30)
   const defaultArgs = ref([])
-  const script = ref(null)
+  const script = ref(setScript)
 
   // specifing flat returns an array of script names versus {value:id, label: hostname}
   async function getScriptOptions(showCommunityScripts = false, flat = false) {
@@ -15,9 +15,9 @@ export function useScriptDropdown() {
   }
 
   // watch scriptPk for changes and update the default timeout and args
-  watch(script, (newValue, oldValue) => {
-    if (newValue) {
-      const tmpScript = scriptOptions.value.find(i => i.value === newValue);
+  watch([script, scriptOptions], (newValue, oldValue) => {
+    if (script.value && scriptOptions.value.length > 0) {
+      const tmpScript = scriptOptions.value.find(i => i.value === script.value);
       defaultTimeout.value = tmpScript.timeout;
       defaultArgs.value = tmpScript.args;
     }
@@ -31,7 +31,7 @@ export function useScriptDropdown() {
     defaultArgs,
 
     //methods
-    getScriptOptions,
+    getScriptOptions
   }
 }