before-suggestions slot click events

[ksherman]

When using the before-suggestions slot, it seems that click events are still triggering @selected events?

I'm essentially trying to add an option at the top of the list of suggestions I want to handle a little differently than the actual suggestion options. I've tried @click modifiers stop and prevent and doesn't seem to supercede the other events.

I've looked through the component but couldn't find an obvious way to work around this yet.

• vue-autosuggest version: latest
• node version: 12
• npm (or yarn) version: 6.11

    <vue-autosuggest
      ref="search"
      v-model="query"
      :class="$style.search"
      :suggestions="suggestions"
      :input-props="inputProps"
      :render-suggestion="(suggestion) => suggestion.item"
      :get-suggestion-value="(suggestion) => query = suggestion.item"
      @input="getSuggestions()"
    >
      <template slot="before-suggestions">
        <div
          class="px-3 py-3 normal-case border-b-2 cursor-pointer z-100 hover:bg-gray-100"
          @click.prevent="emitAddGeneric()"
        >
          Add "<strong v-text="query" />" to list
        </div>
      </template>
    </vue-autosuggest>

[darrenjennings]

little quirk, but you have to use @mouseup.stop since that's the event that triggers the select. Ideally the component would know that you are clicking something that is not a suggestion.

[ksherman]

Sorry for the delay, was working on a few other tasks.

This worked just fine for me! Thanks for the quick reply 🎉

[ksherman]

@darrenjennings quick follow up to this, how do I "close" the suggestions after clicking on that before-suggestions element? would it be a custom function for shouldRenderSuggestions?

[ksherman]

Ignore me! Silly me, on clicking that before-suggestion element, just clear out the suggestions! 🤦‍♂