ErrorPro / react-google-autocomplete

React components for google places API.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

iOS Safari: The input field is NOT aware of the auto-filled value, so dropdown does not show up when regained focus

xsjcTony opened this issue · comments

commented

Hey, I'm facing an issue with iOS Safari (both iOS 15 and 16), and maybe it's also an issue with macOS Safari.
Mobile chrome works, but still, need to click on it after autofill to gain focus to show the dropdown (see below)

Case 1: When you click on the input field (originally blank), there will be an "AutoFill Contact" button. If you click on it and autofill something in, the autocomplete dropdown does not react to that. I will need to either type or remove at least one character to get it to work.

Case 2: When you have input something and see the dropdown list, after clicking "AutoFill Contact" and filling something in, it will lose focus and the dropdown disappears. When I click on the input field again, the dropdown list is shown but it's related to the data before autofill


In general, the component's input field (or ref) is not aware of the auto-filled value on iOS Safari, it's treating the input field as not being changed at all.

And on mobile Chrome, it's aware of the auto-filled value but needs to click to regain focus (this seems the expected behaviour).


I think it's not kind of an issue for this library, but since I'm using it (really appreciate the tool), I would still like to raise an issue here to see if there are some workarounds.

I do not want to use any totally un-related id, label or placeholder, hence it might be impossible to just disable the auto-fill on iOS Safari (since it seems detecting id, label or placeholder for autofill showing up in the keyboard)