returnKeyType="next" doesn't move to next TextInput anymore

[Nantris]

React Native Version: 0.59.8 (Expo)

React Native version:
  React Native Environment Info:
    System:
      OS: Windows 7
      CPU: (2) x64 Intel(R) Core(TM) i5-4690K CPU @ 3.50GHz
      Memory: 4.53 GB / 13.75 GB
    Binaries:
      Yarn: 1.15.2 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
      npm: 6.2.0 - C:\Users\User\AppData\Roaming\npm\npm.CMD
    IDEs:
      Android Studio: Version  2.3.0.0 AI-162.3871768

Physical device, Pixel 2, running Android 9. Using Google's GBoard.

Steps To Reproduce

1. Run this Expo Snack: https://snack.expo.io/S1XcHwA-H
2. Select the first TextInput
3. Press the returnKey

Describe what you expected to happen:

Previously I had no problem with returnKeyType="next" moving to the next text field

Snack, code example, or link to a repository:

https://snack.expo.io/S1XcHwA-H (Same as above)

[kiranjd]

If you want to focus on the next text input, first you have to get ref of that TextInput component like this,

          ref={ref => {
            this.secondInput = ref;
          }}

Specifying returnKeyType will only change which icon will be displayed on the keyboard. To incorporate functionality you have to know when the user has submitted using onSubmitEditing.

onSubmitEditing={() => this.secondInput.focus()}

When user presses the return key it will focus on the ref you have provided i.e., secondInput.

You can refer to this snack for working example

[Nantris]

Weird. What I was doing worked perfectly for me 2 months ago before I upgraded Expo (from version 31, React Native 0.57). I only used onSubmitEditing on my final field on each screen to handle submission. I tested it and was happy with how it worked.

Am I crazy? The keyboard would stay up and the next field would be focused when I hit the return key, without any use of refs or onSubmitEditing

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

[elicwhite]

I'm reopening this because I think this is a real problem that would be great to nail down. I'd really appreciate any sort of granular bisect that showed what version this bug was introduced in.

[Nantris]

This is welcome news. I was doubting my sanity a little bit over this issue back in July.

[elicwhite]

I tried creating a project with 0.57.8 (based on your comment in July). It doesn't seem to work on that version either.

npx react-native-cli init textinputnext057 --version 0.57.8
cd textinputnext057/
npx react-native-cli run-android
npx react-native-cli start

With App.js of:

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, TextInput, View} from 'react-native';

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <TextInput placeholderTextColor="#666" placeholder="First" style={styles.input} returnKeyType="next" />
        <TextInput placeholderTextColor="#666" placeholder="Second" style={styles.input} returnKeyType="next" />
        <TextInput placeholderTextColor="#666" placeholder="Third" style={styles.input} returnKeyType="next" />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  input: {
    padding: 20,
    margin: 20,
    backgroundColor: 'rgba(255,100,100,.5)'
  }
});