Submit Article Requests

Do you have a suggestion for an article you would like to see created?
Feel free to submit this form and add your suggestions to our document board.

Please fill out the contact form below and we will reply as soon as possible.

  • Appcues Certifications & Training
  • Contact Us
  • Home
  • User Experiences
  • FAQ

FAQ: Pins in dropdown menus/interactive elements

Updated at November 28th, 2022

Submit Article Requests

Do you have a suggestion for an article you would like to see created?
Feel free to submit this form and add your suggestions to our document board.

Please fill out the contact form with the details about the help content you'd like to see.

  • Installation & Developers
    Installing Appcues Installing Appcues Mobile API & Data Troubleshooting Extras
  • User Experiences
    Web Experiences Building Web Experiences Building Mobile Experiences Customization & Styling Targeting Studio Troubleshooting Use Cases FAQ
  • Mobile
    Installation & Overview Building Mobile Experiences Mobile Analytics Troubleshooting Mobile Use Cases
  • Account Management
    Subscription Users & Data
  • Analytics
    Experience and Event Analytics Data
  • Best Practices
    Use Cases Pro Tips PLG FAQ
  • Integrations
    Integration Documents Use Cases Resources
  • Post-mortem
    System Incidents
+ More

Table of Contents

Background Recommendation Troubleshoot

Are your dropdown menus closing before someone can interact within a Pin inside the menu? Learn more about why below, as well as learn if you need to adjust your application, or if you can take advantage of our workaround.

Background

Web applications can be so dynamic & unique that the same component, like a dropdown menu, can behave in many different ways! As an example, a dropdown menu can close when someone presses the ESC key, on a click outside the menu, on a pointer click on an item in the menu, when the cursor leaves the menu, or even after a few seconds opened without any interaction. There are probably other combinations as well! 

For example, in some UI libraries (Radix, Bootstrap, etc.) beyond when a dropdown menu item is selected, it is likely that the dropdown menu will only close if a pointer click event happens outside the menu's tree items (i.e. if you click on anything that isn’t a menu item, the menu is going to close on you). Additionally, some implementations will likely prevent any additional click interactions on the page while the menu is opened. Whereas other UI libraries could rely on completely different events other than clicks to close dropdown menus.

Recommendation

Because there can be so many options and differences within dropdown menus and other interactive elements in any given application, we strongly recommend that you use the inline embedding options when placing a Pin. Inline embedding will allow the pin to exist within the menu element itself. Thus, if you use a library where pointer clicks outside the menu are blocked while the menu is open, the Pin will still be clickable because the Pin is a menu's child and lives in the same DOM tree.

Troubleshoot

For the most part, Appcues is smart enough to know when to cancel “Click” and “Pointer Down” events while you are building and showing these Pins. However, if your dropdown menu is still closing while you are trying to interact with the Pin either while you are building a Pin or when showing Pins to end users, please reach out to support@appcues.com with the list of events that your dropdown menu/application uses to close itself. Once we’ve received this information, we can investigate what’s happening, and work to ensure that you are able to build and show these Pins within the dropdown menu. 

List of UI Libraries that we currently support

  • Radix UI
  • Bootstrap

List of UI Libraries we currently do NOT support

  • Ace

While you are awaiting our investigation, there is one option you can try if the Pin is disappearing while you are trying to build or show it to end users. 

  1. Build the pin elsewhere on the page on a non-interactive element
  2. Set the Behavior of the Pin to “On Hover”
  3. Reposition the pin inside the menu using the Position setting

These steps will allow an end user to hover over the Pin while the menu is open and view the content before it closes due to a click. 

Was this article helpful?

Yes
No
Give feedback about this article

Related Articles

  • Targeting Flows Use Cases
  • FAQ: Supported images, videos and gifs and recommended sizes
  • Buttons in Flows
  • Build Guide - Welcome Message (linear)
Appcues logo

Product

Why Appcues
How it works
Integrations
Security
Pricing
What's new

Use cases

User Onboarding Software
Feature Adoption Software
NPS & Surveys
Announcements
Insights
Mobile Adoption

Company

About
Careers
we're Hiring

Support

Developer Docs
Contact

Resources

The Appcues Blog
Product Adoption Academy
GoodUX
Case studies
Webinar Series
Made with Appcues
Appcues University

Follow us

Facebook iconTwitter icon greyLinkedin iconInstagram icon
© 2022 Appcues. All rights reserved.
SecurityTerms of ServicePrivacy Policy
Expand