no longer error on init then search then tab off without selecting

ayanova/src/components/pick-list.vue

@@ -10,7 +10,7 @@
       item-value="id"
       item-disabled="!active"
       :error-messages="errors"
-      :loading="searchUnderway"
+      :loading="fetching"
       :placeholder="lt('Search')"
       :search-input.sync="searchEntry"
       :multiple="multiple"
@@ -21,7 +21,7 @@
       :prepend-icon="errorIcon"
       @click:prepend="handleErrorClick"
       @mousedown="dropdown"
-      auto-select-first
+      cache-items
     >
       <template v-slot:prepend-item v-if="hasError()">
         <div class="pl-2">
@@ -66,6 +66,8 @@ DROP DOWN
 PRE-FILL
   NO prefill, fills only on user action or with defaults to save bandwidth.  User must drop down to initiate action or type search text
 
+
+todo: search entry, should preserve preset value until it's changed or maybe keep until the form is reloaded so can be inserted back again in search results
 todo: set actual seleted ID value from our local selected whole object so outer form just gets id
 todo: server sends whole on drop down of empty combo?
 todo: needs to fill in the selected value when the form opens regardless of what any other setting is, 
@@ -110,7 +112,8 @@ export default {
       searchResults: [],
       errors: [],
       searchEntry: null,
-      searchUnderway: false,
+      lastSelection: null,
+      fetching: false,
       isTagFilter: false,
       errorIcon: null,
       initialized: false
@@ -139,8 +142,7 @@ export default {
     searchEntry(val, oldVal) {
       var vm = this;
       //clear any local errors
-      vm.errors = [];
-
+      vm.clearErrors();
       //if the search entry is in the results list then it's a drop down selection not a typed search so bail
       for (var i = 0; i < vm.searchResults.length; i++) {
         if (vm.searchResults[i].name == val) {
@@ -148,7 +150,13 @@ export default {
         }
       }
 
-      if (!val || vm.searchUnderway || !vm.initialized) {
+      console.log(
+        "watch:searchentry cleared check to see if it's a selected list item, doing search for ",
+        val
+      );
+      console.log("search results:", vm.searchResults);
+
+      if (!val || vm.fetching || !vm.initialized) {
         if (!vm.initialized) {
           vm.$nextTick(() => {
             vm.initialized = true;
@@ -158,7 +166,6 @@ export default {
       }
       this.doSearch();
     },
-
     errors(val) {
       if (this.hasError()) {
         this.errorIcon = "fa-question-circle";
@@ -174,6 +181,9 @@ export default {
     hasError: function() {
       return this.errors.length > 0;
     },
+    clearErrors: function() {
+      this.errors = [];
+    },
     handleErrorClick: function() {
       //open help nav for picklist
       window.$gz.eventBus.$emit("menu-click", {
@@ -182,6 +192,7 @@ export default {
       });
     },
     selectionMade(e) {
+      this.clearErrors();
       if (e == undefined) {
         //this will happen when clear clicked
         return;
@@ -189,9 +200,49 @@ export default {
       if (e.id != null) {
         this.$emit("input", e.id);
       }
+      this.lastSelection = e;
+    },
+    replaceLastSelection() {
+      console.log("replace last selection top");
+      var vm = this;
+      //check if searchREsults has last selection, if not then add it back in again
+      if (vm.lastSelection == null) {
+        //it might be initializing
+
+        for (var i = 0; i < vm.searchResults.length; i++) {
+          if (vm.searchResults[i].id == vm.value) {
+            console.log(
+              "rpl last selection null but found in list so setting last selection"
+            );
+            vm.lastSelection = vm.searchResults[i];
+            return;
+          }
+        }
+
+        console.log("RPL bailing as last selection is null and not in list");
+        return;
+      }
+
+      for (var i = 0; i < vm.searchResults.length; i++) {
+        if (vm.searchResults[i].id == vm.lastSelection.id) {
+          console.log("replacelastselection bailing, it's in list already");
+          return;
+        }
+      }
+
+      vm.searchResults.push(vm.lastSelection);
+      console.log(
+        "replacelastselection bottom, search results now:",
+        vm.searchResults
+      );
     },
     dropdown(e) {
-      //console.log("DROPDOWN FIRED", e);
+      var vm = this;
+      //check if we have only the initial loaded item and no selection item
+      if (vm.searchResults.length < 3) {
+        //get the default list
+        vm.getList();
+      }
     },
     customFilter(item, queryText, itemText) {
       //NOTE: I wanted this to work with tags but all it does is highlight all of each row if tag query is present
@@ -218,6 +269,10 @@ export default {
     },
     getList: function(urlParams) {
       var vm = this;
+      if (vm.fetching) {
+        return;
+      }
+      vm.fetching = true;
       // console.log("getlist: calling api.get.picklist for type ", vm.ayaType);
       //default params for when called on init
       if (!urlParams) {
@@ -229,18 +284,17 @@ export default {
       window.$gz.api
         .get("PickList/List" + urlParams)
         .then(res => {
+          vm.fetching = false;
           if (res.error) {
             throw res.error;
           }
-
           vm.searchResults = res.data;
-
           window.$gz.form.addNoSelectionItem(vm.searchResults);
-
-          vm.searchUnderway = false;
+          vm.replaceLastSelection();
         })
         .catch(err => {
           window.$gz.errorHandler.handleFormError(err);
+          vm.fetching = false;
         });
     },
     doSearch: _.debounce(function() {
@@ -314,7 +368,7 @@ export default {
       }
 
       //build url
-      vm.searchUnderway = true;
+      //vm.fetching = true;
 
       var urlParams = "?ayaType=" + vm.ayaType;
       if (!emptyQuery) {

ayanova/src/views/home-dashboard.vue

@@ -7,12 +7,12 @@
     >
     </gz-pick-list>
     <v-divider></v-divider>
-    <gz-pick-list
+    <!-- <gz-pick-list
       v-model="selectedUser"
       :ayaType="ayaType().User"
       :label="lt('User')"
     >
-    </gz-pick-list>
+    </gz-pick-list> -->
     <v-divider></v-divider>
     <div>FORM Selected Widget: {{ selectedWidget }}</div>
     <div>FORM Selected User: {{ selectedUser }}</div>