Wrong item selected in autocomplete on chrome android

[humbkr]

Hello,

I encountered a weird bug on Android on the autocomplete: when you scroll in your page then click on a suggestion item, the selected item that is put in the field is not the one you pressed on, but the one that was originally at this position before scrolling.

You can easily reproduce that faulty behavior on the official docs example: https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder/

Exact steps:

• start typing in the field
• the autocomplete displays the suggestions
• keep in mind the position of the first result on your screen then scroll a bit to position another result in the same location
• press on the other result
• the first result is selected, not the one you pressed

This doesn't happen in a chrome desktop browser.

[andrewharvey]

@humbkr I'm not able to replicate your issue on Chrome on Android.

[humbkr]

It seems it's harder to reproduce than I thought. It triggers when I scroll touching the screen over the suggestions results, but not alway when I scroll touching the screen outside of the map or the geocoder.

I made a video: https://drive.google.com/open?id=1bk9i8E32ad3othtbHUb36zzfQWDtXcWk

You can see in the first attempt I press on "Howard Johnson" but it selects "The Black Cat", on the second attempt I press on "Clint Roenisch" but it selects "Lambert Oil Ltd". You may have to reduce the speed of the video to see the touch events.

I can reproduce it on latest chrome on android 10, and on latest chrome of android 7.

[andrewharvey]

It triggers when I scroll touching the screen over the suggestions results, but not alway when I scroll touching the screen outside of the map or the geocoder.

Aha yes I can replicate the issue now. I have no idea what the cause would be though...

[humbkr]

Yes that's very strange, I tried to locate the problem but I can't figure out if it's a css or a js issue...

But it is very annoying as on mobile users almost always have to scroll to access the results.