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

@JmillsExpensify

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:

Navigate to a chat
Upload a PDF
Open it
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?

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

@alexpensify

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

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

@situchan

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

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

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...

Update this line

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

When document setListAttributes we will store the ref

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

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

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.

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.

@sofi-a

@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

@JmillsExpensify

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.

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.

@abzokhattab

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

What do you think is reasonable?

I think half of the bounty.

@abzokhattab

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

@abzokhattab

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

@JmillsExpensify

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

Navigation Menu

Repository navigation

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

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

POC

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

98 remaining items

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Jan 19, 2024

melvin-bot commented on Jan 19, 2024

melvin-bot commented on Jan 19, 2024

abzokhattab commented on Jan 19, 2024

Proposal

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

What is the root cause of that problem?

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

POC

suneox commented on Jan 19, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

JeremyCroff commented on Jan 19, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Krishna2323 commented on Jan 19, 2024

abzokhattab commented on Jan 21, 2024

98 remaining items

alexpensify commented on May 17, 2024

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

JmillsExpensify commented on May 19, 2024

hungvu193 commented on May 19, 2024

JmillsExpensify commented on May 19, 2024

hungvu193 commented on May 20, 2024

JmillsExpensify commented on May 20, 2024

JmillsExpensify commented on May 20, 2024

abzokhattab commented on May 20, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions