[$1000] Password Protected - keyboard is open but the cursor does not appear.

[m-natarajan]

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

---

Action Performed:

1. Open any chat
2. Send an image
3. Send password protected PDF
4. Click and open password protected PDF in preview
5. Click 'enter the password' and enter any password
6. Drag to navigate next
7. Focus on input, Notice that the keyboard is open but the cursor is not visible

Expected Result:

Cursor appears when keyboard is open

Actual Result:

Cursor is not appears when keyboard is open

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.56-16
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

RPReplay_Final1692005024.MP4

RPReplay_Final1692748714.mp4

Expensify/Expensify Issue URL:
Issue reported by: @namhihi237
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1692005371991179

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~013b0c0a37fb3237cb
• Upwork Job ID: 1694248662260748288
• Last Price Increase: 2023-09-13

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~013b0c0a37fb3237cb

[melvin-bot]

Current assignee @greg-schroeder is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @sobitneupane (External)

[hnihsan]

I can't reproduce the issue, I tried both in staging and production site with iPhone in Safari

RPReplay_Final1692785370.MP4

[melvin-bot]

📣 @hnihsan! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
2. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
3. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[namhihi237]

@hnihsan i think you miss step 2 and did wrong step 6

[hnihsan]

Ohh, I see, my bad, let me try again

[hnihsan]

Contributor details
Your Expensify account email: helmi.n.ihsan@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~011a061814c08969cc

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[hnihsan]

Sorry still can't reproduce the issue @namhihi237 , or am I miss any step?

RPReplay_Final1692786502.MP4

[pradeepmdk]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Password Protected - The keyboard is open but the cursor does not appear

What is the root cause of that problem?

https://github.com/Skalakid/App/blob/70000a49ea00e48e6c81c5184dc1d42d8f0cbff7/src/components/PDFView/PDFPasswordForm.js?#L70
https://github.com/Skalakid/App/blob/70000a49ea00e48e6c81c5184dc1d42d8f0cbff7/src/components/PDFView/PDFPasswordForm.js?#L130
If you're using both "autoFocus" and JavaScript to manage focus, the order of execution might be causing conflicts. For example, the JavaScript code might be trying to change the focus after the "autoFocus" attribute has already set the initial focus.
and when slightly moved blur and focus happen at the continuous even triggered so not able to set the cursor properly.

What changes do you think we should make in order to solve the problem?

so we need to set a timeout for delay focus so that we can avoid conflicts and we can give some time to blur complete

 setTimeout(() => {
            textInputRef.current.focus();
        }, 500)

[SoftewareArtist]

Contributor details
Your Expensify account email: dev.sheng.yu@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~01705ceac19ede7858

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[kameshwarnayak]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Password Protected - keyboard is open but the cursor does not appear

What is the root cause of that problem?

In the useEffect we are setting the focus but not the selection position. When we swipe right the blur even it triggered and below line sends the focus back to the text box. But this doesn't set the position of the cursor

App/src/components/PDFView/PDFPasswordForm.js

Line 70 in 329cac3

textInputRef.current.focus();

More details in this comment #25739 (comment)

What changes do you think we should make in order to solve the problem?

To solve the problem manually set the position of the cursor before focus. This is a workaround to make the cursor visible

The following code does that

    textInputRef.current.setSelectionRange(password.length, password.length);
    textInputRef.current.focus();  

Result :

iOS Safari

iOS.Safari.mov

What alternative solutions did you explore? (Optional)

Use setTimeout to delay focus in on the textinput. However timeout may not be the preferred way of doing it.

setTimeout(() => {
    textInputRef.current.focus();
}, 100);

Detailed explanation here - #25739 (comment)

[shubham1206agra]

@kameshwarnayak Why does it not set a cursor?
Is there any particular reason?

[kameshwarnayak]

@shubham1206agra https://stackoverflow.com/a/72465972 The explanation given in the comment is very similar to what happens here. The text input blurs and then because of the re-render the focus is set back causing the issue.

The above comment helped to find the solution.

[sobitneupane]

@namhihi237 I don't think I understood the issue here. Can you please elaborate the issue? Is this the same issue?

[sobitneupane]

I have gone through the proposals as well. But none of them have good problem statement and root cause analysis. More details and well-explained RCA can lead to better solution.

[pradeepmdk]

@sobitneupane That is a different issue that is more like a safari issue https://bugs.webkit.org/show_bug.cgi?id=195884
but here this issue happens on iOS/Chrome.

here when have more attachments we can navigate left or right in the preview. so at the time one of the attachments had a PDF with a password. that component will have an input box. when the input box is focused and starts to type something after that slightly moved to the next attachment it will go next and come back to the current input box. at the time the blur of focus happens keyboard is opened when we tab the input box but the cursor is hidden still, so we are able to enter text.

[greg-schroeder]

Same as above

[greg-schroeder]

@sobitneupane seems we haven't had any new proposals, so sounds like you're diving into the existing ones per this comment?

[sobitneupane]

If we don't get any new proposals by the weekend, I will delve into the existing ones

[kameshwarnayak]

@sobitneupane - Updated my proposal to add alternative solution using setTimeout. These two might be the only solutions as per my research.

[melvin-bot]

@sobitneupane, @greg-schroeder Eep! 4 days overdue now. Issues have feelings too...

[greg-schroeder]

Looks like @sobitneupane will dive into this now that we've past the weekend!

[sobitneupane]

I'll be unavailable next week. If any action is needed, please feel free to reassign the task to another C+.

[melvin-bot]

@sobitneupane, @greg-schroeder Whoops! This issue is 2 days overdue. Let's get this updated quick!

[greg-schroeder]

Okay I will re-assign!

[situchan]

I think this is dupe of #10414

[situchan]

This is known iOS Safari issue

[pradeepmdk]

@situchan this is a different and this issue is in mWeb/chrome only. the cursor is missing after opening a keyboard.

[kameshwarnayak]

@situchan - This is a different issue and I believe this is because of iOS Safari and not our code. However, the first solution in this proposal is a workaround to solve this issue of cursor not appearing. This solves the issue and not the root cause which is a iOS Safari issue.

[situchan]

Is this still reproducible? I see cursor when keyboard is open

Screen.Recording.2023-10-18.at.1.33.11.AM.mov

[melvin-bot]

@sobitneupane, @greg-schroeder Whoops! This issue is 2 days overdue. Let's get this updated quick!

[kameshwarnayak]

@situchan - Looks like the bug is fixed in the latest master

[situchan]

@situchan - Looks like the bug is fixed in the latest master

Still curious which PR fixed this

[greg-schroeder]

Seems to be fixed, so closing.