[TextInput] When maxLength is full automatically focus next field

[xcarpentier]

Hello RN awesome team !

I have an issue in my app with TextInput for a bank card number (error because user not type all number 16 digits).

So I would like to cut CB number on 4 TextInputs and focus automatically on next field after filled the 4 digits. (as already seen it in the web app)

But when I focused the next field, the current became empty, even if the state is correctly set.

Do you have an idea about how can I do that or is it impossible ?

ie. see the onChangeText on this example (exp date actually) :

<TextInput
    ref='card_exp_date_mm'
    style={[styles.inputTxt, {width: 30, flex: 0}]}
    value={this.state.cardExpDateMonth}
    keyboardType='numbers-and-punctuation'
    placeholder='MM'
    returnKeyType='next'
    clearTextOnFocus={false}
    autoCorrect={false}
    placeholderTextColor={Constants.placeholderTextColor}
    maxLength={2}
    enablesReturnKeyAutomatically={true}
    blurOnSubmit={false}
    onChangeText={text => {
      this.setState({cardExpDateMonth: text})
      //console.log('onChangeText', this.refs.card_exp_date_mm)
      if(text && text.length == 2){
        this.refs.card_exp_date_aa.focus();
      }
    }}
    onSubmitEditing={()=>this.refs.card_exp_date_aa.focus()}/>

Thanks by advance for your help.

[facebook-github-bot]

Hey xcarpentier, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If you don't know how to do something or something is not working as you expect but not sure it's a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• If this is a feature request or a bug that you would like to be fixed, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• We welcome clear issues and PRs that are ready for in-depth discussion. Please provide screenshots where appropriate and always mention the version of React Native you're using. Thank you for your contributions!

[browniefed]

@facebook-github-bot stack-overflow

[facebook-github-bot]

Hey @xcarpentier and thanks for posting this! @browniefed tells me this issue looks like a question that would be best asked on StackOverflow. StackOverflow is amazing for Q&A: it has a reputation system, voting, the ability to mark a question as answered. Because of the reputation system it is likely the community will see and answer your question there. This also helps us use the GitHub bug tracker for bugs only. Will close this as this is really a question that should be asked on SO.

[xcarpentier]

Already did it : http://stackoverflow.com/questions/35085917/textinput-when-maxlength-is-full-automatically-focus-next-field

[browniefed]

@xcarpentier sorry about that, we did an issue clean up over the weekend. We are trying to keep react-native github issues focused on actual bugs.
That being said .22 was just released, I'd recommend upgrading to that and seeing if it fixes your issues.

If that doesn't create a simple reproduction on http://rnplay.org so it is easier for people to run and debug. Without full code to look at it is very difficult to help you.

[Raktima]

@xcarpentier How did u solve your issue? Please explain. I followed ur link to stackoverflow. It does throw some light on how to move to next text field. But how do i check if max length is reached?