select/suggestion-click events not working from the first click only after second

[bogdan-dubyk]

I'm submitting a ...

• bug report
• feature request
• support request

What is the current behavior?

select/suggestion-click not firing on the first click on list element, only after selecting the element second time

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem

here is the element template:

 <vue-simple-suggest
        v-model="city.searchInput"
        :debounce="300"
        min-length="2"
        display-attribute="name"
        value-attribute="id"
        :list="getCity"
        :filter-by-query="true"
        @select="citySelect"
        @suggestion-click="citySelect"
  >
       <input
              type="search"
               class="form-control"
                placeholder="Place of birth"
               @focusout="cityError"
        >
</vue-simple-suggest>

Here is the actual js:

<script>

    import {validationMixin} from 'vuelidate'
    import {required, email} from 'vuelidate/lib/validators'
   export default {
       mixins: [validationMixin],
      validations: {
          city : {
              value: {required}
          }
      },
     data: () => ({
        city: {searchInput: null, value: null, results: [],  errors: []},
     }),
    methods: { 
          cityError() {
              this.$v.city.value.$touch();
              this.city.errors = [];
              if (!this.$v.city.value.$dirty) {
                   return;
              }

               if (!this.$v.city.value.required) {
                     this.city.searchInput = null;
                      this.city.errors.push('Your birth location required')
             }
          },
          citySelect() {
              console.log('citySelect');    <===== I add a console log to track if the method is called, and it's not called when I select data from the list by the first time, only if I click on input one more time and select some item again
             this.city.value = this.city.searchInput;
            this.cityError();
         },
        getCity() {
               // here should be ajax call, but for now just dummy data
                 return  [
                      {"id": "691b237b0322f28988f3ce03e321ff72a12167fd", "name": "Paris", "lat": -33.8599358, "lng": 151.2090295},
                     {"id": "691b237b0322f28988f3ce03e321ff72a12167fs", "name": "New York", "lat": -33.8599358, "lng": 151.2090295},
                  ]
        }
    }
   }
</script>

What is the expected behavior?

It should trigger getCity method after I select some element from the list

How are you importing Vue-simple-suggest?

• ESNext (original code, single-file .vue component, css included) (import VueSimpleSuggest from 'vue-simple-suggest/lib')
• ES6 (import VueSimpleSuggest from 'vue-simple-suggest')
• ES7 and above (import VueSimpleSuggest from 'vue-simple-suggest/dist/es7')
• Bundled version (import VueSimpleSuggest from 'vue-simple-suggest')
• CommonJS (const VueSimpleSuggest = require('vue-simple-suggest'))
• UMD Component (<script type="text/javascript" src="https://unpkg.com/vue-simple-suggest"></script>)

Please tell us about your environment:

• Vue.js Version: 2.6.11
• Vue-simple-suggest version: 1.10.2
• Browser: all
• Language: ES6/7

Here is the small video I recorded to show the issue https://drive.google.com/file/d/1z6WtRK8-BMxe2GyLphD-u7Zf8fUolQlg/view?usp=sharing

[bogdan-dubyk]

Okay, I probably found what causes the issue but not sure how to solve it...

The issue is because the inner input has @focusout="cityError", and looks like when I select a value it's triggering focusout instead of select event, but in such a case why it's working when I select a value for a second time

Small code snippet

 <vue-simple-suggest
        v-model="city.searchInput"
        :debounce="300"
        min-length="2"
        display-attribute="name"
        value-attribute="id"
        :list="getCity"
        :filter-by-query="true"
        @select="citySelect"
  >
       <input
              type="search"
               class="form-control"
                placeholder="Place of birth"
               @focusout="cityError"
        >
</vue-simple-suggest>
....
    methods: { 
          cityError() {
            console.log('cityError');  ,<== when I select some item from suggestions list by the first time this event triggered
          },
          citySelect() {
              console.log('citySelect');    <===== when I'm clicking by input second time (the suggestions list already loaded) and select some (or same) value from suggestions list this event triggered
         },
        getCity() {
               // here should be ajax call, but for now just dummy data
                 return  [
                      {"id": "691b237b0322f28988f3ce03e321ff72a12167fd", "name": "Paris", "lat": -33.8599358, "lng": 151.2090295},
                     {"id": "691b237b0322f28988f3ce03e321ff72a12167fs", "name": "New York", "lat": -33.8599358, "lng": 151.2090295},
                  ]
        }
    }

when I remove @focusout="cityError" , @select triggering in the first select as it should, but I can't handle required validation in fly when the user does not choose any value at all

FYI: when I'm trying to select an item from the suggestions list for the third time, fourth time and so, all the time it triggering focusout