darrenjennings / vue-autosuggest

🔍 Vue autosuggest component.
https://darrenjennings.github.io/vue-autosuggest
MIT License
621 stars 91 forks source link

Click (or enter) on a link in the results does not open it #134

Closed ElSiham closed 5 years ago

ElSiham commented 5 years ago
        <vue-autosuggest
          :suggestions="indicesToSuggestions(indices)"
          :input-props="{
            placeholder: $t('search.search')
          }"
          @input="refine($event)"
       >
          <template slot-scope="{ suggestion }">
            <a :href="suggestion.item.slug">
              <span>{{ suggestion.item.name }}</span>
            </a>
          </template>
        </vue-autosuggest>

I'm using vue-autosuggest with algolia's vue-instantsearch.

When I click on an item in my results it doesn't open the link as I was expecting.

I don't want to use the @selected method (and location.href) since it could prevent the user from using CMD+click to open it in another tab for example.

I need a "natural" click on my link. How can I make it work?

darrenjennings commented 5 years ago

Check out this sample code:

https://codesandbox.io/s/vueautosuggest-issue-134-yjhgq

The code demonstrating how you might do this is:

<a :href="suggestion.item.url" @mouseup.stop>
view photo
</a>

Let me know if this helps. This should give you native click handling, since mouseup.stop will prevent vue-autosuggest from firing @selected event, but the native browser click handler will continue and allow for clicking the link, or cmd + clicking it to open in new tab.

ElSiham commented 5 years ago

Thank you so much, it worked ! I didn't find the equivalent for the keypress but that will do.

Thanks again!