CODEWITHSUNDEEP
vue.js
Bogdan Dubyk
Bogdan Dubyk

Reputation: 5540

vue nested event fired but parent one is omited

I'm using this library for autocomplete select, and in my logic, I also want to trigger require validation (from vuelidate library) on the fly. I want to trigger the require validation rule when the user focuses out the input and when the user selects some value from the suggestion list.

And for some reason when I'm selecting a value by the first time from the suggestion list it's triggering focusout event not a select, probably b-z list is out of input focus, but when I'm selecting an item from the list by the second time it's triggering select event not focusout (as it should). NOTE: vue trigger select event only when I select value for the second time, first, third and all next times it's always triggering focusout event.

Question: why it's not triggering select event and how to force triggering it??

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
            },
        ]
    }
}

I open an issue on github https://github.com/KazanExpress/vue-simple-suggest/issues/353 (it has detailed information and small video which showing the issue, you can check browser console), but I'm not sure it's related to the library.

Thanks in advance!

Upvotes: 0

Views: 238

Answers (1)

Jose Fern&#225;ndez
Jose Fern&#225;ndez

Reputation: 139

I saw in the documentation of the library that it allows blur event. Could you try @blur in vue-simple-suggest component instead of @focusout in the input?

Otherwise you can run a controller in the @select="checkCitySelection" to avoid the @focusout event in the input:

checkCitySelection(citySelected) {
  this.$v.city.value.$touch();
  if (this.$v.city.value.$invalid) this.cityError()
  else this.citySelect();
}

Upvotes: 1

Related Questions