TextInput's caret always move to beginning when toggling secureTextEntry

[williamliangwl]

I am using ReactNative v.0.52.0 and currently developing a TextInput for password, but want to enable user to show / hide their typed input. The problem when toggling the value of secureTextEntry, the caret always move to the beginning of the input.

I have only tested this in Android device.

Environment

Environment:

• OS: Windows 10
• Node: 6.11.5
• Yarn: 1.3.2
• npm: 4.6.1
• Watchman: Not Found
• Xcode: N/A
• Android Studio: Version 3.0.0.0 AI-171.4443003

Packages: (wanted => installed)

• react: 16.2.0 => 16.2.0
• react-native: 0.52.0 => 0.52.0

Expected Behavior

I expect the caret will always stay at the end of the input, when toggling the secureTextEntry

Steps to Reproduce

I manage to reproduce this using a very simple code, I put it at the App.js

export default class App extends Component {

  constructor() {
    super();
    this.state = {
      showPassword: false
    };
  }

  toggleShow() {
    this.setState({
      showPassword: !this.state.showPassword
    });
  }

  render() {
    return (
      <View>
        <TextInput secureTextEntry={this.state.showPassword} />
        <Button title={'Toggle'} onPress={this.toggleShow.bind(this)} />
      </View>
    );
  }
}

[react-native-bot]

Thanks for posting this! It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest stable release?

Thank you for your contributions.

_{How to Contribute • What to Expect from Maintainers}

[williamliangwl]

@react-native-bot Yes tested in v0.54.2 and still having same issue in Android device

[williamliangwl]

I do realize that in version 0.54, a fix has been submitted, but it looks like not working although I test it using 0.54.2. The commit is 09b43e4

[williamliangwl]

@react-native-bot I don't think Old Version label is still valid here as it is tested not working in v0.54.2 and I still can't find a solution for it

[LiHaoTan]

Is there a workaround for this? It does not appear the fix works like @williamliangwl mentioned.

EDIT: for now this is the workaround I am using:

  componentDidUpdate() {
    // workaround to allow TextInput to return to end of selection after toggling secureTextEntry
    if (this.state.previousInputValue) {
      this.setState({ inputValue: this.state.previousInputValue, previousInputValue: null });
    }
  }

  <Button
  onPress={() =>
      this.setState(previousState => ({
        isSecureTextEntry: !previousState.isSecureTextEntry,
        inputValue: '',
        previousInputValue: this.state.inputValue,
      }))
  }
>

[LcsLpr]

Same issue

[minhtamwebmaster]

same issue

[vitorsilvalima]

I have the same issue too

[creambyemute]

Yeah same issue here.

Tried on 0.54.0 up to 0.55.4 and it's apparent on all these versions. The fix from 09b43e4 did somehow not solve it.

onSelectionChange event is fired twice, first with the correct values and then with the wrong values (start: 0, end: 0).

If you instead write some text while secureTextEntry=false and then toggle secureTextEntry=true then the cursor stays at the correct position.
But when you then write something again and toggle, the cursor is reset again.

[jainkuniya]

Hi, this issue will be fixed by #17990

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.