Skip to content

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

Closed
@phil714

Description

@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);

Activity

urska19

urska19 commented on Apr 13, 2017

@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

hramos commented on Jul 25, 2017

@hramos
Contributor

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

ryanab commented on Dec 1, 2017

@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

lchapoy commented on Dec 14, 2017

@lchapoy

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

ryanab

ryanab commented on Dec 14, 2017

@ryanab

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

lchapoy

lchapoy commented on Dec 14, 2017

@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

GitHubTracey commented on Jan 30, 2018

@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

ryanab commented on Jan 30, 2018

@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

GitHubTracey commented on Jan 30, 2018

@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

nateReiners commented on Feb 7, 2018

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

ryanab commented on Feb 7, 2018

@ryanab
nateReiners

nateReiners commented on Feb 7, 2018

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

9 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @shergin@hramos@Draccan@altaf933@urska19

        Issue actions

          Toggling secureTextEntry between true and false cause text to disappear on iOS · Issue #12939 · facebook/react-native