[HOLD for payment 2022-01-27] Number of rows of text input is being miscalculated while editing message on Firefox - Reported by @kursat

[mvtglobally]

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 app on Firefox
2. Type any message with few rows and send
3. Select to edit the message

Expected Result:

Text input should be matching the original message on all browsers

Actual Result:

Compose box isn't accurate, it fluctuates between being 2x and 3x the height
Number of rows of text input is being miscalculated while editing message on Firefox

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web Firefox

Version Number: 1.1.26-0
Reproducible in staging?: Y
Reproducible in production?: Y
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

number-of-rows.1.mp4

2022-01-07_13-06-57.mp4

Upwork Job URL: https://www.upwork.com/jobs/~01ea2f71f3444fea8c
Issue reported by: @kursat
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1641395268098400

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @pecanoro (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[kursat]

Proposal

Cause

getNumberOfLines function in file src/components/TextInputFocusable/index.js calculates NoL wrong. Cause of this is:

When overflow is hidden, scrollHeight of dom returns clientHeight in firefox. Please see: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight. In chrome we get scrollHeight as 20 but in firefox we get it as 72.

Solution

We need to set overflow scroll before getting scrollHeight value, and revert back to original value:

        const originalOverflowValue = this.textInput.style.overflow;
        this.textInput.style.overflow = 'scroll';
        const scrollHeight = this.textInput.scrollHeight;
        this.textInput.style.overflow = originalOverflowValue;

You can experiment on this fork: https://github.com/kursat/App/tree/proposal-7103

[MelvinBot]

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