Set focus on next TextInput when user used Autofill

user_16858976 0
Viewed 139

Is there a way in React Native to shift focus if the user used Autofill for a TextInput?

For example I have two TextInputs, one for firstname and one for lastname. If the user press "John" from the autofill suggestion, I would like the focus to shift to the other input for the lastname to prevent having to click "Next" or actively click on the next input.

Example code:

<TextInput
    ref={firstNameRef}
    textContentType='givenName'
    returnKeyType='next'
    blurOnSubmit={false}
    onSubmitEditing={() => lastNameRef.current?.focus()}
/>

<TextInput
    ref={lastNameRef}
    textContentType='familyName'
/>

So I know my onSubmitEditing() handles the shift of focus when the user press "Return/Next", and I was hoping Autofill would trigger this as well, but it doesn't of course. I also tried it with onEndEditing={() => lastNameRef.current?.focus()} but it doesn't get triggered by Autofill either.

Is what I'm trying to do possible in React Native, and is it only iOS specific? Because I know the 'textContentType' is for iOS, but I would love for a solution for Android as well if there is one.

[EDIT]

Found kind of a hot fix that will have to do for now:

const [firstname, setFirstname] = useState<string>('')

onChangeText={(value: string) => {
    value.length - firstname.length > 1
    ? (lastnameInput.current?.focus(),
      setFirstname(value))
    : setFirstname(value)
}}

Checking the length of the input against the length of firstname, the code decides that if the input value was increased with more than one letter the user used Autofill (or Word Suggestion)

react-native typescript android ios
1 Answers

Can we do like this, using a state which stores a boolean value if true then set the focus of next input. So when entering the first name if user click on a suggestion set that state boolean state to true and use that state to focus the last name.

user_101743060
Related