[HOLD for payment 2024-06-20] [HOLD for payment 2024-06-18] [$500] IOS - Task - Unable to scroll down task description

[izarutskaya]

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.70-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: https://expensify.testrail.io/index.php?/tests/view/4538850
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Open the app and log in
2. Tap FAB > Assign task
3. Enter any title and add a long comment
4. On the confirmation screen open the the description and scroll down
5. Finish creating a task
6. Open the created task and tap the description
7. Scroll down

Expected Result:

User is able to scroll down the task descriptionUser is able to scroll down the task description

Actual Result:

User is unable to scroll down the task description on the task confirmation screen and in created task

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6469698_1714716268755.IMG_6715.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0180926895abca5e37
• Upwork Job ID: 1786441016250023936
• Last Price Increase: 2024-05-28
• Automatic offers:
• hungvu193 | Reviewer | 102536438
• QichenZhu | Contributor | 102536440

Issue Owner

Current Issue Owner: @zanyrenney

[melvin-bot]

Triggered auto assignment to @zanyrenney (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[izarutskaya]

We think this issue might be related to the #vip-vsb.

[zanyrenney]

nice, we should be able to scroll 100% so this is a bug.

[zanyrenney]

Adding external

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0180926895abca5e37

[melvin-bot]

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

[samilabud]

Proposal

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

Task - Unable to scroll down task description

What is the root cause of that problem?

This situation occurs on IPhone/IOS due to the way scrolls work by default, they are automatically hidden and if like in this case if you are using an IPhone and scroll the parent component all the children transform their behavior temporarily (about 1s) to be scrollable and each one hides its own scrollbar.

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

We should put the input description inside a ScrollView and disabling the scroll like:

We should also add scrollEnabled={false} to the FormWrapper/ScrollView component (we can pass through a prop to disable the scroll only from the task description component), with this change we can control:

<ScrollView
                        style={[styles.w100, styles.flex1]}
                        contentContainerStyle={styles.flexGrow1}
                        keyboardShouldPersistTaps="handled"
                        ref={formRef}
                        scrollEnabled={false}
                    >
                        {scrollViewContent(safeAreaPaddingBottomStyle)}
</ScrollView>

Tests:

Before changes (Please note that if you wait a second you will be able to scroll):

Input.Description.Scroll.Test.before.changes.mp4

After changes:

Test.with.scroll.enable.false.in.form.wrapper.mov

[suneox]

Proposal

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

Unable to scroll down task description on several use cases.
The text lines > 12. Issue not happens
when text lines < 12. Issue happens

Screen.Recording.2024-05-05.at.23.56.54.mov

What is the root cause of that problem?

This issue related to react-native-live-markdown package on iOS Native when prepare container scroll with padding style. If we change RNMarkdownTextInput to RNTextInput or update padding style this issue will not happens.

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

We can workaround for this issue without any breaking change by listen onLayout on InputComponent to make sure that the InputComponent is rendered and then apply padding style.

    ....
+   const [inputLayoutReady, setInputLayoutReady] = useState(false);
+   const onInputLayout = useCallback(
+       () => setInputLayoutReady(true),
+       [],
+   );
+   const inputPaddingStyle = useMemo(() => {
+       if (!inputLayoutReady) {
+           return [];
+       }
+       return [
+           (!hasLabel || isMultiline) && inputLayoutReady && styles.pv0,
+           !!prefixCharacter && StyleUtils.getPaddingLeft(StyleUtils.getCharacterPadding(prefixCharacter) + styles.pl1.paddingLeft),
+       ]
+   }, [StyleUtils, hasLabel, inputLayoutReady, isMultiline, prefixCharacter, styles.pl1.paddingLeft, styles.pv0]);

    return (
      ...
      <InputComponent
+         onLayout={onInputLayout}
          style={[
              styles.flex1,
              styles.w100,
              inputStyle,
+             ...inputPaddingStyle,
-             (!hasLabel || isMultiline) && styles.pv0,
-             !!prefixCharacter && StyleUtils.getPaddingLeft(StyleUtils.getCharacterPadding(prefixCharacter) + styles.pl1.paddingLeft),
      ...

Screen.Recording.2024-05-06.at.00.30.25.mov

tested branch

What alternative solutions did you explore? (Optional)

workaround we can trigger scroll to current selection or bottom if selection not exist when the InputComponent has inputLayoutReady and isFocused

[hungvu193]

Thanks everyone! For more context, we have another similar issue related to MarkDownTextInput here, please see this comment,
We also having a PR to fix that issue here: #41103. So, the ideal solution should aim to fix the issue with MarkDownTextInput rather than remove it.

[samilabud]

Proposal

Updated

[hungvu193]

I can not reproduce this issue on latest (after react-native-live-markdown is updated).

Screen.Recording.2024-05-07.at.10.12.03.mov

[zanyrenney]

Nice @hungvu193 - we can close this one out then 🎉

[samilabud]

Hi @zanyrenney and @hungvu193, it is reproducible, the test should start by trying to scroll first from the middle (or any other side - outside of the input) of the screen and then you should try to edit the description (see my root cause y my proposal)

**Tests v1.4.72**

Screen.Recording.2024-05-09.at.12.59.09.PM.mov

Version:

[lanitochka17]

Issue is still reproducible on the latest build 1.4.73-0

IMG_6870.MP4

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[zanyrenney]

I can still reproduce!

[hungvu193]

Hmm yeah. We should hold until that issue is fixed. The PR you mentioned was reverted 🤦

[hungvu193]

Still holding on above comment

[hungvu193]

Hold for this one:

#43255

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[hungvu193]

react-native-live-markdown was bumped here
We can test this issue again once it reaches staging.

[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.4.81-11 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [CP Staging] Bump react-native-live-markdown to 0.1.82 #43255

If no regressions arise, payment will be issued on 2024-06-18. 🎊

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

• @hungvu193 requires payment automatic offer (Reviewer)
• @QichenZhu requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@hungvu193] The PR that introduced the bug has been identified. Link to the PR:
• [@hungvu193] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@hungvu193] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@hungvu193] Determine if we should create a regression test for this bug.
• [@hungvu193] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@zanyrenney] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[hungvu193]

#43340 reached production. We can now verify this issue

[hungvu193]

• The PR that introduced the bug has been identified. Link to the PR: Fix calling onScroll multiple times with incorrect y-axis offset react-native-live-markdown#144
• The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: We actually discuss about this during our reviewing process, so I don't think we need to comment on that PR again.
• A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: N/A
• Determine if we should create a regression test for this bug: No

[melvin-bot]

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

• [CP Staging] Bump react-native-live-markdown to 0.1.82 #43255

If no regressions arise, payment will be issued on 2024-06-20. 🎊

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

• @hungvu193 requires payment automatic offer (Reviewer)
• @QichenZhu requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@hungvu193] The PR that introduced the bug has been identified. Link to the PR:
• [@hungvu193] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@hungvu193] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@hungvu193] Determine if we should create a regression test for this bug.
• [@hungvu193] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@zanyrenney] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[zanyrenney]

payment summary:

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

@hungvu193 requires payment automatic offer (Reviewer) - paid $500 via upwork
@QichenZhu requires payment automatic offer (Contributor) - paid $500 via upwork

@hungvu193 please complete the steps above too. This doesn't need a new regression test.