hiding a div when clicking anywhere outside without using jQuery

Question

Trying to create my own version of salesforce listviews in a Lightning Component, got to the point where I can open and filter the drop down list (based on lightning design system: Page Header opening Single Lookup, trying to show/hide the lookup. https://www.lightningdesignsystem.com/components/lookups/#flavor-single https://www.lightningdesignsystem.com/components/page-headers/ ).

I'm trying to be able to close/hide the lookup div when I click anywhere outside the top search input field. I've found plenty of methods but they all contained jQuery (or angular), which I can't use due to the LockerService introduced in Spring 2016 - https://developer.salesforce.com/blogs/developer-relations/2016/04/introducing-lockerservice-lightning-components.html

any suggestions as to how I can achieve this?

Answer 1

Can you try this fiddle and let me know?

https://jsfiddle.net/8uufaLhf/1/

In this fiddle I have hidden the my div content when the user clicks out of div.