How to prevent q-select to clear user value when out of focus?

[cloudm]

My goal is to write a component that looks and works like the google-search bar on google.com. To achieve this, I’m using q-select with use-input prop. Unfortunately the user input gets cleared when q-select is out of focus. How do I prevent this behavior?

[dmoylan]

@cloudm I recently attempted something similar. The issue is basically that the input value in use-input does not have a v-model, at least not one that quasar exposes. Unless we missed something. So the value is lost on blur. I don’t exactly know the answer for how to do what you are attempting.

However, I found that you can achieve a suitable imitation by using a combination of q-input and q-menu.
Code example: https://jsfiddle.net/6myp4hn9/6/
The example is missing some of the finer details like keyboard events for selecting options (pretty straightforward though, you can use the array index of the option for this), or the ability to select multiples (in my app I .split(’ ') the input value and replace the last index with the selection).

I know that using q-select has its advantages, and if there’s a way to do what you’re asking about I’d love to find that out.

[cloudm]

@dmoylan I’ve found the desired behavior in the API https://quasar.dev/vue-components/select#Example--Text-autocomplete. I hope it helps with what you want to achieve, too.

[dmoylan]

@cloudm Thanks for posting your solution - it still isn’t quite preferable in my case because the input value is sharing a binding with the model used for the selection. Ideally the input would have a separate v-model so that you could use-chips and use multiple (sounds like a potential Vue 3 feature?). For the time being I think the input/menu is still a pretty good workaround (I am using it for an @mentions type feature).