Dropdown list closes on tablet/mobile when user clicks anywhere on screen

We have a filter bar at the top of the page with several dropdowns toggles. On desktop, it works great – on hover, the dropdown list opens, the user makes a selection, and when the mouse goes away, the list closes.

On tablets in store, we find customers are trying to click anywhere on the page to close the menu but the only way to close it is by clicking the dropdown toggle again, causing annoyance.

I thought I could potentially create an interaction for the body element that closed any dropdown lists that might be open when a user clicks anywhere but this had an unintended effect of the dropdown lists not even opening.

Any thoughts?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)