¿Se cierran tus menús desplegables antes de que alguien pueda interactuar con un pin dentro del menú? Descubre por qué a continuación, y descubre si necesitas ajustar tu aplicación o si puedes aprovechar nuestra solución alternativa.

Fondo

Las aplicaciones web pueden ser tan dinámicas y únicas que un mismo componente, como un menú desplegable, puede comportarse de muchas maneras diferentes. Por ejemplo, un menú desplegable puede cerrarse al presionar la tecla ESC, al hacer clic fuera del menú, al hacer clic con el puntero sobre un elemento del menú, al salir el cursor del menú o incluso tras unos segundos abierto sin interacción. ¡Probablemente existan otras combinaciones!

Por ejemplo, en algunas bibliotecas de interfaz de usuario (Radix, Bootstrap, etc.), más allá de seleccionar un elemento del menú desplegable, es probable que este solo se cierre si se produce un clic fuera de los elementos del árbol del menú (es decir, si se hace clic en cualquier elemento que no sea un elemento del menú, este se cerrará automáticamente). Además, algunas implementaciones probablemente impidan cualquier interacción de clic adicional en la página mientras el menú esté abierto. Mientras tanto, otras bibliotecas de interfaz de usuario podrían basarse en eventos completamente diferentes a los clics para cerrar los menús desplegables.

Recomendación

Debido a la gran cantidad de opciones y diferencias que pueden existir en los menús desplegables y otros elementos interactivos de cualquier aplicación, recomendamos encarecidamente usar las opciones de incrustación en línea al colocar un pin. Esta incrustación permite que el pin exista dentro del propio elemento de menú. Por lo tanto, si usa una biblioteca que bloquea los clics del puntero fuera del menú mientras este está abierto, el pin seguirá siendo cliqueable, ya que es un elemento secundario del menú y se encuentra en el mismo árbol DOM.

Solucionar problemas

En general, Appcues es lo suficientemente inteligente como para saber cuándo cancelar los eventos de "Clic" y "Puntero hacia abajo" mientras creas y muestras estos Pines. Sin embargo, si tu menú desplegable sigue cerrándose mientras intentas interactuar con el Pin, ya sea al crearlo o al mostrarlos a los usuarios finales, envía un correo electrónico a support@appcues.com con la lista de eventos que tu menú desplegable/aplicación utiliza para cerrarse. Una vez que recibamos esta información, investigaremos el problema y nos aseguraremos de que puedas crear y mostrar estos Pines en el menú desplegable.

Lista de bibliotecas de interfaz de usuario que admitimos actualmente

• Interfaz de usuario de Radix
• Oreja

Lista de bibliotecas de interfaz de usuario que actualmente NO admitimos

• As

Mientras espera nuestra investigación, hay una opción que puede probar si el Pin desaparece mientras intenta crearlo o mostrarlo a los usuarios finales.

1. Construye el pin en otra parte de la página en un elemento no interactivo
2. Establezca el comportamiento del pin en “Al pasar el cursor”
3. Reposicione el pin dentro del menú usando la configuración de Posición

Estos pasos permitirán que un usuario final pase el cursor sobre el Pin mientras el menú esté abierto y vea el contenido antes de que se cierre debido a un clic.