Close context menu when we click the map

[easbar]

Fixes #135.

Apparently all we need to do is add a click handler to the map, but for some reason we cannot call setMenuCoordinate(null) as @karussell figured out in #232.

When I tried to fix the issue here it never worked as expected:

• After I added the click handler via map.getTargetElement().addEventListener('click', ... the menu closed when clicking the map, but it also just closed when I clicked on one of the menu entries (without any further action)
• I was then able to fix this with this workaround in Popup.tsx in 43d28bc
• ... but on iOS the menu would always close when I let go the long press, unless I was long-pressing and dragging
• When I tried map.on('click'...) instead it worked in the browser even without the change in Popup.tsx, but I had the same dragging issue on iOS again.
• What does seem to fix it is not calling setMenuCoordinate(null), but why?

[easbar]

I checked again:

            map.on('click', () => {
                overlay?.setPosition(undefined)
            })

works on my laptop, but does not work on iOS: When I do the long press the menu opens, but then closes again as soon as I let go, unless I do an additional drag.

            map.getTargetElement().addEventListener('click', () => {
                overlay?.setPosition(undefined)
                setMenuCoordinate(null)
            })

Does not work on my laptop as clicking on one of the menu entries just closes the menu, at least without the workaround in Popup.tsx

            map.getTargetElement().addEventListener('click', () => {
                overlay?.setPosition(undefined)
            })

Seems to work, so we have to set the event listener on the target element and not call setMenuCoordinate(null).

[karussell]

Thanks :) ... what an adventure. A bit sad that openlayers does not come with it out of the box.

but it also just closed when I clicked on one of the menu entries (without any further action)

Interesting. I had this same behaviour for map.on('click'...) :D

Update: works for me too. On desktop and on Android 11 (chrome+firefox).

[easbar]

Can you also try this? http://gh-maps-react.s3-website.eu-central-1.amazonaws.com/cleanup_context_menu
Apparently this also works in strict mode (compared to master and the solution here).

However, for this I had to use the 'singleclick' event, to distinguish between clicking and panning the map. This means there is a short, but noticeable delay between the click and closing the menu. But otherwise the menu also closes when when panning the map which I think is not what we want.

[easbar]

Anyway, I'll merge this so you can also merge your context menu changes and the above version is maybe something for #216. But just the fact that here something went wrong when we called setMenuCoordinate(null) and that it does not work in strict mode tells me we are still doing something wrong :)

[karussell]

Can you also try this? http://gh-maps-react.s3-website.eu-central-1.amazonaws.com/cleanup_context_menu

Unfortunately this does not work in chrome and firefox on Android: the menu always closes (with a small delay) after it opened. Except again, when I drag while opening.

But otherwise the menu also closes when when panning the map which I think is not what we want.

To me this isn't that important :)

[easbar]

Unfortunately this does not work in chrome and firefox on Android: the menu always closes (with a small delay) after it opened. Except again, when I drag while opening.

sigh :)

To me this isn't that important :)

I feel like I have to move the map every time I open the menu because it is never full visible, so it would be annoying if it closed every time I move the map.

[karussell]

I feel like I have to move the map every time I open the menu because it is never full visible, so it would be annoying if it closed every time I move the map.

With #232 the map moves automatically (again) if not fully visible - or will it close in these cases too?

[easbar]

or will it close in these cases too?

Probably not, but let's just try again when it is merged.