[$500] Web - Chat - You can't scroll the PDF right after opening it with the "down arrow" button

[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!

---

Version Number: 1.4.28.0
Reproducible in staging?: Y
Reproducible in production?: Y
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
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

1. Navigate to a chat
2. Upload a PDF
3. Open it
4. Press the "down arrow" keyboard button

Expected Result:

I should be able to use the arrows without clicking

Actual Result:

You can't scroll the PDF right after opening it with the "down arrow" button. You need to click once for the function to work

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6347791_1705680293652.bandicam_2024-01-19_13-44-51-560.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~011e97d8eae76876e6
• Upwork Job ID: 1748379977514749952
• Last Price Increase: 2024-01-26
• Automatic offers:
• hungvu193 | Reviewer | 0
• abzokhattab | Contributor | 0

Issue Owner

Current Issue Owner: @JmillsExpensify

Issue Owner

Current Issue Owner: @JmillsExpensify

[melvin-bot]

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

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~011e97d8eae76876e6

[melvin-bot]

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

[abzokhattab]

Proposal

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

You can't scroll the PDF right after opening it with the down or up buttons

What is the root cause of that problem?

the document is not focused after it's loaded

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

we need to call the focus function in the setListAttributes this function is called in the outerRef of the List component

        ref.focus();

FYI as you can notice, the list component is shown after this loader indicator is removed

POC

Screen.Recording.2024-01-19.at.7.12.15.PM.mov

[suneox]

Proposal

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

Web - Chat - You can't scroll the PDF right after opening it with the "down arrow" button

What is the root cause of that problem?

After document is load success we don't focus to the document so we can't scroll it with the keyboard

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

We will store the document ref and focus on it after document loaded success to avoid while document still loading user can click anywhere ST like download button...

1. Update this line

    this.setListAttributes = this.setListAttributes.bind(this);
+   this.pdfDocumentRef = React.createRef(null);

2. When document setListAttributes we will store the ref

    setListAttributes(ref) {
        if (!ref) {
            return;
        }
+       this.pdfDocumentRef.current = ref;
        ...
    }

3. After that when document onDocumentLoadSuccess we will focus into the document

    onDocumentLoadSuccess(pdf) {
        const {numPages} = pdf;
+       if(this.pdfDocumentRef.current && this.pdfDocumentRef.current.focus) {
+           this.pdfDocumentRef.current.focus();
+       }
        ...
    }

POC

Screen.Recording.2024-01-20.at.01.31.12.mov

What alternative solutions did you explore? (Optional)

Instead of storing ref at PDFView we can store ref at WebPDFDocument and focus on it when the document loaded success after that continue to call onDocumentLoadSuccess

[JeremyCroff]

Proposal

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

A newly opened PDF cannot be scrolled with keyboard without clicking on it first

What is the root cause of that problem?

No focus is being set on the document

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

react-pdf has built in props to handle this. ( the currently used open source package )

 <PDFViewer innerRef={node => (this.iframe = node)}>
          <Document onRender={() => this.iframe.focus()}>
          //PDF
          </Document>
</PDFViewer>

I will test the focus on a password protected document as well to ensure there's no conflicts.

What alternative solutions did you explore? (Optional)

Alternatively, you can set your focus by creating your own refs in React.

[Krishna2323]

I don't think it is a bug, even in mac pdf preview and chrome pdf viewer you can't scroll without clicking on the pdf.

[abzokhattab]

@sofi-a It works fine without the timer just make sure to put this ref.focus()after this line

plus there is some lagging when putting the time .. the user has to wait 1 second to use the scroll

[sofi-a]

@abzokhattab It didn't work for me without the timer and I set the duration randomly. It can be decreased if necessary.

[sofi-a]

@abzokhattab you're right, calling ref.focus() after the ref.tabIndex = -1 statement works 👍.

[sofi-a]

I'll remove my proposal since it's redundant.

[alexpensify]

@situchan - any update here regarding these proposals?

[situchan]

reviewing

[jeremy-croff]

My original.proposal is currenly hidden because my github account is currently suspended while it's being recovered. The proposal should be in an email history.

The proposal was to use the react-pdf built in props to maintain focus

Proposal

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

PDFs opened in a new tab don't focus

What is the root cause of that problem?

This is not default behaviour, and must be coded for.

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

We should leverage the react-pdf components and it's existing props to manage a focus callback on ready state of the document

 <PDFViewer innerRef={node => (this.iframe = node)}>
          <Document onRender={() => this.iframe.focus()}>
            // PDF implementation
          </Document>
        </PDFViewer>

What alternative solutions did you explore? (Optional)

[alexpensify]

Sounds like a plan, keep us posted @situchan. Thanks!

[situchan]

I think we should hold this for:

• Add focus trap to the RHP (v3) #32800

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[alexpensify]

Thanks, moving this to weekly and putting it on hold.

[situchan]

Still holding

[alexpensify]

Heads up, I will be offline until Tuesday, April 23, 2024, and will not actively watch over this GitHub during that period.

If anything urgent is needed here, please ask for help in the #expensify-open-source Slack Room-- thanks!

[alexpensify]

@hungvu193 - catching up from being OOO, can we get an update on what's remaining here? Thanks!

[hungvu193]

@hungvu193 - catching up from being OOO, can we get an update on what's remaining here? Thanks!

The PR was reverted since it was linked to a DB and we couldn't figure out the way to fix it.

[alexpensify]

Got it, so is the issue still present, or did it self-resolve? Thanks!

[hungvu193]

Got it, so is the issue still present, or did it self-resolve? Thanks!

Unfortunately it's still present

[alexpensify]

This week, I've been focused on Wave Collect resources so I'll start a discussion on Monday.

[melvin-bot]

Triggered auto assignment to @JmillsExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[alexpensify]

Heads up, I will be offline until Tuesday, May 28, 2024, and will not actively watch over this GitHub during that period.

@JmillsExpensify— Next week, if the site is in a more stable spot, please start a discussion in the Open Source Slack room about whether we should find another solution here or close this GH. I waited to have that conversation since the focus has been on higher-priority issues, so I appreciate your help while I'm OOO. Thanks!

Here is where we are at:

The PR was reverted since it was linked to a DB and we couldn't figure out the way to fix it.

[JmillsExpensify]

I think we should just close it. If someone is passionate, please raise a discussion in the Open Source Slack room and re-open when we've agreed on a solution.

[hungvu193]

Since I and @abzokhattab already worked on the issue. Can we request a compensation here? @JmillsExpensify

[JmillsExpensify]

What do you think is reasonable?

[hungvu193]

I think half of the bounty.

[JmillsExpensify]

That works for me, though in case anyone happens upon this decision in the future, it's a one-off and not indicative of how we'll approach cases like this in the future. In any case:

• Contributor: @abzokhattab $250
• Contributor+: @hungvu193 $250

[JmillsExpensify]

Contracts are paid out via Upwork. @abzokhattab also please check the message I sent you in Upwork, thanks!

[abzokhattab]

Alright thanks @JmillsExpensify .. i have refunded 250$ since i was already paid few days ago. please let me know if you have any other requests