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

[hexagoncircle]

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

[davidcetinkaya]

Hi Ryan (@hexagoncircle),

Thank you for the well described issues and the CodeSandbox. Regarding the resize and initialization issue, I think some sort of race condition is happening here. Are you sure that the HTML has mounted inside the boxes by the time you initialize Embla Carousel? Because you shouldn't have to call embla.reInit() if the HTML is already in place when initializing Embla the first time. Additionally, when you resize the window, Embla calls reInit() automatically.

For example, there's a domready event listed in the events section (in the docs link you provided). Maybe you could try to pass a boolean prop like isReady to the EmblaCarousel component when the InfoBox is ready? Something along these lines could do the trick:

const EmblaCarousel = ({ slides, isReady }) => {

  return (
    <div className="embla__viewport" ref={isReady ? viewportRef : null}>
      ...
    </div>
  );
};

• See InfoBox will get stuck when dragging and mouse is released.

I'm not sure what's happening here. Is the InfoBox preventing the touchend and mouseup event from firing 😕? I'll look into this when I have the time to do so.

Let me know how it goes!

Kindly,
David

[hexagoncircle]

I have passed a boolean prop into the carousel as recommended, setting it in the onDomReady prop, and the carousel mounts correctly, transitioning as expected. I'll be sure to update this ticket if I find a way to solve the _InfoBox_ drag issue.

Thank you so much!

[davidcetinkaya]

Hi again Ryan (@hexagoncircle),

Reading the documentation again, i found the following properties for the InfoBox:

disableAutoPan | boolean
Disable auto-pan on open. The default value is false.

enableEventPropagation | boolean
Propagate mousedown, mousemove, mouseover, mouseout, mouseup, click, dblclick, touchstart, touchend, touchmove, and contextmenu events in the InfoBox (default is false to mimic the behavior of a google.maps.InfoWindow). Set this property to true if the InfoBox is being used as a map label.

Maybe one of these properties are of interest and could potentially solve this issue:

See InfoBox will get stuck when dragging and mouse is released.

?

Kindly,
David

[hexagoncircle]

Hi David,

Thanks for these recommendations. I've tried them both previously in relation to:

See InfoBox will get stuck when dragging and mouse is released.

• disableAutoPan is necessary to move the map so that the _InfoBox_ can be pulled fully in view. Setting to false turns it off and the drag issue persists.
• enableEventProgagation defaults to false for an _InfoBox_ and mimics the _InfoWindow_ behavior. When set to true, it allows map events beneath the box, so the map will move when I drag the carousel. Although, when doing this, the carousel drag no longer gets stuck! One thought I had was to disable events on the map while hovering an _InfoBox_. That does feel a bit hacky, though.

Since the carousel works in the _InfoWindow_, maybe this is more of an issue with the _InfoBox_ implementation and how it handles certain events (maybe it has fallen behind some of the _InfoWindow_ updates).

If you don't have any other ideas and you don't see this being an issue with the Embla implementation, feel free to close this issue. I can report on a workaround should I figure one out.

Thanks again for the amazing work you put into this library!

[davidcetinkaya]

Hi Ryan (@hexagoncircle),

Thank you for taking time to share that.

Since the carousel works in the InfoWindow, maybe this is more of an issue with the InfoBox implementation and how it handles certain events (maybe it has fallen behind some of the InfoWindow updates).

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

I'm closing this issue for now. Feel free to open it again if you find something that indicates that this is a potential bug, and we'll take it from there.

Best,
David

[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!

[davidcetinkaya]

Hi Ryan (@hexagoncircle),

Thanks a lot for sharing this. Nice digging 👍. Out of curiosity, have you created an issue to discuss why the infobox has these listeners that are causing this?

On a side note
Check out the latest releases if you haven't done so yet. I think they turned out pretty well:

• v4.2.0
• v4.3.0

Best,
David

[hexagoncircle]

No problem, @davidcetinkaya! This isn't so much an issue with that React library as much as it is with the original _Infobox_ implementation. The project has been archived in the v3-utility-library but its README states:

This library is community supported. We're comfortable enough with the stability and features of the library that we want you to build real production applications on it.

I could try opening an issue against it to see if anyone can provide feedback.

• This issue is the only one I came across that is related to my issue here but it went stale and was closed automatically.
• This issue discusses an old conflict with the map dragend event while hovering an _Infobox_.

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.

This click + drag experience also happens with the _InfoWindow_ so I think this interaction is expected. Try it again in my demo sandbox. Drag the carousel and release the mouse outside of the popup container.

I don't love the following idea since it's a bit hacky, but you _could_ track a boolean that only allows the map click callback if a mousedown event reaches the map. I assume the same could be done with a touchstart if necessary (I have not tested this on a touch device yet)

let enableMapClickCallback = false;

map.addListener('mousedown', () => {
  enableMapClickCallback = true;
});

map.addListener('click', () => {
  if (enableMapClickCallback) {
    // Do some neat stuff...
    enableMapClickCallback = false;
  }
});

So yeah... that's an option 😬

Check out the latest releases if you haven't done so yet. I think they turned out pretty well

v4.3.0 breakpoint options – That's a great addition! Does this replace default options or only update the ones declared in the media query? Honestly, if drag on desktop isn't entirely necessary and assuming you have buttons to slide the carousel content, you could make the carousel in an _Infobox_ drag-free on non-touch devices. I think something like this might work:

@media (any-hover: hover) {
  .infobox .embla:before {
    content: '{
      "draggable": false
    }';
  }
}

[davidcetinkaya]

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