Login - Clicking the eye icon moves the cursor to the beginning

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

**Issue found when executing PR #13187

Action Performed:

1. Go to URL https://staging.new.expensify.com/
2. Enter an email address
3. Press continue
4. Enter the password
5. Click to the eye icon

Expected Result:

The cursor stays in the same place

Actual Result:

1. The cursor moves to the beginning (Web and mWeb)
2. The cursor moves to the end (iOS app)

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Desktop App
• Mobile Web

Version Number: 1.2.36.0

Reproducible in staging?: Yes

Reproducible in production?: Yes

Email or phone of affected tester (no customers):

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Bug5846573_Recording__3174.mp4

Bug5846573_13187_iOS.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @bfitzexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[markarmanus]

Proposal:

Issue:
The component resets the cursor location on setState()

Solution:

Get the previous location of the cursor before updatin the state and in the callback rest the cursor back to that location

Code:

diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js
index fe29ff79b..e5234a66f 100644
--- a/src/components/TextInput/BaseTextInput.js
+++ b/src/components/TextInput/BaseTextInput.js
@@ -187,7 +187,15 @@ class BaseTextInput extends Component {
     }
 
     togglePasswordVisibility() {
-        this.setState(prevState => ({passwordHidden: !prevState.passwordHidden}));
+        const cursorLocation = this.input.selectionStart;
+        this.setState(prevState => ({passwordHidden: !prevState.passwordHidden}), () => {
+            if (cursorLocation && this.input.setSelectionRange) {
+                setTimeout(() => {
+                    this.input.setSelectionRange(cursorLocation, cursorLocation);
+                }, 0);
+            }
+            return false;
+        });
     }

Video:

Screen.Recording.2022-12-03.at.7.58.57.PM.mov

[s77rt]

This is a duplicate of #12018
And the PR's author seems to have another open PR that may fix this

[esh-g]

Yes fixed in that PR

[bfitzexpensify]

Thanks for the heads up @s77rt - closing this as a dupe of #12018