Carousel drag issues when used in a react-google-maps InfoWindow or InfoBox

Issue 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’s useEffect 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

• Infobox on github
• react-google-maps/api docs

[hexagoncircle]

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.

I think this could be the case, that the InfoBox kills touchend and mouseup events outside its boundaries. But I don’t know why 😕.

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 and mouseup 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 or mouseup 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!

[davidjerleke]

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:

This click + drag experience also happens with the InfoWindow so I think this interaction is expected.

Regarding the pseudo options From the docs:

The pseudo options object is always given the highest priority. It will be merged with the options passed to the EmblaCarousel initializer, and if any options are in conflict, the pseudo options will have precedence.

I hope this helps 🙂. Thanks for your efforts!

Cheers David