Custom event when enter is pressed without a selection

[antoinematyja]

I'm submitting a ...

• bug report
• feature request
• support request

What is the current behavior?

The control select (binded to Enter by default) allows this behaviour:

If the list is shown - chooses the highlighted element, if the list is hidden - refills the suggestions based on current input text. Defined by select property.

What is the expected behavior?

It would be nice to have a behaviour :

• if the list is shown, choose the highlighted element
• otherwise trigger an event "it was submitted without a suggestion selected"

What is the motivation / use case for changing the behavior?

I have a geolocation input working pretty much like the one on Google Maps.

When the user types a city, it provides suggestions from a third-party API. The user can select a suggestion, or just hit enter to perform a text search.

This component is perfect to display suggestions/select a suggestion, however if the user hits enter without selecting a suggestion, it will just hide the suggestions with no possibility to catch the event. If the user hits enter again, it will show again the list and refill it.

From what I saw, it happens here:
https://github.com/KazanExpress/vue-simple-suggest/blob/master/lib/vue-simple-suggest.vue#L339

If the user hasn't selected a suggestion, this.hovered has no value so it won't trigger the select event.

Since the user doesn't really select a suggestion, maybe this should trigger another event name. Not sure what the best solution is. Maybe it should be a different control ?

Otherwise this component is awesome, many thanks ! 😃

[Raiondesu]

Hello, @antoinematyja. :)

First of all, thank you for being so precise with your request! We really appreciate that.

It is possible to simply allow selecting null in the place you mentioned (by removing this.hovered from the if statement). However, this could break backward-compatibility for some use-cases...

As a temprorary solution, I suggest you do the following:

1. Listen for the hide-list event.
2. Inside the hide-list event handler check if selected property is null.
3. If it's null - wait for the blur event.
4. If the blur event does not happen immediately - it means that the enter key was perssed, and you can do what you wanted to do on this "it was submitted without a suggestion selected" event.

This is a VERY hacky solution, but at least it doesn't require you to wait for our next release. 😄

[Raiondesu]

@antoinematyja, we also implemented a simple Google's search page clone using vue-simple-suggest:
http://v-oogle.com
https://github.com/VeryWow/v-oogle

Here, we used a form submit event to catch this, because form is submitted on enter anyway. This is a much less hacky solution to your problem.
Note - you should disable prevent-submit prop.

[Raiondesu]

@antoinematyja, would allowing select to optionally accept null solve the problem?

[Raiondesu]

This also connects to #93 in an oddly specific way...

[antoinematyja]

Well from a purely logical point of view, if the user hits the enter key without having selected a suggestion, he doesn't really select a suggestion. He submits his input. That's why I think it should be handled with a separate event.

However I'm seeing this from my geolocation use case, autocompletion can have many use cases and components like this need recoil 😄

[Raiondesu]

About separate events - see my response in #93, please.

[Raiondesu]

Also, from a purely logical point of view, if the user hits the enter key without having selected a suggestion, they select nothing.

So it all depends on perspective. 🙂

[antoinematyja]

Does "selecting nothing" requires a select event ? 😛

[Raiondesu]

Not always, but there are cases, when this would be useful.

I think of regulating this behaviour in the next version using a prop.