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

[Android] textinput: Maintain cursor position when secureTextEntry toggles. #17851

Conversation

jainkuniya
Copy link
Contributor

Motivation

On current master, text input cursor resets to start when secureTextEntry prop toggles on Android. This motivate me to maintain position when secureTextEntry prop toggles for better user experience.

On current master
ezgif com-video-to-gif-3

Test Plan

On this PR
ezgif com-video-to-gif-4

Release Notes

[ANDROID] [BUGFIX] [TextInput] - Fix: cursor positions resets to start on toggling secureTextEntry prop.

@facebook-github-bot
Copy link
Contributor

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need the corporate CLA signed.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

@pull-bot
Copy link

pull-bot commented Feb 4, 2018

@facebook-github-bot label iOS

Generated by 🚫 dangerJS

@facebook-github-bot facebook-github-bot added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. cla signed labels Feb 4, 2018
@facebook-github-bot
Copy link
Contributor

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

@jainkuniya jainkuniya changed the title [Android] textinput: Maintain cursor position on secureTextEntry toggles. [Android] textinput: Maintain cursor position when secureTextEntry toggles. Feb 6, 2018
Copy link
Contributor

@janicduplessis janicduplessis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for improving this!

I would like to avoid changing the way we make the text input a password field, I think it would be possible to keep using updateStagedInputTypeFlag and instead do the selection position logic when we commit the input flags here https://github.com/jainkuniya/react-native/blob/c7a678947587488183e855fe56d53325d8ca08c8/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java#L310. As a bonus it might prevent the selection from changing when changing the keyboardType also.

@janicduplessis
Copy link
Contributor

We could also preserve the selection end while at it :)

@jainkuniya jainkuniya force-pushed the textinput-android-maintain-cursor-position branch from c7a6789 to 89e28bb Compare February 7, 2018 14:41
@jainkuniya
Copy link
Contributor Author

hi @janicduplessis Thanks for the review
I have updated PR :)
Now we are preserving both start and end selection positions when flags toggles :)
Let me know other changes.

@janicduplessis
Copy link
Contributor

Looks good, thanks!

@facebook-github-bot shipit

@facebook-github-bot facebook-github-bot added the Import Started This pull request has been imported. This does not imply the PR has been approved. label Feb 7, 2018
Copy link
Contributor

@facebook-github-bot facebook-github-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@janicduplessis is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

Plo4ox pushed a commit to Plo4ox/react-native that referenced this pull request Feb 17, 2018
Summary:
<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.

Help us understand your motivation by explaining why you decided to make this change.

You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html

Happy contributing!

-->

On current [master](https://github.com/facebook/react-native/tree/8235a49a33cc8e84cd4ba1cc15bc09eed6712b4c), text input cursor resets to start when `secureTextEntry` prop toggles on Android. This motivate me to maintain position when `secureTextEntry ` prop toggles for better user experience.

On current [master](https://github.com/facebook/react-native/tree/8235a49a33cc8e84cd4ba1cc15bc09eed6712b4c)
![ezgif com-video-to-gif-3](https://user-images.githubusercontent.com/18511177/35776882-bdc3b182-09ca-11e8-8f4e-218fae0a24a1.gif)

On this PR
![ezgif com-video-to-gif-4](https://user-images.githubusercontent.com/18511177/35776883-be082d94-09ca-11e8-9424-6164110bdf03.gif)

[ANDROID] [BUGFIX] [TextInput] - Fix: cursor positions resets to start on toggling `secureTextEntry` prop.

<!--
Help reviewers and the release process by writing your own release notes

**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**

  CATEGORY
[----------]        TYPE
[ CLI      ]   [-------------]      LOCATION
[ DOCS     ]   [ BREAKING    ]   [-------------]
[ GENERAL  ]   [ BUGFIX      ]   [-{Component}-]
[ INTERNAL ]   [ ENHANCEMENT ]   [ {File}      ]
[ IOS      ]   [ FEATURE     ]   [ {Directory} ]   |-----------|
[ ANDROID  ]   [ MINOR       ]   [ {Framework} ] - | {Message} |
[----------]   [-------------]   [-------------]   |-----------|

[CATEGORY] [TYPE] [LOCATION] - MESSAGE

 EXAMPLES:

 [IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
 [ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
 [CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
 [DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
 [GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
 [INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closes facebook#17851

Differential Revision: D6925711

Pulled By: hramos

fbshipit-source-id: 6d53ad2dbed2dca20cd21e5b1b0578be13a91aad
@ravirajn22
Copy link

@janicduplessis and @jainkuniya this commit does not fix the issue completely in Android, I am still getting it in v0.55.3. Check out this thread #18377 for more info.

@jainkuniya
Copy link
Contributor Author

Hi @ravirajn22 there is a follow up PR for this #17990. It will be fixed once #17990 gets merged.

facebook-github-bot pushed a commit that referenced this pull request Oct 10, 2024
…46948)

Summary:
On Android, when `ReactEditText` is attached to window, `setTextIsSelectable` moves the caret to the beginning, so we need to restore the selection.

This is similar to what we did in #17851.

Fixes #46943

## Changelog:

[ANDROID] [FIXED] - Fix TextInput caret moving to the beginning when attached to window

Pull Request resolved: #46948

Test Plan:
Code to reproduce in RNTester:

```TSX
import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
import {TextInput} from 'react-native';
import {useEffect, useRef} from 'react';

function Playground() {
  const input = useRef(null);
  useEffect(() => { setTimeout(() => input.current?.focus(), 1000); }, []);
  return <TextInput ref={input} value='1.00' selection={{start: 4, end: 4}} />;
}

export default ({
  title: 'Playground',
  name: 'playground',
  render: (): React.Node => <Playground />,
}: RNTesterModuleExample);
```

Before | After
-- | --
![Screenshot_1728553990](https://github.com/user-attachments/assets/382cf3ec-7437-4b0d-8c15-c8923d677afd) | ![Screenshot_1728553884](https://github.com/user-attachments/assets/9883e966-e9b8-4f8a-bedb-6ee43880d482)

Reviewed By: cortinico

Differential Revision: D64175774

Pulled By: rshest

fbshipit-source-id: ef9fdbecca582c8075bcdfd2d9b810b04d87e3d9
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Import Started This pull request has been imported. This does not imply the PR has been approved.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants