[HOLD for payment 2023-11-13] [$500] Composer height is not resized when resizing browser

[kavimuru]

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. Type anything long on the first line of composer
2. Resize the browser window to be smaller

Expected Result:

The composer's height should increased to show all the text

Actual Result:

The composer's height (number of lines) stays the same

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

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.76-1
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
Notes/Photos/Videos: Any additional supporting documentation

Screen.Recording.2023-09-19.at.01.46.16.mov

Recording.1617.mp4

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01b81aeded72e6d5a7
• Upwork Job ID: 1708968328042897408
• Last Price Increase: 2023-10-02
• Automatic offers:
• bernhardoj | Contributor | 27244536
• c3024 | Reporter | 27244540

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01b81aeded72e6d5a7

[melvin-bot]

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

[kavimuru]

Proposal by @bernhardoj

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

Resizing the browser window does not adjust the composer height/number of lines.

What is the root cause of that problem?

We don't recalculate the composer number of lines when the browser width changes. This issue was previously fixed in #15020 by recalculating the composer number of lines when window width changes but a recent functional component migration accidentally removes this behavior.

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

Recalculate the number of lines when the window width changes by adding windowWidth to updateNumberOfLines deps array.

App/src/components/Composer/index.js

Line 369 in 6be8fca

}, [value, maxLines, numberOfLinesProp, onNumberOfLinesChange, isFullComposerAvailable, setIsFullComposerAvailable]);

[astrohunter62]

Proposal

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

The composer's height doesn't adjust when the browser width is changed.

What is the root cause of that problem?

In Composer, updateNumberOfLines is enclosed within a useCallback, and it is not configured to update when the browser width changes.

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

We can include windowWidth as a dependency for updateNumberOfLines.

const {windowWidth} = useWindowDimensions();
const updateNumberOfLines = useCallback(() => {
  .....
}, [value, maxLines, numberOfLinesProp, onNumberOfLinesChange, isFullComposerAvailable, setIsFullComposerAvailable, windowWidth]);

Result:

28660.webm

[vernu]

Proposal

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

The composer textarea height doesn't update when the browser width is resized.

What is the root cause of the problem

updateNumberOfLines is wrapped in a callback that doesn't have windowWidth in the dependency array, thus It doesn't reflect the current width.

const updateNumberOfLines = useCallback(() => { ... }, [value, maxLines, numberOfLinesProp, onNumberOfLinesChange, isFullComposerAvailable, setIsFullComposerAvailable]);

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

adding windowWidth from useWindowDimensions() hook into updateNumberOfLines's useCallback dependency array should address the issue.

What alternative solutions did you explore? (Optional)

N/A

[robertKozik]

Hi all! Thank you all for your proposals. All of you propose the same solution for this issue so let's proceed with the first published one - @bernhardoj

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[c3024]

@kavimuru
Could you add me as the bug reporter?
I reported it earlier here
https://expensify.slack.com/archives/C049HHMV9SM/p1695059354067419?thread_ts=1695059166.660979&cid=C049HHMV9SM

https://expensify.slack.com/archives/C049HHMV9SM/p1693583529627299

[melvin-bot]

@grgia, @robertKozik Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[robertKozik]

@grgia waiting for your decision and assignment

[melvin-bot]

@grgia, @robertKozik Whoops! This issue is 2 days overdue. Let's get this updated quick!

[grgia]

@bernhardoj I need you to comment to assign.

[bernhardoj]

Comment

[melvin-bot]

@grgia, @robertKozik Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

📣 @bernhardoj 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[melvin-bot]

📣 @c3024 🎉 An offer has been automatically sent to your Upwork account for the Reporter role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[grgia]

assigning!

[bernhardoj]

PR is ready

cc: @robertKozik

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.95-9 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Update composer number of lines when window width changes #29845

If no regressions arise, payment will be issued on 2023-11-13. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

For reference, here are some details about the assignees on this issue:

• @bernhardoj requires payment offer (Contributor)
• @robertKozik does not require payment (Contractor)
• @c3024 requires payment offer (Reporter)

[melvin-bot]

Triggered auto assignment to @garrettmknight (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.

[grgia]

Hey @garrettmknight could you help ensure that the payments were processed for this one?

[garrettmknight]

Summary of payments:

• Reporter: @c3024 $50 paid via upwork
• Contributor: @bernhardoj $500 paid via upwork
• Reviewer: N/A

Upwork Job: https://www.upwork.com/en-gb/ab/applicants/1708968328042897408/job-details