React-native: [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;

[christopherdro]

@facebook-github-bot bugfix

[facebook-github-bot]

Hey @aksonov, we're a small team and rely on the community to fix issues that don't affect fb apps. If you're sure this is a bug can you send a pull request with a fix?

[grabbou]

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

[charpeni]

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

[charpeni]

@facebook-github-bot close

[ghost]

@charpeni tells me to close this issue. If you think it should still be opened let us know why.

[sunnylqm]

Still exists in 0.26.

@grabbou @charpeni

[sunnylqm]

@facebook-github-bot reopen

[johnwonder]

Still exists in 0.27

[jevakallio]

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

I also previously reported this with dupe https://github.com/facebook/react-native/issues/5710.

@charpeni could we consider reopening this?

[mmazzarolo]

Yup, still exists on 0.31-rc

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

[charpeni]

@facebook-github-bot reopen

[ghost]

Okay, reopening this issue.

[ericnakagawa]

Hey folks, am closing this issue as we're at v40 now. If it's still persistent, reopen this issue and I'll find someone here at Facebook to investigate.

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

[Diego-Franco]

you still having the same problem on Android @grabbou when you enable/disable the "secureTextEntry" the cursor for TextInput is moving to the position 0 of the string.

[rimallo]

Still exists.

• Adding ' ' space and removing removes last character because of 2 calls setState one after another.
• Giving blur() hides Keyboard

[jhnferraris]

I'm still experiencing the bug where cursor position resets when "secureText" prop changes

[hramos]

Tagging as a "Good first issue", please reach out to Grabbou if you are interested in working on a fix.

[grabbou]

Happy to help everyone who is interested in landing a fix for it :)

On Mon, 5 Mar 2018 at 19:56 Héctor Ramos [e-mail] wrote:

Tagging as a "Good first issue", please reach out to Grabbou if you are
interested in working on a fix.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/5859#issuecomment-370524102,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACWcxreq6UX8OnZ5oweznbuDtQ9oVqwnks5tbYpegaJpZM4HXcU7
.

[jayporta]

@grabbou I'd like to give it a shot.

[grabbou]

Go ahead. Happy to help.

On Tue, 20 Mar 2018 at 00:23 Jay Porta [e-mail] wrote:

I'd like to give it a shot.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/5859#issuecomment-374419148,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACWcxhqMIp_JpgR4ottLuase3BLUYHuBks5tgD3TgaJpZM4HXcU7
.

[lucasbento]

@grabbou: can you provide a small summary of where to fix it? Is it related to the current selection of TextInput or the font?

[lucasbento]

@grabbou: opened PR #18587, would you mind taking a look? I'm not sure if that was the best place to implement it but it does fix the problem. :)

[jayporta]

Every time I tried to fork the repo in order to work on this issue, GitHub would just display a loading graphic. I can fork other repos without a problem, so it doesn’t seem to be just a GitHub problem. Am I missing something?

[rajat-np]

I forked this repo just now. There was no problem. @jayporta

[ButuzGOL]

Temporary workaround

      this.inputRef.setNativeProps({
        selection: { start: 0, end: 0 },
      });
      this.inputRef.setNativeProps({
        selection: {
          start: passwordLength,
          end: passwordLength,
        },
      });

[sghosh968]

@ButuzGOL : I tried the temporary fix you suggested, but didn't seem to work for me.
I am invoking setNativeProps in setState callback, where I update state variable used to toggle secureTextEntry.
this.setState(prevState => ({ hidePassword: prevState.hidePassword }), () => { const currentPasswordLength = this.state.password.length; const passwordInputRef = this.inputs.password; if (passwordInputRef) { passwordInputRef.setNativeProps({ selection: { start: currentPasswordLength, end: currentPasswordLength } }); } });
I guess I am putting setNativeProps in a wrong place, not sure though.
Any help on this is greatly appreciated.

[lucasboleli]

I'm having the same problem:

.setNativeProps({ selection: { start: currentPasswordLength, end: currentPasswordLength } });

this is not changing the cursor position.

[zhonggithub]

I having same problem .
the react native version is 0.55.4

[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 : https://github.com/facebook/react-native/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 https://github.com/facebook/react-native/issues/5859#issuecomment-182584283 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 https://github.com/facebook/react-native/pull/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.