Keyboard language changing with multiple TextInput with secureTextEntry

[ishigamii]

Environment

$ react-native info

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
      Memory: 224.74 MB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 8.11.2 - ~/.nvm/versions/node/v8.11.2/bin/node
      Yarn: 1.9.4 - /usr/local/bin/yarn
      npm: 5.6.0 - ~/.nvm/versions/node/v8.11.2/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
      Android SDK:
        API Levels: 17, 21, 23, 25, 26, 27
        Build Tools: 23.0.1, 23.0.3, 24.0.1, 25.0.0, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.1, 27.0.3
        System Images: android-25 | Google APIs Intel x86 Atom_64
    IDEs:
      Android Studio: 3.1 AI-173.4907809
      Xcode: 10.0/10A255 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.1 => 16.6.1
      react-native: 0.57.7 => 0.57.7

Description

First of all this issue is related to the latest version of iOS starting with iOS 12.0, iOS 12.1 and more (I wasn't experimenting this issue using the iOS 11.1 or 10.X)

It seems that the secureTextEntry change the keyboard locale on IOS when there is one field in form who's not secure.

My current project is using react-native 55.4 and I am having the same problem with it.
For my test I created a new project with the newest version of react-native 👍

Reproducible Demo

To reproduce this bug you just have to make a fresh installation as mentioned before with this command :

react-native init test577

Then you have to change the language of the iPhone to put it in French (maybe the issue is same with other language but I was testing with French).

To do so go to Setttings > General > Language and Region. Then change the language of the iPhone to French and the region to French (maybe the region can't be ignored). You should have something like this :

Here is a reminder of the configuration of the default project is and the code I am using :

Package.json

{
  "name": "test577",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.6.1",
    "react-native": "0.57.7"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.50.0",
    "react-test-renderer": "16.6.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

Code

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

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

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <TextInput placeholder={'email'} />
        <TextInput secureTextEntry={true} placeholder={'password'} />
        <TextInput secureTextEntry={true} placeholder={'confirm password'} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Just the simple default example with the bug as describe before.

In addition we can see that the problem seems to be cause by the secureTextEntry={true} only when you have two or more (the behavior is actually not very logical)

So if you change the code and keep only two fields as follow, it will work perfectly :

Works

        <TextInput placeholder={'email'} />
        <TextInput secureTextEntry={true} placeholder={'password'} />

Same with only secureTextEntry two or as much as you want will work properly :

Works

        <TextInput secureTextEntry={true} placeholder={'password'} />
        <TextInput secureTextEntry={true} placeholder={'confirm password'} />
       ...

As soon as you add two TextInput with a secureTextEntry with one field that isn't a secureTextEntry the keyboard starts to bug as described.

With Three :

Doesn't Works

        <TextInput placeholder={'email'} />
        <TextInput secureTextEntry={true} placeholder={'password'} />
        <TextInput secureTextEntry={true} placeholder={'confirm password'} />
        <TextInput secureTextEntry={true} placeholder={'reconfirm password'} />

The first one and last one keeps the keyboard as it is and the two others change the keyboard.

So one way to "deal" with it to make it works is by adding a line in between the secureTextEntry as follow :

Works

        <TextInput placeholder={'email'} />
        <TextInput secureTextEntry={true} placeholder={'password'} />
        <TextInput placeholder={'foo'} />
        <TextInput secureTextEntry={true} placeholder={'confirm password'} />

In this case the keyboard keeps working properly.
I so tried to add the field and hide it with style :

Works

<TextInput placeholder={'foo'} style={{height:1}}/>

Doesn't Works

<TextInput placeholder={'foo'} style={{height:0}}/>

Changing the order of the fields also seems to make it work again :

Works

        <TextInput secureTextEntry={true} placeholder={'password'} />
        <TextInput secureTextEntry={true} placeholder={'confirm password'} />
        <TextInput placeholder={'email'} />

I also tried with other elements like a View or a Text but didn't work with these elements.

Hope all this informations will be helping to correct this bug that is pretty annoying
And that is reproduce on both Simulator and Device

Related Issue
#21572

[notFloran]

It looks like it's related to this: https://stackoverflow.com/questions/52701160/native-uitextfield-secure-text-entry-forces-english-us-keyboard

[ishigamii]

Still happening with the new version :

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
      Memory: 3.55 GB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 8.11.2 - ~/.nvm/versions/node/v8.11.2/bin/node
      Yarn: 1.9.4 - /usr/local/bin/yarn
      npm: 5.6.0 - ~/.nvm/versions/node/v8.11.2/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 17, 21, 23, 25, 26, 27
        Build Tools: 23.0.1, 23.0.3, 24.0.1, 25.0.0, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.1, 27.0.3, 28.0.2, 28.0.3
        System Images: android-25 | Google APIs Intel x86 Atom_64
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5056338
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.3 => 16.6.3
      react-native: 0.58.1 => 0.58.1

Will try on the new iOS 12.1.3 to see how it goes.

[ishigamii]

Same bug happening with latest version of iOS : 12.1.3

[alloy]

Thanks for the detailed information and also adding it to #21572. In an effort to reduce noise in the issue tracker, and also because this appears to be an iOS bug, we’re closing this issue.