OTP Autocomplete issue (Safari)
Closed this issue · 2 comments
First off, thank you for all the work on this component - made our implementation of this feature for MFA so quick and easy.
We had a reported bug related to using the autocomplete feature on Safari (both desktop and mobile) which results in sporadic behavior / failure of code entry into the inputs. After a lot of fun, painful I mean, debugging we determined that there appeared to be a race condition with focusing on the inputs and which input was actually selected.
it's worth noting that the code which was entered was 491879. As you can see, the code is not in order and thus values were entered and then replaced since the input focus wasn't firing constantly.
This was seen both on mobile and desktop safari browsers and we're trying to confirm if this was consistent on Chrome as well.
I wanted to posted the above for record sake but we have determined what the issue was - at least for us.
The methods of selectInputContent and focusInput leverage an requestAnimationFrame and that method wraps the ref input.focus && input.select methods (as well as the blur method). When we removed this requestAnimationFrame the autocomplete works as expected and consistently.
Screen.Recording.2023-04-12.at.1.28.53.PM.mov
I am unsure of the benefits / tradeoffs of this utility, but it might be worth exploring removing if other people report this same issue.
Hi, thanks for the report.
I'm confused about the focus behavior since the component only uses one input element. Is it possible that you are using a different library?