mapboxgl-children DIV element blocks scroll-to-zoom and drag-to-pan events to Map parent #2216
Unanswered
patrickcteng
asked this question in
Q&A
Replies: 3 comments 3 replies
-
Having a similar issue, the Basically the |
Beta Was this translation helpful? Give feedback.
0 replies
-
Beta Was this translation helpful? Give feedback.
0 replies
-
Looking in the basic starter template example, it looks like I was missing a CSS import:
Adding this fixed the issue. |
Beta Was this translation helpful? Give feedback.
3 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hi,
I don't think this is a bug in the library but I wanted to see if anyone has see this before?
I work on a pretty large Typescript and some legacy javascript SPA and recently we wanted to integrate react-map-gl into our app. However, I noticed that when the element is rendered, the child
<div mapboxgl-children style="height: 100%;"></div>
element (which looks like it "overlays" the Map) blocks the zoom to scroll and drag to pan events from bubbling up to the parent.I've inspected the DOM and checked the to make sure no stopPropagation() calls are automatically attached to the
mapboxgl-children
element. But maybe I missed something?Though -- Once I apply
display: hidden
to the element, I can zoom-to-scroll and drag-to-pan the map AOK. I'm not putting any children on the map anyways, so this workaround works for me.But just wanted to see if anyone seen behavior like this?
Beta Was this translation helpful? Give feedback.
All reactions