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)'
  }
});

[elicwhite]

0.55.4 seems to have the same problem. Clicking next closes the keyboard and doesn't focus the next input.

npx react-native-cli init textinputnext055 --version 0.55.4
cd textinputnext055/
npx react-native-cli run-android
npx react-native-cli start

[elicwhite]

I believe this functionality was added in this commit dd8caf4 which first went out in 0.27.

I was able to get a project set up on 0.27.2 (which I'm shocked I was able to get working) and it shows the next button, but has the same problem. Are we sure this has ever worked?

If you could find a repro of this working at some point, that would be pretty helpful. :D

[Nantris]

Unfortunately I don't have a repo to show. I also can't be 100% sure this ever worked in plain React-Native since I've always used Expo. I'm 99.9% sure this was working in the past with Expo though. I'd have no doubt at all except for all the evidence that this supposedly never worked.

After being assured that nothing changed on Expo's end I opened this issue figuring the issue must be somewhere deeper

It's possible that this previously worked as a result of something Expo was doing, but I didn't think it seemed likely that they'd touch that sort of very niche logic.

My specific recollection is that I was able to use the return key to move to the next input on my login/signup form of 2-3 inputs and being happy with the functionality. Back then my app was in such rough shape that inputs would often end up behind the keyboard, and I remember using the return key to move to those fields behind the keyboard. I wonder if some mix of Android version and React-Native version could have any bearing?

I truly believe this used to work, but substantial evidence seems to indicate that it did not. Perhaps this is a failure of human memory, but I'm having a hard time accepting it if that's the case, but it can't be ruled out.

[elicwhite]

Thanks for the follow up!

So the return key has the correct behavior but not next? That might be a good point for us to investigate.

Regardless, it seems like this should work, just that a bisect won't help us figure out how to fix it. I think we are trying to find someone from our side to work on this.

[Nantris]

@TheSavior thanks to you for taking a look at this. Can you clarify this question if my response doesn't answer your question?

So the return key has the correct behavior but not next? That might be a good point for us to investigate.

If we define correct behavior as both displaying the next icon on the return key and moving to the next input upon pressing it, no. The icon shows, but pressing it does not move to the next input. My recollection is that the icon and the behavior worked with Expo 31 though.

[elicwhite]

Heh, I can see how that was confusing. Does the done key go to the next input or just close the keyboard?

[Nantris]

Just closes the keyboard (and that's what it used to do as well.)

[LuizFBrisighello]

Any updates?

[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.

[Nantris]

@TheSavior I assume this behavior was either introduced by something other than React Native, or I crossed into a parallel universe at some point.

With that in mind, I guess this isn't a bug - but it would be a welcome feature request. Is there any appetite for this as a feature request? It would be majorly helpful for the developer experience if there was some sort of default action like users would get in a traditional DOM.

[elicwhite]

Yeah, my guess is that this only changed the key type, but still required being wired up to go to the next input manually.

I don't know of a way to implement this generically without fixing a core issue. I think having something like web / desktop's tab support to go through focusable elements is needed and would naturally plug in here, but that is a bigger scope feature that we'll need to prioritize down the line.

As for this issue, I'm not sure there is anything actionable here now. This unfortunately needs to be wired up manually for individual apps

[Nantris]

Thanks a lot for the response @TheSavior. Looking forward to a future version where this is handled automatically, but until then, agreed - nothing actionable here. Thanks again!

[devhyunjae]

Any updates here? I also remember next was working without ref , but now it doesn't...sad

[nhutruong99]

I tried the ios version of this function, returnKeyType, works on the android platform for some reason. It does still displayed an error that android doesn't support but it works LOL