2

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.

edwillys
  • 86
  • 1
  • 6
  • Interesting issue. I also came up with some hacky solution: listen for event @popup-show and if it's true and this.searchFilter.length > 0 then call showPopup() – Dvdgld Dec 20 '20 at 20:25
  • Could you provide a codepen for that problem? – Dvdgld Dec 20 '20 at 20:26
  • @DavidGo: Did you mean listening to popup-hide and call showPopup() to force its persistency? I tried it too and the flickering effect is still there. Pen example is added to the post above. – edwillys Dec 21 '20 at 11:55
  • hm, in the codepen example I type "a" and click outside the input and it doesn't hide popup, even If I remove onClick method – Dvdgld Dec 21 '20 at 12:49
  • but if my click is on the level with input it dissappears – Dvdgld Dec 21 '20 at 12:50
  • ah, that's because we don't have content for the whole screen, I fixed that here, now we can try to fix your issue:) https://codepen.io/DavidGolodetsky/pen/OJRjQjm – Dvdgld Dec 21 '20 at 12:53
  • True. I updated on my Pen too. Now it doesn't matter where you click outside of the input, the popup always hides. Latest I check, your pen was missing the callback to onClick: `@click.native.prevent="onClick" ` – edwillys Dec 21 '20 at 14:13
  • hm, it does look to me that you would need to create your own q-input and q-menu component for that. It looks like the type of functionality that should be provided by Quasar, so maybe you can create a feature request. – Dvdgld Dec 21 '20 at 14:22
  • for q-menu you have `persistent` prop. Would be great to have that for select dropdown as well https://quasar.dev/vue-components/menu#Persistent – Dvdgld Dec 21 '20 at 14:22
  • ah, there is another component for that from Quasar: https://quasar.dev/vue-components/button-dropdown It also works with q-menu and does have `persistent` prop. Tell me if it works for you so I could create an answer – Dvdgld Dec 21 '20 at 14:35
  • I'm aware of the `persistent` prop for QMenu. However, this wouldn't be an answer as my post is related to QSelect. If there is really no way, I'll create a feature request on Quasar. – edwillys Dec 21 '20 at 16:20

1 Answers1

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

edwillys
  • 86
  • 1
  • 6