Carousel drag issues when used in a react-google-maps InfoWindow or InfoBox
See original GitHub issueIssue Description
react-google-maps/api provides both the standard Google Maps InfoWindow component as well as a customizable InfoBox component which should mimc InfoWindow’s functionality but it “supports several additional properties for advanced styling [see docs].”
I’m trying to display an embla-carousel in an InfoBox but having issues when dragging the carousel. It seems to get stuck dragging back and forth until you click somewhere else (on the map, another marker, etc). On a touch device, this same dragging behavior happens if you slide the carousel and then move the map around while the InfoBox is open.
Test Cases
- When carousel is used inside an InfoBox if I try to drag a carousel with the mouse, the carousel continues to drag even after mouse click is released.
- When used in an InfoWindow, it seems that the slider works as expected, although you need to resize the browser window to get it to slide (happens in both cases). I’ve tried calling
reInit()
in the carousel’suseEffect
and that does seem to help after resizing the window.
Test URL
CodeSandbox: https://codesandbox.io/s/react-google-mapsapi-infowindowinfobox-embla-carousel-8rgwg
- This demo has two markers: one renders with an InfoWindow and one with an InfoBox.
Reproduction steps
- Click on marker to trigger popup.
- Resize the viewport to get the dragging to respond.
- See InfoWindow with bubble and close [x] button will drag and stop when mouse is released.
- See InfoBox will get stuck when dragging and mouse is released.
I pulled in embla-carousel’s “Basic” example code for this test. It seems like this may be an issue with the InfoBox component, which I’ve brought up in the react-google-maps slack channel but I thought you might be able to provide some insight on the usage of embla-carousel here. It is possible that it’s a poor implementation on my part. I appreciate any help or feedback. Thanks in advance!
Related documentation
Issue Analytics
- State:
- Created 3 years ago
- Comments:9 (5 by maintainers)
Hi @davidcetinkaya - Adding a follow-up comment for anyone else that may stumble on this issue. This bug is not related to embla-carousel as we have confirmed.
You are correct about that. I’m not sure why those particular two are squashed either.
One way to resolve this issue would be to remove
touchend
andmouseup
from the “cancel event propagation” array on this line in the infobox.js file.To anyone that attempts to do this, approach with caution and test thoroughly! My guess is that it’s possible some other
touchend
ormouseup
listener on the map underneath may get triggered when interacting within the Infobox but I haven’t experienced issues in my initial testing. It would be great to see google-maps-api welcome container style customizations to their Info Window someday.Update: Didn’t take long to find the issue with that! My guess was correct: If you click + drag the carousel and let go of it outside of the Infobox, it will trigger the map
mouseup
event.If I discover anything else, I’ll be sure to update my comment. Thanks!
Hi Ryan,
I see. Nice digging from your side 👍. I just tested the following and can confirm that this is the case as you mention:
Regarding the pseudo options From the docs:
I hope this helps 🙂. Thanks for your efforts!
Cheers David