Quasar QSelect 弹出窗口和输入文本持续点击答案

【问题标题】：Quasar QSelect popup and input text persistent on clickQuasar QSelect 弹出窗口和输入文本持续点击
【发布时间】：2020-12-20 17:01:52
【问题描述】：

我正在尝试设置由用户输入驱动的 QSelect 以实现“自动完成”行为。官方文档中有一些示例，它们使用了@filter 回调。

我目前有两个问题：

每当我在输入字段之外单击时，输入文本都会丢失并且弹出窗口也会消失。
如果我单击输入，当前文本仍然存在，但弹出隐藏，直到我再次单击它。

对于后一个问题，一种解决方法是强制在点击时显示弹出窗口：

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

但是，不便之处在于，弹出窗口仍然会很快消失一段时间，然后再次显示。我也尝试过使用@click.native.stop 而不是@click.native.prevent 无济于事。

至于问题 1，我什至还没有找到解决方法。

Here 是一个相关问题，尽管弹出窗口消失在他的案例中是一种通缉行为。

我设置了一个基本的Pen 来说明这个问题。尝试点击输入或输入外部相同高度。

【问题讨论】：

有趣的问题。我还想出了一些 hacky 解决方案：监听事件 @popup-show 如果它是真的并且 this.searchFilter.length > 0 然后调用 showPopup()
你能为这个问题提供一个codepen吗？
@DavidGo：你的意思是听 popup-hide 并调用 showPopup() 来强制它的持久性吗？我也试过了，闪烁的效果还在。钢笔示例已添加到上面的帖子中。
hm，在 codepen 示例中，我键入“a”并在输入外部单击，它不会隐藏弹出窗口，即使我删除了 onClick 方法
但是如果我的点击是在输入的水平上，它就会消失

标签： vue.js quasar-framework quasar

【解决方案1】：

诀窍是使用@click.capture.native，然后通过event.stopImmediatePropagation() 有条件地停止回调函数内部的传播here 看看它是否正常工作

【讨论】：

如果我写了一些东西然后在外面点击 q-select 它会显示一个空白值。