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.