[$250] 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
• [x] iOS: Native
• [ ] iOS: mWeb Safari
• [ ] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

https://github.com/Expensify/App/assets/115492554/6b2c0f4d-3003-4ad0-8823-ff6b518d176c

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-14

Issue Owner

Current Issue Owner: @hungvu193

[melvin-bot[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[bot]]

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

[melvin-bot[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):

https://github.com/Expensify/App/assets/5216036/ea870160-05d0-4724-8997-c8b50ce23399

After changes:

https://github.com/Expensify/App/assets/5216036/46f03d8b-bb7e-4227-b201-b0f9e14c26e4

[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

https://github.com/Expensify/App/assets/11959869/9281ed04-ef88-4845-bb4d-692e66c8f9ca

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),
      ...

https://github.com/Expensify/App/assets/11959869/c277d9e1-3ba0-40f4-af60-9b86b3e79b24

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: https://github.com/Expensify/App/pull/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).

https://github.com/Expensify/App/assets/16502320/7d8cd72c-2984-4391-82e0-db4cb0cae70b

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

https://github.com/Expensify/App/assets/5216036/fd5231a2-f5b7-44df-8b12-6971df3c957e Version:

[lanitochka17]

Issue is still reproducible on the latest build 1.4.73-0

https://github.com/Expensify/App/assets/78819774/6b42c389-a612-4108-b22b-fa241980e618

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

[zanyrenney]

@hungvu193 can you please review the proposal?

[hungvu193]

Yeah sure. I can reproduce on latest main

[zanyrenney]

thanks!

[melvin-bot[bot]]

@hungvu193 @zanyrenney this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[hungvu193]

I'll take a look this weekend

[hungvu193]

Thanks @suneox and @samilabud, I feel both proposals are workaround to me. Still waiting for proposal.

[samilabud]

Thanks @suneox and @samilabud, I feel both proposals are workaround to me. Still waiting for proposal.

Got it, but this is not a bug is the usual behavior of the OS, I think only workarounds going to work.

[hungvu193]

This bug only happens after we switch to use MarkdownTextInput. So again as I mentioned above ideal solution will aim to fox MarkdownTextInput

[samilabud]

This bug only happens after we switch to use MarkdownTextInput. So again as I mentioned above ideal solution will aim to fox MarkdownTextInput

Good to know thanks, I'm going to do some tests then and let you know.

[samilabud]

@hungvu193 as you can see in the video below, I have removed the MarkdownTextInput, I left a normal textinput (from react native) and I start scrolling first (for more details see my root cause explanation here) and then try to click on the TextInput to edit but I only get the scrolling behavior:

https://github.com/Expensify/App/assets/5216036/928ba2b6-b98b-45c5-97dd-0c99765fab6e