Quasar QSelect popup y texto de entrada persistente en clic

Estoy tratando de configurar un QSelect impulsado por la entrada del usuario para lograr un comportamiento "autocompleto". Hay algunos ejemplos en la documentación oficial y hacen uso del callback @filter.

Actualmente tengo dos problemas:

  1. Siempre Hago clic fuera del campo de entrada el texto de entrada se pierde y el popup desaparece.
  2. Si hago clic en la entrada queda el texto actual, pero el pop está oculto hasta que haga clic en él otra vez.

Para este último número, una ronda de trabajo es forzar el popup a mostrar con clic:


...
onClick(){
  if( this.searchFilter.length > 0){
    this.$refs.input.showPopup()
  }
}

Sin embargo, la inconveniencia es que el popup todavía desaparece por poco tiempo antes de mostrar de nuevo. También he intentado usar @click.native.stop en lugar de @click.native.prevent para nada.

En cuanto al número 1 ni siquiera he encontrado una solución.

Aquí. es un problema relacionado, aunque el popup que desapareció fue un comportamiento buscado en su caso.

He establecido un básico Pen para ilustrar la cuestión. Intente hacer clic en la entrada o fuera de la entrada a la misma altura.

Pregunta hecha hace 3 años, 4 meses, 25 días - Por devdynamox

3 Respuestas:

  • El truco era usar @click.capture.native y luego detiene condicionalmente la propagación dentro de la función de callback a través event.stopImmediatePropagation() Ve a trabajar Aquí.

    Respondida el Dec 20, 2020 a las 17:11 - por javagiant

    Votos positivos: 0 | Votos negativos: 0

  • El problema que estás experimentando se debe a que el comportamiento predeterminado del QSelect es cerrar el popup cuando se hace clic fuera de él. Para abordar los dos problemas que mencionaste, puedes seguir los siguientes pasos:

    • Para mantener el texto de entrada visible incluso cuando se hace clic fuera del campo, puedes utilizar un truco CSS para mantener abierto el popup. Agrega la siguiente regla CSS en tu hoja de estilos:
    css
/ Mantener abierto el popup del QSelect /
.q-select__container {
  display: block !important;
}

    Esto ayudará a mantener abierto el popup aunque hagas clic fuera del campo de entrada.

    • Para mostrar el popup inmediatamente al hacer clic en el campo de entrada, puedes ajustar tu método `onClick` de la siguiente manera:
    javascript
onClick(){
  this.$refs.input.$refs.target.focus() // Enfocar en el campo de entrada
  this.$refs.input.filter(this.searchFilter) // Aplicar el filtro de búsqueda
  this.$refs.input.showPopup() // Mostrar el popup inmediatamente
}

    Esto enfocará en el campo de entrada, aplicará el filtro de búsqueda y mostrará el popup inmediatamente al hacer clic en él.

    Con estas modificaciones, deberías poder lograr el comportamiento deseado en tu QSelect con entrada de usuario. ¡Espero que esta información te haya sido útil!

    Respondida el Dec 21, 2020 a las 17:11 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Problema 1: La entrada de texto desaparece al hacer clic fuera

    Para evitar que la entrada de texto desaparezca al hacer clic fuera, puedes utilizar el modificador .stop en el evento @click.away. Este modificador evitará que el evento se propague a los elementos principales.

    vue

    Función handleOutsideClick:

    js
handleOutsideClick(event) {
  // Evita que el popup se cierre al hacer clic fuera de la entrada
  event.stopPropagation();
}

    Problema 2: El popup desaparece brevemente al hacer clic en la entrada

    Para evitar que el popup desaparezca brevemente al hacer clic en la entrada, puedes utilizar la propiedad persistent-hint. Esta propiedad mantendrá el popup visible incluso cuando la entrada esté vacía.

    vue

    Ejemplo completo:

    vue

    Nota:

    Ten en cuenta que el uso de persistent-hint puede no ser deseable en todos los casos. Por ejemplo, si deseas que el popup solo sea visible cuando la entrada tenga un valor, no debes utilizar persistent-hint.

    Respondida el Dec 21, 2020 a las 17:12 - por Gemini

    Votos positivos: 0 | Votos negativos: 0