How to prevent Vue Select from highlighting the first option?

Question

I'm using Vue Select as a typeahead component. It does an AJAX fetch to the server.

By default, it highlights the first option that comes back from the server:

Instead, I would like it to work just like the Google typeahead control in my browser. The first option is not highlighted. Instead, you have to hit the down arrow once to highlight it.

The reason is that I want the user to be able to type a search, and hit ENTER to get a full search result (for "stan" in the example above, OR hit the down arrow one or more times, and hit ENTER, and do a search for the selected option.

How do I get Vue Select to not highlight that first option?

(It appears to have something to do with the typeAheadPointer in the data() for the vue-select, but that's all I've been able to figure out.)

Answer 1

I don't see an option to disable the highlight, but you could style it to match the background and text color of the surrounding items, which effectively hides the highlight. For example, if the other items are black on white:

.vs__dropdown-option--highlight {
  background-color: white;
  color: black;
}

demo

However, this would have a side effect of disabling the highlight altogether, which isn't user friendly when navigating with the keyboard.

Answer 2

For future visitors, Jeff Sagal says you can't do it in the current release, but you will be able to do it in the next major release:

https://github.com/sagalbot/vue-select/issues/1312