react-places-autocomplete
react-places-autocomplete copied to clipboard
hibiken
Difficulty selecting a location item from dropdown on iOS devices
Do you want to request a feature or report a bug? Bug
What is the current behavior? I'm currently having difficulty selecting a location item from the dropdown after I enter in a in iOS X devices. I was testing with both chrome and safari browsers on a virtual iOS device via Browserstack, as well as via a physical iOS device. I'm able to select it with some difficulty if longpress an item, but this seems unintuitive to expect a user to do to select. On android devices, I have no problems selecting a location item.
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. I added in a screen recording of the issue below. The example I'm showing you is our site in desktop mode on mobile. Screen Recording.zip
What is the expected behavior? I expect the ease of selecting a location item to be similar to that of how I experience the component on Android devices.
Which versions of ReactPlacesAutocomplete, and which browser / OS are affected by this issue? iOS X (chrome/safari)
I ran into a similar problem where I had to double click on my dropdown option in order for the selection handling to be triggered, and after googling and doing some tests on various devices I found the issue.
Essentially the onMouseEnter attribute has "special" handling for iOS devices. The onMouseEnter event is used quite a bit in this library, and is also passed to any element you use with the getSuggestionItemProps object. What I did to get around this is I overrided the onMouseEnter to do nothing when the device is detected to be iOS. You lose the click event styling that you might have set, but at least you only need to press once.
<div key={Math.random()} tabIndex={-1} className={clsx({ [styles.suggestion]: true, [styles.active]: suggestion.active })} {...getSuggestionItemProps(suggestion)} onMouseEnter={(): void => console.count('do nothing')} >
@DevelopersTopHat I did your suggestion with the onMouseEnter and it seems to have fixed my issue with the double tapping on an ios device. Thanks!
Hi @DevelopersTopHat It is not working on my end. Pls suggest any solution for this
