Return-key 'next' on numeric TextInput doesn't work on iOS since 2019?!?

[Hustenbonbon]

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

If using another returnKeyType then 'done' on a numeric TextInput, it isn't shown at all.

React Native version:

System:
OS: macOS 11.4
CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
Memory: 34.68 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 12.22.1 - /var/folders/pz/j_z7p6bs1gq08f42zb9x_fj00000gn/T/yarn--1625065239113-0.5195055990868227/node
Yarn: 1.22.10 - /var/folders/pz/j_z7p6bs1gq08f42zb9x_fj00000gn/T/yarn--1625065239113-0.5195055990868227/yarn
npm: 6.14.12 - ~/.nvm/versions/node/v12.22.1/bin/npm
Watchman: Not Found
Managers:
CocoaPods: 1.10.1 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
Android SDK: Not Found
IDEs:
Android Studio: 4.2 AI-202.7660.26.42.7351085
Xcode: 12.5/12E262 - /usr/bin/xcodebuild
Languages:
Java: 15.0.1 - /usr/local/opt/openjdk/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17 => 17.0.1
react-native: 0.64.1 => 0.64.1
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Create a TextInput
2. Set:
   keyboardType="numeric"
   returnKeyType={'next'}
3. Run on iOS

Expected Results

A next button in the toolbar above the keyboard

Snack, code example, screenshot, or link to a repository:

This problem seems to be occurring now for a longer time, the creator of the original issue didn't follow the template though: #26885

<TextInput keyboardType="numeric" returnKeyType={ 'done' } />

<TextInput keyboardType="numeric" returnKeyType={ 'next' } />

[ken0nek]

I think it's not a React Native issue.

We cannot display Done button and Next button when we specify Number Pad, Phone Pad, or Decimal Pad etc. even when we use UIKit.

[Hustenbonbon]

@ken0nek I don't understand how your comment and this issue are related. On a "done" return key type, react native shows a toolbar. On "next", it doesn't show a toolbar. This inconsistency looks like a bug to me and is not related to a toolbar showing at all or not on UIKit.
Please correct me if I misunderstood your comment.

[ken0nek]

Hi @Hustenbonbon, I could reproduce the toolbar behavior. I misunderstood the issue.

[ken0nek]

I could find the code where this issue happens 👍

https://github.com/facebook/react-native/blob/main/Libraries/Text/TextInput/RCTBaseTextInputView.m#L604

[ken0nek]

I worked on it a little bit and I can display "Next" button even when we specify 'next' for returnKeyType, but having trouble with how to find the next responder if any because there are no clues like view tags or refs...

I think that's why we didn't have this next button implementation in react native right now.

refs

• returnKeyType="next" doesn't move to next TextInput anymore · Issue #25721 · facebook/react-native
• ios - React Native: How to select the next TextInput after pressing the "next" keyboard button? - Stack Overflow

[Hustenbonbon]

Wow, thanks for all that investigation and trying out. I would like to help but don't know when I would find the time for this. Probably there isn't a native bridge yet

[safaiyeh]

Appreciate the investigation everyone.

[leonhoffmann86]

Try to use the InputAccessoryView for customization of the keyboard input accessory view on iOS. https://reactnative.dev/docs/inputaccessoryview

[therealgeekfruit]

You can add a property to the TextInput returnKeyType="done" if you're using it for a numeric/phone-pad input.
<TextInput keyboardType="numeric" returnKeyType="done" maxLength={10} placeholder="Phone Number" value={localPhoneNumber} />

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.