iOS (React Native) password autofill takes wrong field for username

Question

In my react native application, I'm having trouble saving login and password to a keychain. It's functional, however, it's saving the incorrect username.

Email, First Name, Last Name, Password, and Confirm Password are the text boxes in my order for the signup page.

However, I gave the email field textContentType='username' and the password field textContentType='password'. However, it uses the last name as a username by default. It seems to ignore my textContentType.

I'm aware that similar problems have been raised in the community, but I'm looking for any updates or possible solutions rather than rearranging the fields?

Answer 1

Keychain takes Password and input right before password, in your case is Last Name. Try to reorder the form input positions.

Answer 2

I'm having a similar issue, but in my case I only need to autocomplete the password field and it is autocompleting whatever field I have above even if I disable the completion with textContentType="none" and autoComplete="off".

Did a workaround by adding a dummy field in the middle, which works as a distractor. In that way whenever I autofill with the password manager, only the password input and the dummy input get autocompleted and it leaves the input I needed untouched as it was.

<TextInput textContentType='telephoneNumber' />

<TextInput textContentType='none' autoCorrect={false} spellCheck={false} style={{ width: 1, height: 1 }} />

<TextInput textContentType='password' />

Notice the width: 1, height: 1. If you hide it completely with values 0 or opacity: 0, it won't work as iOS seems to be smart enough to know you actually don't have any input visible.