Closed sbay closed 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.
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
@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
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:Similar approach is already implemented in
renderSuggestion
andgetSuggestionValue
.Should be a fairly quick and short update. I can help with a PR if that helps.