Updating code for new version

[mng78]

I don’t know if the issues are from the new version of vue-instantsearch or vue-autosuggest but I am having difficulties updating my code.

Here is the old version: https://codesandbox.io/s/48pj5z4vx4 with vue-instantsearch version 1.7.0 and vue-autosuggest version 1.8.1, which was working except I couldn’t get the “No results” message to show up.

Here is the new version: https://codesandbox.io/s/88549z7p19 using vue-instantsearch version 2.0.0 and vue-autosuggest version beta. The “No results” message is now showing but other features that were implemented in the old way aren’t working correctly anymore or I don’t know how/where to insert the code. Also, in the input the selected element is showing has [object Object], don’t know why.

The features were:

• when clicked in input, don’t show results until something is entered in input;
• the first suggestion gets highlighted by adding a class to it (don’t know where to add the code for this one in new version);
• if you press enter, Esc or click away from the input/dropdown without nothing selected, the input gets populated with the first suggestion.

Furthermore, could the vue-autosuggest input be type=search instead of text to be able to clear the input? If not, then how can we implement the ais-clear-refinements component of vue-instantseach? I tried but the button keeps being disabling. Is there another way in the beta version to clear the input?

Note: There is a weird issue that now occurs in both versions that wasn’t there before but it could be related to cache. When clicking in the input, another dropdown shows with text of previous queries. Don’t know why but it isn’t always there so don’t know if it’s really an issue.

[darrenjennings]

1. It looks like you were referencing "query" but not using v-model feature or defining the data attribute query.
2. in second example you were not using getSuggestionValue prop, but in first one you were.
3. "clearing" the input/results should just need to set "query" to empty. It looks like the caching you are seeing is because you might clear the input, but the ais "refinements" are still there so vue-autosuggest just sees data and displays it, it doesn't know how you got it.
4. The way you are doing first suggestion highlighting in that first codesandbox is a bit hacky. Instead of relying on the class names, I would recommend doing something like this: [How to] Programmatically select the first suggestion on tab or blur from input #94 (comment)

https://codesandbox.io/s/z391yl42pm

It does look like the component doesn't allow you adjust to type=search. It should be allowed to override type=text to be search so I'll get that into the beta. I will put that into the roadmap.