Quasar QSelect popup and input text persistent on click

Question

I am trying to set up a QSelect driven by user input in order to achieve an "autocomplete" behavior. There are a few examples on the official documentation and they make use of the @filter callback.

I have currently two problems:

1. Whenever I click outside of the input field the input text is lost and the popup disappears.
2. If I click on the input the current text remains, but the pop is hidden until I click on it again.

For the latter issue, one workaround is to force the popup to show upon click:

<q-select
  ref="input"
  ...
  @click.native.prevent="onClick"
>
...
onClick(){
  if( this.searchFilter.length > 0){
    this.$refs.input.showPopup()
  }
}

However, the inconvenience is that the popup still shortly disappears for a short while before showing again. I've also tried using @click.native.stop instead of @click.native.prevent to no avail.

As for issue number 1 I haven't even found a workaround yet.

Here is a related issue, though the popup disappearing was a wanted behavior in his case.

I set up a basic Pen to illustrate the issue. Try clicking on the input or outside the input at the same height.

Answer 1

The trick was to use @click.capture.native and then conditionally stop the propagation inside the callback function via event.stopImmediatePropagation() See it working here