<p>vaadin-combo-box cuando se coloca dentro de paper-dialog cierra el diálogo en algunos casos.</p>
Descripción
Cuando el elemento vaadin-combo-box se coloca dentro del cuadro de diálogo de papel, si el usuario abre el cuadro de selección (pero no lo selecciona, simplemente lo deja abierto), haga clic en cualquier parte del cuadro de diálogo para cerrar el cuadro de diálogo.
Gastos esperados
Haga clic en cualquier parte del cuadro de diálogo (p. ej., esquina superior izquierda) para cerrar el cuadro, pero deje el cuadro de diálogo abierto.
resultado real
Hacer clic en cualquier parte del cuadro de diálogo cierra todo el cuadro de diálogo.
Demo en vivo
https://jsfiddle.net/ribe/02tntfn3/2/
pasos para reproducir
- Abra el cuadro de diálogo,
- abra la caja, y no seleccione - déjela abierta,
3.Haga clic en la esquina superior izquierda del cuadro de diálogo.
GoceRibeski
Todos 19 comentarios
Hay una especie de error con la propagación de eventos. P.ej. cerrar vaadin-combo-box presionando Esc también cierra el diálogo. En tales casos, generalmente uso algo como on-keydown="_stopPropagation" y luego solo agrego un controlador como este:
_stopPropafation: function (e) {
e.stopPropagation()
}
También hay una propiedad stopKeyboardEventPropagation proporcionada por IronA11yKeysBehavior , pero vaadin-combo-box no implementa ese comportamiento y esa propiedad parece no funcionar para algunos otros elementos, parece que maneja los eventos demasiado tarde.
web-padawan
en 21 feb. 2017
No puedo encontrar dónde colocar el evento que llamará a stopPropagation en Fiddle dado. ¿Alguna idea?
GoceRibeski
en 21 feb. 2017
¡Hola!
El desafío aquí es que la superposición de <vaadin-combo-box> se coloca debajo <body> , que está fuera de <paper-dialog> por lo que considera cualquier clic en la superposición del cuadro combinado como "clics externos ", que por defecto cierra el cuadro de diálogo.
Como solución alternativa, puede deshabilitar los clics externos cuando el cuadro combinado está abierto:
...
<vaadin-combo-box id="third" label="Focus Third" tabindex="3" on-focus="_focusInput" items="[[items]]" on-blur="_onBlur" on-opened-changed="_onComboBoxOpened">
</vaadin-combo-box>
<script>
...
_onComboBoxOpened: function(e) {
if (e.detail.value) {
this.$.add_row_details_dialog.noCancelOnOutsideClick = true;
} else {
this.async(function() {
this.$.add_row_details_dialog.noCancelOnOutsideClick = false;
}, 10);
}
}
...
</script>
Saulis
en 1 mar. 2017
@Saulis , tu enfoque no funcionó para mí, desafortunadamente. Sin embargo, acabo de establecer la propiedad noCancelOnOutsideClick en verdadero en el cuadro de diálogo de papel, y eso soluciona el problema (no había ningún requisito para cerrar el cuadro de diálogo al hacer clic fuera de él, en este caso).
kito99
en 2 mar. 2017
Para su información, esto también sucede si simplemente selecciona un elemento en el cuadro combinado con el mouse...
kito99
en 2 mar. 2017
Aplique 'no-cancel-on-outside-click' al elemento de diálogo de papel. Esto evitará que el cuadro de diálogo se cierre cuando seleccionó un elemento en el cuadro combinado de vaadin con un clic del mouse o desde el teclado.
<paper-dialog no-cancel-on-outside-click>
<vaadin-combo-box class="elements-box" items="[[arrayOfValues]]"></vaadin-combo-box>
</paper-dialog>
artem-vladimirov
en 17 mar. 2017
La solución de @kito99 / @artem-vladimirov con no-cancel-on-outside-click no es adecuada en general ni para mí, ya que quiero que el usuario pueda cerrar el cuadro de diálogo con un clic externo. (Pero puedo confirmar que funciona si ese no es un requisito).
Otra solución (similar) es escuchar el evento iron-overlay-canceled y luego llamar a event.stopPropagation() y event.preventDefault() , pero esto tiene el mismo problema que la otra solución: impide cerrar el cuadro de diálogo. en un clic de fondo.
He intentado diferenciar los dos eventos entre sí, pero hasta ahora no he tenido suerte.
Puedo confirmar la observación de @kito99 de que simplemente seleccionar un elemento cierra el cuadro de diálogo, al igual que cancelar la selección haciendo clic en el cuadro de diálogo de papel.
EDITAR:
Se me ocurrió la siguiente solución:
listeners: {
"iron-overlay-canceled": "onCanceled",
},
onCanceled(event) {
const paperDialogHoverElement = document.querySelector("paper-dialog:hover");
const vaadinHoverElement = document.querySelector("vaadin-combo-box-overlay:hover");
if (paperDialogHoverElement || vaadinHoverElement) {
event.stopPropagation();
event.preventDefault();
}
}
En resumen, el evento se cancela solo si el cursor está en el diálogo de papel o en el elemento de superposición. Con esta solución, puedo seleccionar valores desplegables, cerrar el cuadro de diálogo con un clic externo y también cerrar el cuadro de diálogo con el botón de escape. Probado en Chrome y Firefox.
panuhorsmalahti
en 3 abr. 2017
¿Hay algo que hacer aquí además de esperar una nueva versión? ¿solución oficial de vaadin?
timoteoponce
en 10 may. 2017
No estoy seguro de por qué me he perdido por completo este problema durante tanto tiempo. Este es un problema de usabilidad realmente fundamental y debe solucionarse lo antes posible. Veré si puedo inspirar a @Saulis o a alguien más del equipo de desarrollo para que eche un vistazo esta semana o la próxima.
jouni
en 10 may. 2017
Hola chicos, prueben la rama iron-overlay-cancel (lamentablemente, está construida sobre el maestro actual, por lo que puede haber algunos conflictos de dependencia por ser híbrido: resuelva las dependencias en 2.0-preview y Polymer en lo que sea que desear)
También elegí el cambio en la parte superior de la rama 1.x ( iron-overlay-cancel-v1 ), pero actualmente no puedo verificar que funcione porque no quiero estropear la configuración de mi glorieta Polymer 2: -)
Actualización: esta solución probablemente solo funcione en iron-overlay-behavior v1.10.3 o posterior.
Saulis
en 10 may. 2017
@GoceRibeski @web-padawan @kito99 @artem-vladimirov @panuhorsmalahti @timoteoponce ¿ alguien tiene la oportunidad de probar la solución? ¡Gracias!
Saulis
en 12 jun. 2017
@Saulis Gracias por recordar. Acabo de agarrar la rama iron-overlay-cancel-v1 y veo la advertencia:
[vaadin-combo-box::_createEventHandler]: listener method `_onBlur` not defined
Entonces, después de tener paper-dialog y vaadin-combo-box internos abiertos, probé dos cosas:
- Al presionar la tecla Esc, el cuadro de diálogo se cierra mientras la superposición del cuadro combinado permanece abierta,
- Al seleccionar un elemento, tanto el cuadro de diálogo como el cuadro combinado se cierran.
No tengo mucho tiempo para investigar en este momento, pero supongo que ese oyente perdido podría ser la razón.
web-padawan
en 12 jun. 2017
@web-padawan gracias! no hay necesidad de preocuparse por el _onBlur faltante, es un oyente que se eliminó intencionalmente, pero accidentalmente dejó el enlace del oyente en su lugar. Necesito volver a probar los problemas que informó, no he probado la rama v1 yo mismo.
Saulis
en 12 jun. 2017
@web-padawan Puedo confirmar que la solución funciona para mí tanto en iron-overlay-cancel con Polymer 2.x como iron-overlay-cancel-v1 Polymer 1.9.1 ; verifique dos veces que tiene iron-overlay-behavior v1.10.3 o posterior instalado (estoy ejecutando 2.0.0 )
Saulis
en 12 jun. 2017
@Saulis No me funciona. De hecho, incluso tengo un error extraño que no está presente en 2.0a4. Todo el texto de mi plantilla desaparece
Estoy ejecutando Polymer 2 con iron-overlay-behavior#2.0.0
Aquí está 2.0.0-alpha4 : http://www.giphy.com/gifs/3ohzdQKeVtoswDSpfW
Aquí está la rama iron-overlay-cancel : http://www.giphy.com/gifs/3o7btZ3T0yMwKkG6fm
arkihillel
en 12 jun. 2017
@arkihillel He rebasado iron-overlay-cancel encima de master , ¿puedes intentarlo de nuevo? Y asegúrese de reinstalar todos los depósitos de Bower.
Saulis
en 12 jun. 2017
Parece funcionar para mi.
Usando: vaadin-combo-box#iron-overlay-cancel, polímero#2.0.1, iron-overlay-behavior#2.0.0
Por cierto, no es gran cosa, pero es posible que haya cometido un error tipográfico con _removeOutsideTabListener , es decir, Tab vs Tap;)
jonagh
en 12 jun. 2017
¡@Saulis trabaja ahora!
Perdón por la edición, pensé que descubrí un error extraño, pero fue un error mío
arkihillel
en 13 jun. 2017
¿Existe ya una solución estable?
Cuando se selecciona un elemento con el mouse, el evento (selectedItemChange) se activa dos veces; el primero con el nuevo Item seleccionado y el segundo con el anterior (imposible cambiar la selección).
Gracias.
JuanCalderon
en 4 ago. 2017
Temas relacionados
joostdebruijn
·
6Comentarios
sohrabtaee
·
4Comentarios
steffen-harbich-cognitum
·
8Comentarios
web-padawan
·
5Comentarios
davidmaxwaterman
·
6Comentarios
Comentario más útil
Para su información, esto también sucede si simplemente selecciona un elemento en el cuadro combinado con el mouse...