[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