Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
aksonov opened this issue Feb 10, 2016 · 47 comments
Labels
Bug Component: TextInput Related to the TextInput component. Good first issue Interested in collaborating? Take a stab at fixing one of these issues. Help Wanted :octocat: Issues ideal for external contributors. Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot. Resolution: PR Submitted A pull request with a fix has been provided.

Comments

@aksonov
Copy link

aksonov commented Feb 10, 2016

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
Copy link
Contributor

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
Copy link

kocyigityunus commented Feb 10, 2016

(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

This comment has been minimized.

@facebook-github-bot

This comment has been minimized.

@facebook-github-bot facebook-github-bot added the Ran Commands One of our bots successfully processed a command. label Apr 10, 2016
@grabbou
Copy link
Contributor

grabbou commented Apr 26, 2016

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

@charpeni
Copy link
Contributor

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

@charpeni

This comment has been minimized.

@ghost

This comment has been minimized.

@ghost ghost closed this as completed May 20, 2016
@ghost ghost added the Ran Commands One of our bots successfully processed a command. label May 20, 2016
@sunnylqm
Copy link
Contributor

sunnylqm commented Jun 3, 2016

Still exists in 0.26.
qq 20160603133122
qq 20160603133127

@grabbou @charpeni

@sunnylqm

This comment has been minimized.

@johnwonder

This comment has been minimized.

@jevakallio
Copy link
Contributor

jevakallio commented Aug 1, 2016

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?

@mmazzarolo

This comment has been minimized.

@rkostrab
Copy link

rkostrab commented Aug 3, 2016

I've written a thread about this.

@kacperpotega
Copy link

kacperpotega commented Sep 21, 2016

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

This comment has been minimized.

@ghost

This comment has been minimized.

@ghost ghost reopened this Sep 22, 2016
@ghost ghost added the Ran Commands One of our bots successfully processed a command. label Sep 22, 2016
@ericnakagawa

This comment has been minimized.

@diegorodriguesvieira
Copy link

diegorodriguesvieira commented Feb 24, 2017

This bug still happens on iOS version 9.3 (iPhone 4S)
image
screenshot 2017-02-24 08 46 33

In iOS 10.2.1 it works...

@ericnakagawa

@sunweiyang
Copy link
Contributor

sunweiyang commented Dec 13, 2017

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

@grabbou grabbou reopened this Dec 14, 2017
@grabbou
Copy link
Contributor

grabbou commented Dec 14, 2017

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.

@zhonggithub

This comment has been minimized.

@sghosh968
Copy link

sghosh968 commented Jul 30, 2018

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
Copy link
Contributor

hramos commented Aug 1, 2018

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

@hramos hramos added Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. and removed 📋No Repro Steps labels Aug 1, 2018
@andrejcesen
Copy link

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

@sghosh968
Copy link

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
Copy link
Contributor

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
Copy link

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

@hramos hramos added the Resolution: PR Submitted A pull request with a fix has been provided. label Sep 26, 2018
@tuannguyenhoangit
Copy link

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
Copy link

I have the same issue on 0.57.5

@bhaskarvgurram
Copy link

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

@hramos hramos removed the Bug Report label Feb 6, 2019
ericlewis added a commit to ericlewis/react-native that referenced this issue Feb 18, 2019
cpojer pushed a commit to ericlewis/react-native that referenced this issue Feb 22, 2019
facebook-github-bot pushed a commit that referenced this issue Feb 22, 2019
Summary:
This is a fix for #5859, based on the feedback in #18587. Instead of using `didSetProps` it uses a setter. I will also note that setting to `nil` no longer works (crashes) so setting it to a blank string then back to the original works fine.

[iOS] [Fixed] - Toggling secureTextEntry correctly places cursor.
Pull Request resolved: #23524

Differential Revision: D14143028

Pulled By: cpojer

fbshipit-source-id: 5f3203d56b1329eb7359465f8ab50eb4f4fa5507
@CatapultJesse
Copy link

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

grabbou pushed a commit that referenced this issue Feb 27, 2019
Summary:
This is a fix for #5859, based on the feedback in #18587. Instead of using `didSetProps` it uses a setter. I will also note that setting to `nil` no longer works (crashes) so setting it to a blank string then back to the original works fine.

[iOS] [Fixed] - Toggling secureTextEntry correctly places cursor.
Pull Request resolved: #23524

Differential Revision: D14143028

Pulled By: cpojer

fbshipit-source-id: 5f3203d56b1329eb7359465f8ab50eb4f4fa5507
@ericlewis
Copy link
Contributor

Fixed: #23524.

@facebook facebook locked as resolved and limited conversation to collaborators Feb 28, 2020
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Feb 28, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Bug Component: TextInput Related to the TextInput component. Good first issue Interested in collaborating? Take a stab at fixing one of these issues. Help Wanted :octocat: Issues ideal for external contributors. Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot. Resolution: PR Submitted A pull request with a fix has been provided.
Projects
None yet
Development

Successfully merging a pull request may close this issue.