[$1000] Chat - Tapping eye icon for protected pdf file moves cursor to the start of the field

[lanitochka17]

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 https://github.com/Expensify/App/pull/21367

Action Performed:

1. Login to NewDot
2. Open chat
3. Tap password protected pdf
4. Tap enter password
5. Type several characters
6. Tap Eye icon

Expected Result:

Cursor should stay where it was

Actual Result:

Cursor moves to the start fo the field

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• [ ] Android / native
• [ ] Android / Chrome
• [ ] iOS / native
• [ ] iOS / Safari
• [x] MacOS / Chrome / Safari
• [ ] MacOS / Desktop

Version Number: 1.3.33.3

Reproducible in staging?: Yes

Reproducible in production?: Yes

If this was caught during regression testing, add the test name, ID and link from TestRail:

Email or phone of affected tester (no customers):

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

Notes/Photos/Videos: Any additional supporting documentation

https://github.com/Expensify/App/assets/78819774/59bc8698-7c3b-421a-a795-620d982f80a7

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01f00fa406bef36c56
• Upwork Job ID: 1674042523612561408
• Last Price Increase: 2023-06-28

Issue Owner

Current Issue Owner: @laurenreidexpensify

[s-alves10]

@pac-guerreiro

Here is my opinion We can't use the above code for mobile because there is no selectionStart and selectionEnd on those platforms. So if we want not to use platform-specific code, this isn't a solution.

What do you think?

[pac-guerreiro]

@s-alves10

Sorry for the late response, yesterday I focused on setting up iOS and Android apps on my machine.

While I checked both iOS and Android native apps, I wasn't able to reproduce this issue, which leads me to believe that this only happens on web.

Also, the fix I applied to react-native-web only affects web, since in native apps the package is mapped directly to react-native.

I recorded the web app running on both chrome and safari in android emulator and iPhone simulator, respectively, and my fix seems to do the trick:

https://github.com/Expensify/App/assets/48553277/a4cd2c2d-d7ae-4813-87eb-a7ad7ce67373

https://github.com/Expensify/App/assets/48553277/d8449ad8-98ef-4b86-b174-6f8abf7282a5

---

Regarding your questions:

1. Do we need to compare prevSecureTextEntry and secureTextEntry?

If we only want to apply the fix when the input type is switched between text and password, then yes.

2. Is this working on ios safari? We want to remove platform-specific code and this is important

Yes, as you can see in the screen recording above

3. What does this code mean? setSelection(hostRef.current, prevSelection.current)

This code already exists in react-native-web, it's used to set the selection manually. This is it's implementation:

var setSelection = (node, selection) => {
  if (isSelectionStale(node, selection)) {
    var start = selection.start,
        end = selection.end;

    try {
      node.setSelectionRange(start, end || start);
    } catch (e) {}
  }
};

[s-alves10]

Let me check

[s-alves10]

How are you going to implement them in native platforms?

[laurenreidexpensify]

@sobitneupane what do you think of the proposal above https://github.com/Expensify/App/issues/21727#issuecomment-1645402968

[sobitneupane]

@pac-guerreiro I tested the changes suggested here. But it didn't work for me. Are there any other changes to be made?

[pac-guerreiro]

@sobitneupane I'm pretty sure those are the only changes I made. Did you apply them to the right files?

[pac-guerreiro]

How are you going to implement them in native platforms?

@s-alves10 I didn't observe these issues on mobile

[sobitneupane]

I didn't observe these issues on mobile

Yup. The issue is not reproducible on native.

[s-alves10]

If this issue isn't related native platforms, it's possible not to use platform-specific code

[sobitneupane]

I'm pretty sure those are the only changes I made. Did you apply them to the right files?

I believe. I did apply it to right files.

@pac-guerreiro Can you please guide me to test it? Did you make those changes in Expensify/react-native-web, build it and replace the react-native-web from the app with the newly built package?

[pac-guerreiro]

@sobitneupane

Basically I did npm install, followed by npm run web. Then I applied the changes to the TextInput inside the dist folder of @Expensify/react-native-web, in node_modules.

[melvin-bot[bot]]

@sobitneupane @pac-guerreiro @laurenreidexpensify this issue is now 4 weeks old and preventing us from maintaining WAQ, can you:

• Decide whether any proposals currently meet our guidelines and can be approved as-is today
• If no proposals meet that standard, please take this issue internal and treat it as one of your highest priorities
• If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!

[melvin-bot[bot]]

Current assignee @sobitneupane is eligible for the Internal assigner, not assigning anyone new.

[sobitneupane]

@pac-guerreiro My bad. Instead of making those changes in node_modules/@expensify/react-native-web, I was playing with node_modules/react-native-web.

Proposal from @pac-guerreiro looks good to me. I think we should raise upstream PR as well.

🎀 👀 🎀 C+ reviewed

[melvin-bot[bot]]

Triggered auto assignment to @NikkiWines, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[s-alves10]

@sobitneupane @pac-guerreiro

In ios native, still exists problem. We need to fix it

