First up, thanks for the amazing work. We're heavily relying on this library for our app.
Please provide an explanation of the issue
Starting from version 2.10.0/2.10.1, there seems to be an issue with an info box overlapping a polygon on mobile. What happens is this:
Render a polygon and an info box with a button, with the info box partly overlapping the polygon
Give both the polygon and the button in the info box a click handler
Tap on a part of the button in the info box that overlaps the polygon:
behaviour <= 2.8.1: triggers only the info box click event handler (imho correct)
behaviour >= 2.10.0: triggers both click event handlers, with the polygon handler (that is "beneath" the info box) triggering first (imho incorrect)
This does not happen if other objects overlay each other. For example, if a marker is placed within a polygon and clicked, it only triggers a click event on itself which is expected.
Your Environment
This problem appears on all mobile plattforms in every major browser.
Node v 14.19.0 through v19.8.1
React v17 as well as v18
Webpack 5.77.0
@react-google-maps/api version >- 2.10.1
How does it behave?
If an info box is displayed over a polygon (siblings in jsx), a click event is triggered on both elements, with the polygon receiving the event first.
How should it behave correctly?
If an info box is displayed over a polygon (siblings in jsx), a click event should only be triggered on the info box.
Basic implementation of incorrect behavior in codesandbox.com
⚠️ you won't be able to reproduce the issue on code sandbox, since the clicks behave differently from actual mobile clicks or clicks while in mobile mode in dev tools
So here's a link to a minimal reproduction repo: https://github.com/BoveFabio/react-google-maps-bug
I can provide a temporary maps key for reproduction if needed.
If you need any more info, please let me know!
In the meantime, I will look into the code and try to figure out what broke this behaviour between v2.8.1 and v2.10.1.
Hi 👋
First up, thanks for the amazing work. We're heavily relying on this library for our app.
Please provide an explanation of the issue
Starting from version 2.10.0/2.10.1, there seems to be an issue with an info box overlapping a polygon on mobile. What happens is this:
This does not happen if other objects overlay each other. For example, if a marker is placed within a polygon and clicked, it only triggers a click event on itself which is expected.
Your Environment
This problem appears on all mobile plattforms in every major browser.
Node v 14.19.0 through v19.8.1
React v17 as well as v18
Webpack 5.77.0
@react-google-maps/api version >- 2.10.1
How does it behave?
If an info box is displayed over a polygon (siblings in jsx), a click event is triggered on both elements, with the polygon receiving the event first.
How should it behave correctly?
If an info box is displayed over a polygon (siblings in jsx), a click event should only be triggered on the info box.
Basic implementation of incorrect behavior in codesandbox.com
⚠️ you won't be able to reproduce the issue on code sandbox, since the clicks behave differently from actual mobile clicks or clicks while in mobile mode in dev tools So here's a link to a minimal reproduction repo: https://github.com/BoveFabio/react-google-maps-bug I can provide a temporary maps key for reproduction if needed.
If you need any more info, please let me know!
In the meantime, I will look into the code and try to figure out what broke this behaviour between v2.8.1 and v2.10.1.