[TextInput] Dynamic changing of secureTextEntry breaks font and doesn't change cursor position

[aksonov]

I need to have show/hide password option for TextInput.
Dynamic changing of secureTextEntry breaks font and doesn't change cursor position. It probably happens because font for "*" is fixed and it is not changed back when securyTextEntry is false.

[facebook-github-bot]

Hey aksonov, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If you don't know how to do something or something is not working as you expect but not sure it's a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• If this is a feature request or a bug that you would like to be fixed, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• We welcome clear issues and PRs that are ready for in-depth discussion. Please provide screenshots where appropriate and always mention the version of React Native you're using. Thank you for your contributions!

[kocyigityunus]

(edit by @hramos: link to Snack with repro: https://snack.expo.io/Bk1CsdRE7)

You are right. that's definitely a bug. But checkout my solution below.

Add a space character to text and delete it again. the cursor will be at the right position.

/*jslint node: true */
'use strict';
import React, {
  Component,
  StyleSheet,
  View,
  TextInput,
  Switch
} from 'react-native';

class Example extends Component {
  constructor( props) {
    super(props);

    this.state = {
      isSecureTextEntry : true,
      password : '123456'
    };
  }

  render() {
    return (
      <View style={{
          flex : 1,
          backgroundColor : '#F5FCFF'
        }}>
        <Switch
          onValueChange={(value) =>{
            this.setState({isSecureTextEntry: value});
            this.setState({ password : this.state.password + ' ' });
            this.setState({ password : this.state.password.substring(0, this.state.password.length - 1)});
            }}
          style={{marginLeft: 20, marginTop : 50}}
          value={this.state.isSecureTextEntry}
          />
          <TextInput
            style={{ height: 40, borderColor: 'gray',
              borderWidth: 1, marginLeft : 20, marginTop : 50}}
            onChangeText={(text) => this.setState({password : text})}
            secureTextEntry = {this.state.isSecureTextEntry}
            value={this.state.password}
            />
      </View>
    );
  }
}

module.exports = Example;

[grabbou]

This is going to be fixed by #6564 I believe.

[charpeni]

@grabbou You're right, #6564 has landed into 0.26.

[sunnylqm]

Still exists in 0.26.

@grabbou @charpeni

[jevakallio]

Appears to still exist in 0.30, as reported in this SO question.

I also previously reported this with dupe #5710.

@charpeni could we consider reopening this?

[rkostrab]

I've written a thread about this.

[kacperpotega]

Still exists in 0.33.0.

I'm also experiencing an additional issue when updating secureTextEntry dynamically. When changing from false to true, the text passed into the onChangeText function is empty when additional text is typed.

//edit: Just built the same screen in native code (Swift on iOS.) Turns out my "additional issue" is just the native iOS behaviour. The font issue ALSO appears in native iOS code. What solved it for me was to blur the input field before switching the secureTextEntry prop and then focus it again. In this case the input field keeps its custom font.

[diegorodriguesvieira]

This bug still happens on iOS version 9.3 (iPhone 4S)

In iOS 10.2.1 it works...

@ericnakagawa

[sunweiyang]

This is still happening on RN 0.50.4 -- any updates?
@ericnakagawa please let us know if someone can be found to investigate.

[grabbou]

I've reopened this issue. If you are thinking of contributing this fix, please let me know - I am more than happy to help you and give as many ideas as possible.

[sghosh968]

This is for those who were facing the following issue.
On Android when dynamically updating secureTextEntry for a TextInput cursor moves to position zero every time.
It has been fixed in v0.54.0.
Link to commit : 09b43e4

[hramos]

You can find a full repro of this here: https://snack.expo.io/Bk1CsdRE7
Credit to @kocyigityunus for the original repro at #5859 (comment) above.

Repro steps:

1. Open app.
2. Tap switch to off position, observe "12345" instead of "123456" in text field as expected.
3. Tap switch back to on, then off position. Observe "1234" this time around. Rinse, repeat

[andrejcesen]

@sghosh968 I am still experiencing this issue in RN v0.56.0. Could you post an example where this is working as expected?

[sghosh968]

Sorry for posting without checking first looking at the gif it seemed the issue was fixed, should have checked first. @andrejcesen, I recently upgraded an app from v0.52 to 0.56 and found the issue still persists.

[lucasbento]

PR #18587 fixes this, I just need a hand from a maintainer/someone who knows more of Objective-C to reiterate based on @janicduplessis requests.

[AnitaSinghLoved]

DIRTY HACK
just changing the fontSize will do the trick:
fontSize: (this.state.showPassword) ? 24 : 23

[tuannguyenhoangit]

This is for those who were facing the following issue.
On Android when dynamically updating secureTextEntry for a TextInput cursor moves to position zero every time.
It has been fixed in v0.54.0.
Link to commit : 09b43e4

0.55.4 still get issue

[bhaskarvgurram]

I have the same issue on 0.57.5

[bhaskarvgurram]

You can find a full repro of this here: https://snack.expo.io/Bk1CsdRE7
Credit to @kocyigityunus for the original repro at #5859 (comment) above.

Repro steps:

1. Open app.
2. Tap switch to off position, observe "12345" instead of "123456" in text field as expected.
3. Tap switch back to on, then off position. Observe "1234" this time around. Rinse, repeat

The issue is still not resolved. You can check it here : https://snack.expo.io/Bk1CsdRE7

[CatapultJesse]

You can find a full repro of this here: https://snack.expo.io/Bk1CsdRE7
Credit to @kocyigityunus for the original repro at #5859 (comment) above.

Repro steps:

1. Open app.

2. Tap switch to off position, observe "12345" instead of "123456" in text field as expected.

3. Tap switch back to on, then off position. Observe "1234" this time around. Rinse, repeat

i think this is because you're not using the setState callback, should be:

this.setState({ password : this.state.password + ' ' }, () => {
              this.setState({ password : this.state.password.substring(0, this.state.password.length - 1)});
            });

Can't get it to reproduce on android s8

[ericlewis]

Fixed: #23524.