🐛 [Android][TextInput] when combine secureTextEntry + autoCapitalize props

[cHaLkdusT]

Description

In Android, when TextInput's secureTexEntry={true} props is combined with autoCapitalize props with value (words or characters), text input is not being obscured.

React Native version:

System:
    OS: macOS 10.15.4
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 677.32 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.13.0 - /usr/local/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.8.4 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5977832
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.5 - /Users/jwblundang/.sdkman/candidates/java/current/bin/javac
    Python: 3.7.6 - /Users/jwblundang/anaconda3/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0
    react-native: 0.62.2 => 0.62.2
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

1. Create TextInput component with autoCapitalize="characters" secureTextEntry={true}
2. Create TextInput component with autoCapitalize="words" secureTextEntry={true}
3. Create TextInput component with autoCapitalize="sentences" secureTextEntry={true}
4. Create TextInput component with autoCapitalize="none" secureTextEntry={true}

Expected Results

autoCapitalized	Obscured
character	✅
words	✅
sentences	✅
none	✅

Actual Results

autoCapitalized	Obscured
character	❌
words	❌
sentences	✅
none	✅

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

Snack: https://snack.expo.io/@chalkdust/fe09af

Others

Sample code snippet:

import React, {useState} from 'react';
import {Button, StyleSheet, Text, TextInput, View} from 'react-native';

const App = () => {
  const text = 'ThisIsASamplePassword';
  const [secured, setSecured] = useState(true);
  return (
    <View style={styles.container}>
      <Text>Secured: {`${secured}`}</Text>
      <TextInput autoCapitalize="characters" secureTextEntry={secured} value={text}
      />
      <TextInput autoCapitalize="words" secureTextEntry={secured} value={text}
      />
      <TextInput
        autoCapitalize="sentences" secureTextEntry={secured} value={text}
      />
      <TextInput autoCapitalize="none" secureTextEntry={secured} value={text} />
      <Button
        title="Toggle security"
        onPress={() => setSecured(prevState => !prevState)}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default App;

Possible Related issues

#20606
#26799

[safaiyeh]

Yeah, seems like a reoccurring issue with TextInput. I made a PR for another case a while back #27523

I believe the flag system for TextInput needs to be relooked

cc @JoshuaGross

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

[cHaLkdusT]

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.

It is still an active issue.

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

[raphacmartin]

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.

It is still an active issue.

[raphacmartin]

The problem occurs only in Android

[fabOnReact]

This is the brief testing I did of this issue in the reactnative master TextInputSharedExample and did not experience this issue.
I did not try to reproduce exactly the same test scenario, instead I just added secureTextEntry

CLICK TO OPEN TESTS RESULTS

AFTER
2021-02-16.13-13-26.mp4

[1280103995]

This is the brief testing I did of this issue in the reactnative master TextInputSharedExample and did not experience this issue. I did not try to reproduce exactly the same test scenario, instead I just added secureTextEntry

CLICK TO OPEN TESTS RESULTS

If you go back to the words input box to continue typing, you will find that the original content is not overwritten.

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

[fabOnReact]

I wanted to ask if you still experience this issue.
I'm planning to do 1-2 months of opensource and I'm preparing a list of tasks.

I have been contributing to facebook/react-native for 4 years and I specialize on the Text/TextInput components.

Thanks a lot