[HOLD for payment 2023-07-12] [$1000] Assign Task - Description field line is displaced and moves up when typed

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

---

Issue found when executing PR #20689

Action Performed:

1. Open http://staging.new.expensify.com/
2. Click on FAB menu / + actions in chat
3. Click on "Assign task"
4. Click on Description field
5. Type a letter

Expected Result:

Description field line remains at the same place all the time

Actual Result:

Description field line moves up when user types something

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

Reproducible in staging?: Yes

Reproducible in production?: Yes

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

Bug6102069_Recording__716.mp4

Expensify/Expensify Issue URL:

Issue reported by: @bernhardoj

Slack conversation:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~014f2dca07ce0d7ce9
• Upwork Job ID: 1673920053781938176
• Last Price Increase: 2023-06-28

[melvin-bot]

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

[jeet-dhandha]

This is a Safari Browser Issue

• As we can see in chrome we are getting height as its already collapsed at initial render.

• But in safari it is set to maxHeight

[jeet-dhandha]

Proposal

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

• The problem is that when we are opening Assign Task modal in Safari browser, the description box collapses as we start typing in it.

What is root cause of that problem?

• The main issue is that the height of Description Input is already set to maxHeight minus some extra height params like padding and when we are typing in it, it collapses as it is recalculatting TextInput height due to autoGrowHeight(multiline) property.

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

Affected File Code:

• We should update StyleUtils.js file's getAutoGrowHeightInputStyle function to set height to textInputHeight by default if the browser is Safari.

Code Changes

    function getAutoGrowHeightInputStyle(textInputHeight, maxHeight) {
    if (textInputHeight > maxHeight) {
        return {
            ...styles.pr0,
            ...styles.overflowAuto,
        };
    }

+   let height = maxHeight - styles.textInputMultilineContainer.paddingTop - styles.textInputContainer.borderBottomWidth;
+   if(Browser.getBrowser() === CONST.BROWSER.SAFARI) {
+       height = textInputHeight;
+   }
+
    return {
        ...styles.pr0,
        ...styles.overflowHidden,
        // maxHeight is not of the input only but the of the whole input container
        // which also includes the top padding and bottom border
-       height: maxHeight - styles.textInputMultilineContainer.paddingTop - styles.textInputContainer.borderBottomWidth,
+       height,
    };
}

Fixed:

Fixed Video

Fix-AssignTask.mp4

What alternative solutions did you explore? (Optional)

• N/A

[bernhardoj]

Hi, I reported this issue 5 days ago here https://expensify.slack.com/archives/C049HHMV9SM/p1686997207642659. Will I get credited as the reporter?

[kushu7]

My proposal will also solve this issue adding link here, RCA is same.
#21433 (comment)

[manjesh-yadav]

Proposal

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

Description field height changed, when typed

What is the root cause of that problem?

When we implement auto-grow text input, we use a hidden <Text> component to calculate the component's height to grow <TextInput> because the <TextInput> component doesn't support auto-grow.

We calculate height and width for input when React fired a NativeEvent called onLayout when our hidden <Text> component rendered

• The problem comes with Safari web browser (also in the Desktop application) when initially component is rendered with no value React is not able to fire NativeEvent
• And we are not able to calculate the height of the hidden <Text> component
• Then our <TextInput> component render with max height CSS only

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

We just need a value in our hidden <Text> component to fire onLayout event

It will work when we set a placeholder or if we have any state value, if we do not have a placeholder or state then just an Empty string will work, and later it will change with the state value

File: App/src/components/TextInput/BaseTextInput.js

-      {this.state.value || this.props.placeholder}
+    {this.state.value || this.props.placeholder || ' '}