darrenjennings / vue-autosuggest

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

Suggestion: return value in "selected" listener to set input field value #118

Closed sbay closed 5 years ago

sbay commented 5 years ago

I find that on "selected" callback would benefit from returned value that would set input field's value. Right now, input field is set by getSuggestionValue method, but by decoupling from same method into @selected callback would make component more versatile. Case in point, there is custom logic in @selected callback that assigns selected suggestion to an external array for further processing. In this case, it would make sense to clear out selection. Sample code:

methods: {
    onSelectHandler (val) {
      this.selectedSuggestions.push(val.item)
      return null
    }
}

Similar approach is already implemented in renderSuggestion and getSuggestionValue.

Should be a fairly quick and short update. I can help with a PR if that helps.

darrenjennings commented 5 years ago

getSuggestionValue was created because the @selected event is not the only time the method is called. This method is also needed when you are keying through items.

sbay commented 5 years ago

OK, fair enough. I see that @selected handler only gets called when selecting an item, keying through calls getSuggestionValue and renderSuggestion methods. FYI this is context of a single section, which simplifies things and does not take into account selection in distinct sections. Suggestion here is to have a method that gets called when a selection is made (either by Enter, keying through selections, mouse click, etc). This will allow for an important feature such as multiple selections, that will be highly useful (see https://vuetifyjs.com/en/components/autocompletes#scoped-slots with multiple select field). @darrenjennings

darrenjennings commented 5 years ago

@sbay multiple selection can be accomplished via @mouseup.stop on the slot items. This isn't a great solution since it forces a vue-autosuggest user to roll their own multiselect implementation, but it is possible. Also, you can get around it by uses input checkboxes which won't trigger @selected event. Though I prefer the @mouseup.stop event since it allows you to click anything

See the "button" in one of the slots, as well as the checkboxes: https://codesandbox.io/s/x9z1lo20mo