[HOLD for payment 2023-11-22] [$500] Web - App adds extra line in edit message box

[kbecciv]

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 the app
2. Open any report
3. Send any message
4. Edit message and write text to cover full line i.e. if you add any new letter ahead, it should move to new line
5. Save the message
6. Again hover on message and click on Edit message
7. Observe that app has added extra line in edit message box even though cursor is still at the end of previous line

Expected Result:

App should not automatically add extra line below text in edit message box

Actual Result:

App automatically adds extra below text line in edit message box if text occupies full space in previous line

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

extra.line.below.text.in.edit.message.mp4

Recording.4538.mp4

Expensify/Expensify Issue URL:
Issue reported by: @dhanashree-sawant
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1694858423819399

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01619a8ea912ef60ce
• Upwork Job ID: 1703461170205720576
• Last Price Increase: 2023-10-08
• Automatic offers:
• aimane-chnaif | Reviewer | 27546726
• bernhardoj | Contributor | 27546728
• dhanashree-sawant | Reporter | 27546732

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01619a8ea912ef60ce

[melvin-bot]

Triggered auto assignment to @peterdbarkerUK (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]

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

[melvin-bot]

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

[ahmedGaber93]

Proposal

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

App adds extra line in edit mesage box

What is the root cause of that problem?

We are using updateNumberOfLines to calculate and update the numberOfLines state, which used it textarea row.

App/src/components/Composer/index.js

Line 345 in 6e17b64

const updateNumberOfLines = useCallback(() => {

the issue here is updateNumberOfLines is trigger and calculate numberOfLines before the font applied to the text, and this useCallback dependencies not have dependency when the font applied, so it is not calculated again after the font is applied.
The updateNumberOfLines calculate 2 lines And after the font applied, the font characters seem smaller so it rendered in 1 line

Screen.Recording.2023-09-17.at.1.22.25.AM.mov

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

we need to add textInput.current as a dependency here to trigger the updateNumberOfLines method when font applied

App/src/components/Composer/index.js

Line 364 in 6e17b64

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

What alternative solutions did you explore? (Optional)

N/A

[studentofcoding]

Proposal

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

What is the root cause of that problem?

The root problem was on computedNumberOfLines & generalNumberOfLines condition that still calculated & included an extra line due to padding or margin

https://github.com/Expensify/App/blob/01c5b71e8f9d3385a583d669b98579a02936f867/src/components/Composer/index.js#L361C9-L362

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

We need to adjust the calculation of the number of lines in the updateNumberOfLines function. Specifically, if the calculated number of lines was greater than 1, we subtracted 1 from it to remove the extra line. This adjustment ensured that the extra line was not added when making edits with finalNumberOfLines condition below.

    const finalNumberOfLines = generalNumberOfLines > 1 ? generalNumberOfLines - 1 : generalNumberOfLines;

Full function

const updateNumberOfLines = useCallback(() => {
        if (textInput.current === null) {
            return;
        }
        // we reset the height to 0 to get the correct scrollHeight
        textInput.current.style.height = 0;
        const computedStyle = window.getComputedStyle(textInput.current);
        const lineHeight = parseInt(computedStyle.lineHeight, 10) || 20;
        const paddingTopAndBottom = parseInt(computedStyle.paddingBottom, 10) + parseInt(computedStyle.paddingTop, 10);
        setTextInputWidth(computedStyle.width);
    
        const computedNumberOfLines = ComposerUtils.getNumberOfLines(maxLines, lineHeight, paddingTopAndBottom, textInput.current.scrollHeight);
        const generalNumberOfLines = computedNumberOfLines === 0 ? numberOfLinesProp : computedNumberOfLines;
    
        // Subtract 1 from the number of lines if it's greater than 1
        const finalNumberOfLines = generalNumberOfLines > 1 ? generalNumberOfLines - 1 : generalNumberOfLines;
    
        onNumberOfLinesChange(finalNumberOfLines);
        updateIsFullComposerAvailable({isFullComposerAvailable, setIsFullComposerAvailable}, finalNumberOfLines);
        setNumberOfLines(finalNumberOfLines);
        textInput.current.style.height = 'auto';
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [value, maxLines, numberOfLinesProp, onNumberOfLinesChange, isFullComposerAvailable, setIsFullComposerAvailable]);

Result

https://www.loom.com/share/ff227d92866d4c2b835d07ee21299695?sid=28433597-00d6-4ee8-a89b-a5c22307090e

What alternative solutions did you explore? (Optional)

None