Hi!

I'm building a map picker, similar to a date picker, only it presents a map from Google Maps rather than a calenda. Basically it lets the user select a location and store this information in an input field. It displays on the input field's focus event, and in order to close it, I have bound a click handler to the document which checks what the user actually clicked on by looking at e.target, and if it determines that the user clicked outside of the map picker it stores the map's state as attributes on the input field (lat, long and zoom level at this time).

The problem I'm experiencing with this approach is that when a page presents two (or any number > 1) fields that have the map picker bound to their focus events, and the user goes directly from one to the another, the focus event of the "next" input field is fired before document.click. This leads to a weird behaviour where it doesn't save map state properly. What would be the proper way to go about this?

Perhaps the best way is to have a "Save" button or similar inside the map picker that saves the state, and a click outside of it will just close it. Nonetheless though, I'm curious if it's possible to solve with my current approach.

Regards