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

Comments

@aksonov
Copy link

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

This comment has been minimized.

Copy link

commented Feb 10, 2016

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

This comment has been minimized.

Copy link

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 was marked as resolved.

Copy link
Contributor

commented Apr 10, 2016

@facebook-github-bot

This comment was marked as outdated.

Copy link

commented Apr 10, 2016

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 comment has been minimized.

Copy link
Collaborator

commented Apr 26, 2016

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

@charpeni

This comment has been minimized.

Copy link
Collaborator

commented May 20, 2016

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

@charpeni

This comment was marked as resolved.

Copy link
Collaborator

commented May 20, 2016

@ghost

This comment was marked as resolved.

Copy link

commented May 20, 2016

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

@ghost ghost closed this May 20, 2016

@ghost ghost added the Ran Commands label May 20, 2016

@sunnylqm

This comment has been minimized.

Copy link
Contributor

commented Jun 3, 2016

Still exists in 0.26.
qq 20160603133122
qq 20160603133127

@grabbou @charpeni

@sunnylqm

This comment was marked as resolved.

Copy link
Contributor

commented Jun 3, 2016

@johnwonder

This comment was marked as outdated.

Copy link

commented Jun 23, 2016

Still exists in 0.27

@jevakallio

This comment has been minimized.

Copy link
Contributor

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 was marked as outdated.

Copy link

commented Aug 2, 2016

Yup, still exists on 0.31-rc

@rkostrab

This comment has been minimized.

Copy link

commented Aug 3, 2016

I've written a thread about this.

@kacperpotega

This comment has been minimized.

Copy link

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 was marked as outdated.

Copy link
Collaborator

commented Sep 22, 2016

@ghost

This comment was marked as outdated.

Copy link

commented Sep 22, 2016

Okay, reopening this issue.

@ghost ghost reopened this Sep 22, 2016

@ghost ghost added the Ran Commands label Sep 22, 2016

@ericnakagawa

This comment was marked as outdated.

Copy link
Contributor

commented Jan 10, 2017

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 comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link
Contributor

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

This comment has been minimized.

Copy link
Collaborator

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.

@sghosh968

This comment has been minimized.

Copy link

commented May 9, 2018

@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

This comment was marked as outdated.

Copy link

commented May 22, 2018

I'm having the same problem:

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

this is not changing the cursor position.

@zhonggithub

This comment was marked as resolved.

Copy link

commented Jun 22, 2018

I having same problem .
the react native version is 0.55.4

@sghosh968

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link
Contributor

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

This comment has been minimized.

Copy link

commented Aug 2, 2018

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

@sghosh968

This comment has been minimized.

Copy link

commented Aug 28, 2018

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

This comment has been minimized.

Copy link
Contributor

commented Aug 28, 2018

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

This comment has been minimized.

Copy link

commented Sep 26, 2018

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

@tuannguyenhoangit

This comment has been minimized.

Copy link

commented Oct 22, 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

0.55.4 still get issue

@bhaskarvgurram

This comment has been minimized.

Copy link

commented Nov 30, 2018

I have the same issue on 0.57.5

@bhaskarvgurram

This comment has been minimized.

Copy link

commented Nov 30, 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

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

@hramos hramos removed the 🔶Components label Jan 24, 2019

@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 added a commit to ericlewis/react-native that referenced this issue Feb 22, 2019

facebook-github-bot added a commit that referenced this issue Feb 22, 2019

Toggle secureTextEntry cursor spacing (#23524)
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

This comment has been minimized.

Copy link

commented Feb 23, 2019

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 added a commit that referenced this issue Feb 27, 2019

Toggle secureTextEntry cursor spacing (#23524)
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

This comment has been minimized.

Copy link
Collaborator

commented Feb 28, 2019

Fixed: #23524.

@ericlewis ericlewis closed this Feb 28, 2019

@react-native-bot react-native-bot added the Bug label May 4, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.