Mouse interaction propogates through to underlying map about react-map-gl-geocoder HOT 12 CLOSED

Thanks for reporting this issue.

It looks like react-map-gl places an overlay to capture events. visgl/react-map-gl#304

You could use the containerRef prop to place the geocoder outside of the map to avoid propagating the events. Example: https://codesandbox.io/s/v0m14q5rly

from react-map-gl-geocoder.

I added an example of how to fix this problem using a custom MapController. https://codesandbox.io/s/react-map-gl-geocoder-ignore-events-example-x652y

from react-map-gl-geocoder.

The solution works well thanks! Could the CustomMapController be something that is exported from this library?

from react-map-gl-geocoder.

Hi @TAQ2, thanks for the idea, but I don't think I want to do that since react-map-gl is a peer dependency. It's possible that MapController could have a different API depending on the version of react-map-gl being used in the app.

Maybe I can update the README instead to include links to all my Code Sandbox examples including this one. That way at least people won't have to dig through past issues to figure out how to do stuff.

from react-map-gl-geocoder.

Yeah that sounds like a good idea :)

from react-map-gl-geocoder.

How would I do this on a custom element with no mapRef and containerRef props?

from react-map-gl-geocoder.

Hi @CSFlorin, what do you mean by do this on a custom element? Also, mapRef is a required prop.

from react-map-gl-geocoder.

To the example solution above, it only handles the input box itself. When you click on the suggestions, you have the same problem. At first look, it seems like the easiest solution is to just extend what @SamSamskies did and also check for these classes:
mapboxgl-ctrl-geocoder--suggestion-title and mapboxgl-ctrl-geocoder--suggestion-address in the custom controller.

from react-map-gl-geocoder.

Hi @kjkurtz, thanks for raising this issue. I didn't know about that. Maybe I can export a helper function that checks if a click was made on any of the geocoder HTML elements. It would be safer because if I ever update the @mapbox/mapbox-gl-geocoder dependency, the class names could possibly change. It would be better to abstract these class names away from users of this component.

For now, I recommend using the containerRef option. You don't need a custom controller if you do it that way. If you want the geocoder to appear visually over the map, you can use CSS in your container to achieve that.

from react-map-gl-geocoder.

+1 on the issue, I have the same thing. Let me try the containerRef solution for now, however I do want the geocoder to appear visually over the map.. @SamSamskies if you have the time could you make some sample css on how to achieve that. If not that's ok I will still try, thanks.

EDIT: nevermind, I solved it. First, I used your existing example with containerRef (with the black bar) and modified css to have the container with "position: absolute", added some margins and that did the trick! Also added background: transparent as well. Works great.

from react-map-gl-geocoder.

Hi @axleun, here's an example for you https://codesandbox.io/s/react-map-gl-geocoder-using-containerref-to-ignore-events-rewdh

from react-map-gl-geocoder.

Great work with this library @SamSamskies 👍
I have integrated react-map-gl-geooder in my webapp as it bundles really well with the react-map-gl library. I have the following issue, though:
Whlle on a mobile device, swiping up/down the suggestion list triggers map movement instead of hiding the keyboard in order to see the full suggestion list.
On a first note, I applied your suggestion on using the containerRef instead of the mapRef in order to stop gestures from propagating to the map's layers but no luck. I created a custom map controller for pan movements on suggesstion list to stop map movement and it stopped the map from moving (although it still moves when I pan on a random trajectory).
Now what's left is to blur the input field every time the geocoder element (either the input or the suggestions) is panned.
I would really appreciate if you could point me to the right direction about the next steps to hide the keyboard whenver either the input field or the suggestion list is panned.

EDIT: If you agree, this could be a new issue that maybe targets a bit more the real problem here, the input field blur in order to hide the keyboard and show the full suggestion list.

See attachement: https://res.cloudinary.com/dwmew0qd3/video/upload/v1588703418/geocoder-suggestions-bug.mov

from react-map-gl-geocoder.