What about @focusout + @click event dependency and event bubbling when one event blocks the ability to call the next?

Question

Vue.js

hang on the input
@focusin='isSuggestedLanguagesShown = false'
under the input a list of suggested languages ​​to choose from

<div v-show='this.isSuggestedLanguagesShown'
             class='row '
        >
            <div v-for='(data,index) in this.suggestedLanguages'
                 :key='index'
                 v-html='formattedCountryLanguageName(data)'
                 @click='updateLanguage(data.nativeName)'
                 class='z-index-1'
            ></div>
        </div>

full code

spoiler

<fieldset class='col-12 col-md-12 form-group  text-pink  py-2  opacity-8  transition-all-3 hover-opacity-1'>
        <input :disabled='this.isSending'
               :value="valueByFieldName('languageNativeName')"
               autocomplete='languageNativeName'
               class='form-control text-center  opacity-8 transition-all-3 hover-opacity-1'
               name='languageNativeName'
               placeholder='language'
               type='text'
               @input='updateLanguageField($event)'
               @focusin='isSuggestedLanguagesShown = true'
               @focusout='focusOutLanguage()'
        />
       
        <div v-show='this.isLanguageChanged &&
                !this.isLanguageSupported &&
                this.isSuggestedLanguagesShown &&
                0 !== this.suggestedLanguages.length'
             class='row suggested-dropdown px-1 '
        >
            <div v-for='(data,index) in this.suggestedLanguages'
                 :key='index'
                 v-html='formattedCountryLanguageName(data)'
                 @click='updateLanguage(data.nativeName)'
                 class='col-12 col-md-12 pr-0 text-center py-1 py-md-1  opacity-5 transition-all-3 hover-opacity-1  cursor-pointer z-index-1'
            ></div>
        </div>
    </fieldset>

on a click on the desired result, the first thing that fires @focusoutis an ascent, re-rendering, and the code will not reach the @click event on the language element. The solution is to set setTimeout in the method @focusout='focusOutLanguage()'so that the @click event has time to work, but this is a hack.

@focusout.stop.once.capture.passive.self
won't work

How would you solve the problem of event popups?

Answer 1

@mousedown.preventAdding a drop-down list means that focusout on the input doesn't happen ahead of time . In the click handler on the list items, add document.activeElement.blur();.