Toggling secureTextEntry between true and false cause text to disappear on iOS

[phil714]

Description

I'm trying to create a custom password input where you can toggle if you can see the password or not. The bug is that when you change between true and false on textInput, the content of the input disappear.

Reproduction

First, you need to have a textInput with secureTextEntry. Then you enter a string in the textinput. After that you set the secureTextEntry to false and then back to true and you enter another character. The field should be set empty and then the new character appear.

On android, the cursor is set to the beginning of the field you do the same steps.

Solution

I found that the onChangeText props of the TextInput return an empty string when you set secureTextEntry to true.

Additional Information

React Native version : 0.41
Platform: iOS and Android
OS : MacOS

Here's a simple example of what I'm trying to do :

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

export default class test_secureTextEntry extends Component {
  constructor(props) {
        super(props);
        this.state = {
          hidden: true
        };
    }

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          secureTextEntry={this.state.hidden}
          style={{ width: 100, height: 40, backgroundColor: 'grey' }}
        />
        <TouchableOpacity
          onPress={ () => this.setState({ hidden: !this.state.hidden })}
        >
          <Text>Go</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

AppRegistry.registerComponent('test_secureTextEntry', () => test_secureTextEntry);

[urska19]

Workaround that is working for me, is removing focus from TextInput, when user clicks show/hide password. One way to do this, is to add ref (for example ref="password") to your TextInput and then call this.refs.password.blur()

[hramos]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

[ryanab]

I just came across this issue today in React Native 44 so it still exists in some capacity I believe.

I am using the work around for the time being, perhaps I will create a new project with the latest release candidate and see if I can reproduce, and if so take a look at source and submit a PR.

[lchapoy]

I am using react-native 49.5 and the issue is still there.

[ryanab]

@lchapoy does the issue exist on both IOS and Android?

[lchapoy]

I haven't tested on Android. I am implementing the password visibility behavior and I notice that it is clearing the input when the user tries to write on it after the secureTextEntry property change from false to true.

So far I have only tested on IOS 11.2 iPhone 6 emulator.

[GitHubTracey]

Hey,

I'm a little late to the party, but I can confirm the behaviour is both in Android as well as iOS, regardless if I am doing a development or production build - and it is still present in 0.51.0.

Though I'm thinking this behaviour is also intentional for those that do not have a show/hide option for the password. (Go look at your local banking app where they don't have the option to view password).

Edit:
After reading @ryanab comments, I see that I had a bug in there! Oops! So I deleted the bad code. I also use the this.refs.password.onBlur() option to ensure the value is there, but it disappears in between toggling then typing again, which is the part I am working on.

[ryanab]

Thanks Tracey, I tried something similar but the issue I came across is handling certain edge cases. For example, when the toggle is pressed IIRC a delete char is sent through. So, we can just tell it to ignore that and use setNativeProps to set the previously saved text. But then, what if the user's first intention is to delete/backspace, now the text is not displaying what the user has typed/intended due to our hijacking the input text?

I am sure there is a work around, but it feels like there are edge cases we have not thought of and we should not be doing so much manipulation to the native behavior.

However, I am wondering if this is like you said, and is an intended behavior. The AirBNB App I noticed has the same "bug" (try it yourself type a password then hit the show/hide toggle). I know they use React Native for some portions of their app, and I was wondering if this was the same issue or if again, this is an intended behavior. Maybe someone from FB / AirBNB can chime in if they come across this!

Thanks,
Ryan

[GitHubTracey]

Hey Ryan,

Ooh... yes, the only time that I see this potentially being a problem is if the user decides to "select all" text and then delete, and type a character... then it reloads it all...hm. I'm going to have to think about it a little more. Definitely an edge case for me, but still important for the user experience!

Edit: I take that back... I see exactly what you were talking about. I'm surprised I missed that. Yup, if I clear the text on purpose, or if I backspace to clear the field, then there is a bug. Back to the drawing board for me on this one.

Thanks for the catch!

Tracey

[nateReiners]

• 1 this is still an issue for me (RN 0.50.3) and this should be re-opened

[ryanab]

If you have the airbnb app logout and give it a try, its the same issue. I know they use react native for some portions (so don’t know if this portion is), but I am wondering if this is expected behavior? Maybe for some reason this is done for security? Curious to see others thoughts.

…

On Wed, Feb 7, 2018 at 4:15 PM Nate ***@***.***> wrote: - 1 this is still an issue for me (RN 0.50.3) and this should be re-opened — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#12939 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AQH4ZBJA54K7xIGDxGRyI7lClrmwEj1Vks5tShJegaJpZM4MdJtO> .

[nateReiners]

@ryanab I have an Samsung Android phone, and the AirBnB app's password field works perfectly (does not clear on backspace after toggling the hide password prop). However, when I tried their iOS app on my iPhone6, the password field clears just like you said. Interesting. I blame Apple.

[Astarta0]

Hello everyone!
Please, can you help me?
I user RN 0.52.2,
I have TextInput for users password:

<TextInput
                                ref={(input) => {this.passwordInput = input}}
                                value={this.props.userPassword}
                                returnKeyType={'go'}
                                secureTextEntry={this.state.hidePassword}
                                autoCorrect={false}
                                autoCapitalize={'none'}
                                placeholder={'Пароль'}
                                placeholderTextColor={THEMES.blue.gray}
                                style={styles.textInput}
                                onChangeText={this.props.updateUserPasswordFromSignUp}
                                underlineColorAndroid="transparent"
                                autoComplete={false}
 />

And when secureTextEntry is false , I will see suggestions on the keyboard, but I want avoid suggestions - it takes place of screen)

[Draccan]

It could be possible that the error is in the secureTextEntry implementation? I've seen that the input is cleared on iOS even if I focus another input and then come back to the secureTextEntry input.

So it could be possible that secureTextEntry blurs and focus again input changing secureTextEntry prop value?

[ryanab]

I was looking into this again and was looking at IOS Secure Text Entry and actually think this may be the default/desired behavior by Apple for said component.

[altaf933]

I have same issue on react-native version react-native: 0.55.3