Autocomplete is broken on Android about react-map-gl-geocoder HOT 14 CLOSED

Yay! The issue is fixed with v2.0.8. Thanks a lot @SamSamskies 🎉

from react-map-gl-geocoder.

Thanks for reporting issue. Unfortunately, I don't have an Android to debug this. If anyone would like to tackle this issue, PRs are much appreciated.

from react-map-gl-geocoder.

@ExiaSR @SamSamskies I'm having the same issue too :( . This does not happen with mapbox-gl-geocoder

from react-map-gl-geocoder.

@thanhphuong612 if you can provide any information about what may be causing this, I can look into it. I don't have an Android phone, so I'm not even able to reproduce this issue. Other than that, feel free to spread the word to others that may have an Android phone and would be willing to help debug. Maybe they could fix it and send a PR or at least provide some insight into why this may be happening.

from react-map-gl-geocoder.

@SamSamskies thanks for looking into it.

It seems to me for some reasons on Android, componentDidUpdate is called 3 times when the input gets focused, and after that the keyboard disappears and the input lost focused because the geocoder is removed inside componentDidUpdate

It looks like componentDidUpdate does not get called for desktop or iPhone.

The issue happens on your demo https://codesandbox.io/s/l7p179qr6m as well, but here is the screenshot I'm debugging live content my app on an android phone from my Mac Dev Tool.

from react-map-gl-geocoder.

@thanhphuong612 thanks, this is helpful. I'll try and take a look at this this weekend.

from react-map-gl-geocoder.

@thanhphuong612 could you try this demo to see if the issue still occurs? https://codesandbox.io/s/v0m14q5rly

from react-map-gl-geocoder.

@thanhphuong612 I improved the rendering by changing the component to a PureComponent in v2.0.8, so now the component only updates when the props change. I think this problem may go away as long as you're not passing in new object references or anonymous functions as props. Let me know if it fixes the problem or not.

from react-map-gl-geocoder.

@SamSamskies thanks for looking into this. Unfortunately the issue is still not fixed.
I tried to debug and see that the removeGeocoder is still called in componentDIdUpdate

from react-map-gl-geocoder.

@thanhphuong612 it is supposed to do that. However, v2.0.8 only re-renders when the props have changed. So componentDidUpdate should only change when you change the props. Can you post a code snippet of the JSX for your Geocoder component?

You may also need to ignore mouse interaction events on the Geocoder component. I posted an example of how to do that in this issue #22.

from react-map-gl-geocoder.

@SamSamskies I have tried your demo https://codesandbox.io/s/v0m14q5rly with v2.0.8, and the issue is not fixed yet on this demo.
I haven't tried v2.0.8 on my code yet.

If you do not have Android phone, you can try https://www.browserstack.com/. It offers the ability to test on Android device for free. I can reproduce the issue on browserstack as well.

from react-map-gl-geocoder.

@thanhphuong612 the demo you linked is using version v2.0.5. Try it with this one https://codesandbox.io/s/react-map-gl-geocoder-ignore-events-example-x652y. If that doesn't work, I'll try and look into it more using BrowserStack maybe this weekend.

from react-map-gl-geocoder.

@thanhphuong612 the demo you linked is using version v2.0.5. Try it with this one https://codesandbox.io/s/react-map-gl-geocoder-ignore-events-example-x652y. If that doesn't work, I'll try and look into it more using BrowserStack maybe this weekend.

Doesn't work for react hooks
Pls help

from react-map-gl-geocoder.

@thanhphuong612 the demo you linked is using version v2.0.5. Try it with this one https://codesandbox.io/s/react-map-gl-geocoder-ignore-events-example-x652y. If that doesn't work, I'll try and look into it more using BrowserStack maybe this weekend.

Doesn't work for react hooks
Pls help

Hi @sajmaru, could you provide a Code Sandbox example? It should work when using functional components and hooks.

from react-map-gl-geocoder.