Custom header dropdown menu - hide dropdown when another element is clicked

[jamstone]

WebViewer Version: 8.3.2

Do you have an issue with a specific file(s)? No
Can you reproduce using one of our samples or online demos? Yes
Are you using the WebViewer server? No
Does the issue only happen on certain browsers? No
Is your issue related to a front-end framework? No
Is your issue related to annotations? No

Please give a brief summary of your issue:
Custom dropdown menu example has a bug in which dropdown menu doesn’t hide when another UI element is clicked. This is different from the standard menu items.

Please describe your issue and provide steps to reproduce it:
I am using the example here - PDFTron

The custom drop menu renders but it doesn’t function like other dropdown menus in the header - i.e. if you left click away / another UI element the dropdown menu (if open) doesn’t disappear.

Please provide a link to a minimal sample where the issue is reproducible:

PDFTron

[system]

Hello, I’m Ron, an automated tech support bot

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:

• Core engine for WebViewer - Creating your own UI using WebViewer Core
• Optimize & reduce lib folder for WebViewer - Why does the folder size still seem large?
• My custom header element is not rendering when using a polyfill (IE)
• Code samples to edit PDFs using JavaScript

APIs:

• UI - setCustomModal(options)
• UI. MenuOverlay - update( [items])
• UI. Header - obj

Forums:

• Serving WebViewer via ASP.NET - “Corrupted Reserved Bit” Warning
• Creating a signature field in a PDF using JavaScript
• Shifting download button at toolgroup bar

[Wanbo_Li]

Hi,

The code sample just created the menu from scratch, if you want to have similar behaviour like handling clicking outside, you can just handle it on your own. Below is an example for React component:

Detect click outside React component

Thanks.

Wanbo