https://github.com/Expensify/App/assets/126839717/9cf77e21-a070-4a2b-85ad-ec75f23d118b

[pac-guerreiro]

@s-alves10

Great catch! This seems like a different issue than the on reported initially but nonetheless, I could tweak my solution in order to work here too 😄

[NikkiWines]

Agreed that @pac-guerreiro's proposal looks good - thanks for the investigation into this issue everyone 🙌

[melvin-bot[bot]]

Current assignee @laurenreidexpensify is eligible for the External assigner, not assigning anyone new.

[melvin-bot[bot]]

Current assignee @sobitneupane is eligible for the External assigner, not assigning anyone new.

[melvin-bot[bot]]

Current assignee @laurenreidexpensify is eligible for the External assigner, not assigning anyone new.

[melvin-bot[bot]]

Current assignee @sobitneupane is eligible for the External assigner, not assigning anyone new.

[pac-guerreiro]

@s-alves10

I seem to have found a solution for the issue on iOS but it's on React Native package:

Here's a demo with the fix applied:

https://github.com/Expensify/App/assets/48553277/bd91162a-606e-40ec-9048-722d3ec24d74

[pac-guerreiro]

I just created an issue in React Native - https://github.com/facebook/react-native/issues/38676

And also took the liberty of opening a PR with the fix - https://github.com/facebook/react-native/pull/38678

[laurenreidexpensify]

PR is in draft

[pac-guerreiro]

PR is in draft

Now it's ready to review 😄

[pac-guerreiro]

The original issue should be resolved now, but the iOS fix is still pending -> https://github.com/facebook/react-native/pull/38678

Also, I think it would be a good idea to merge the react-native-web fix to upstream 😄

[NikkiWines]

@pac-guerreiro, sounds good - can you make a PR to update the @expensify/react-native-web dependency here?

[lanitochka17]

Issue reproducible in Build 1.3.52-3. Windows 10/Chrome

https://github.com/Expensify/App/assets/78819774/05c2754f-58e4-4679-ae19-4c761ba0e015

[roryabraham]

Thanks for your work on this issue so far everyone, and thanks @pac-guerreiro for creating an upstream PR for the react-native portion of this. Can you also create an upstream issue and PR for the react-native-web portion as well?

Posted more detailed thoughts here.

@pac-guerreiro, sounds good - can you make a PR to update the @expensify/react-native-web dependency here?

@NikkiWines normally we have to manually publish the react-native-web fork, but as stated in here we're moving away from forks and to https://github.com/ds300/patch-package because it's less internal work to manage.

Thanks everyone!

[s-alves10]

Is this issue waiting for proposals?

[pac-guerreiro]

@roryabraham

Thank you for the input!

I'm opening a PR to react-native-web with my fix.

Meanwhile, if there was no bump to the current version of Expensify/react-native-web in the last app release, then the fix will not be present.

Please, confirm this @lanitochka17 and retest it after the version is bumped to see if the fix worked.

@s-alves10 regarding the iOS fix, it's still waiting for approval on react-native repo 😄

[pac-guerreiro]

Sorry for the delay, I had a two week vacation.

I just opened a PR for necolas/react-native-web with my fix.

The PR with the iOS fix is still pending review.

[laurenreidexpensify]

@pac-guerreiro how is the PR going?

[laurenreidexpensify]

@pac-guerreiro is there a PR up for this still?

[pac-guerreiro]

@laurenreidexpensify

Sorry for the delay, the PR for react-native-web was closed but my fix was added manually by necolas - https://github.com/necolas/react-native-web/commit/5e41208b78c7ed69308985f9f915c5e1f7db4684 - and it will be available in react-native-web@0.19.9

Regarding the react-native PR, there are no updates from Meta side. I guess I'll need to mention more reviewers.

[laurenreidexpensify]

What are the next steps on this one?

[laurenreidexpensify]

@pac-guerreiro bump

[laurenreidexpensify]

@pac-guerreiro @sobitneupane is there any latest here?

[pac-guerreiro]

@laurenreidexpensify I'm still waiting on updates from React Native PR

[pac-guerreiro]

Still no updates on React Native PR

[pac-guerreiro]

Still no updates on React Native PR

[pac-guerreiro]

When the app starts using RN 0.73.1, I'll check if the new version fixes the underlying issue 😄

[laurenreidexpensify]

Still holding on #31381

[laurenreidexpensify]

@pac-guerreiro looks like #31381 is live - we have Upgraded react-native to 0.73+ so can we pick this one up again?

[pac-guerreiro]

@laurenreidexpensify Thanks for the heads up! I'll test this asap!

[pac-guerreiro]

https://github.com/Expensify/App/assets/48553277/07660fdf-773d-4777-a0bd-ba07d73c10ba

@laurenreidexpensify The issue still persists on iOS. I reported this on https://github.com/facebook/react-native/issues/38676

Meanwhile, I could apply this fix through a patch if you want, otherwise we'll have to wait on meta team response.

[laurenreidexpensify]

@pac-guerreiro have Meta responded yet?

[pac-guerreiro]

@laurenreidexpensify Nothing so far but I just bumped them 😄