iOS - Log in - Email input is not scrollable

[isagoico]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Expected Result:

Email input is scrollable when there's a long email

Actual Result:

Email input is not scrollable

Action Performed:

1. Open expensify chat app
2. On the log in screen, enter a long email
3. Try to scroll the email and edit.

Workaround:

No workaround found for editing the email. Just deleting it and rewriting

Platform:

Where is this issue occurring?

Web
iOS ✔️
Android
Desktop App
Mobile Web

Version Number: 1.0.39-0

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos:

Bug5056652_06052021_Ipad.mp4

Expensify/Expensify Issue URL:

View all open jobs on Upwork

Upwork job posting: https://www.upwork.com/jobs/~018d8909d10240a267

[MelvinBot]

Triggered auto assignment to @davidcardoza (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[davidcardoza]

Confirmed I cannot scroll into the text to edit, I am only provided the ability to delete the full-text chain or continue adding to it.

[davidcardoza]

This is a good candidate to send off to upwork.

[MelvinBot]

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

[isagoico]

Issue reproducible during today's KI retests

[arielgreen]

Posted to Upwork here.

[MelvinBot]

Triggered auto assignment to @roryabraham (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[bekazandukeli]

Hello, I already submitted proposal on upwork and here's my workaround:
Problem seems like is rooted deeply into react-native's core as described in this Issue

I already found style property which provokes this react native bug and will fix it in no time.
I will remove this buggy property and create the custom input component which will have the exact styling without provoking any bug.

I read your contribution guidelines and my pull request will be made according to it.

Here is my quick fix video:

quick-fix.1.mp4

[roryabraham]

@bekazandukeli Thanks for providing a video of your solution! Did you just remove the fontFamily and fontSize styles from styles.textInput? Because while it seems to fix the scrolling bug, really we would prefer to fix the root issue rather than have to compromise the styling of the text in any one-line TextInput components throughout our app. If it's just the fontSize and not the fontFamily I sort of think it might be okay, but I could use a second opinion on whether this is an acceptable solution for the time being or if we should try to dig more into the root cause in RN. cc @shawnborton

[Naiem1808015]

Dear sir, I can make custom input component which will be removed all problem. I also design it as you want. My Upwork profile: https://www.upwork.com/o/profiles/users/~01f873d4241da6a7db/ You can trust me for your project. Thank you.

…

On Tue, May 11, 2021, 2:27 AM Beka Zandukeli ***@***.***> wrote: Hello, I already submitted proposal on upwork and here's my workaround: Problem seems like is rooted deeply into react-native's core as described in this Issue <facebook/react-native#26393> I already found style property which provokes this react native bug and will fix it in no time. I will remove this buggy property and create the custom input component which will have the exact styling without any bug. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2726 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASTFYUOZ4HWBMLSXME4GPTTTNA6S5ANCNFSM44ID6TYA> .

[bekazandukeli]

@bekazandukeli Thanks for providing a video of your solution! Did you just remove the fontFamily and fontSize styles from styles.textInput? Because while it seems to fix the scrolling bug, really we would prefer to fix the root issue rather than have to compromise the styling of the text in any one-line TextInput components throughout our app. If it's just the fontSize and not the fontFamily I sort of think it might be okay, but I could use a second opinion on whether this is an acceptable solution for the time being or if we should try to dig more into the root cause in RN. cc @shawnborton

Investigation

My solution is simpler, I think we won't need to create custom component either. I further investigated problem and it occurs when ratio of height / fontSize is around same value as current 40 / 15.

For example setting height: 41 fontSize: 15 fixes bug, as well as height: 40 fontSize: 14, but when height: 41 fontSize: 16 bug occurs again.

also:

39 / 14 not fixes
37 / 12 not fixes
36 / 11 fixes

Solution 🚀

I think the most short and elegant solution will be to break this magic buggy 40 / 15 ratio and make it 41 / 15 with setting height: variables.componentSizeNormal + 1, it will have no impact on whole app UI and TextInput UI change will not be noticeable for eye also. I think it's the safest fix.

P.S.

• Removing height: variables.componentSizeNormal is a bad idea because it will cause different input size on Android / iOS since defaults on these platforms are different.
• Creating a new custom InputField will be an overkill.
• Changing fontSize is not the best option, since font becomes noticeably smaller/larger.

[vmv94]

https://www.upwork.com/ab/proposals/1391994416817717249?success
Hello! I have a variant for fix this task. I was send you a proposal. I create a new component with scrollview out of TextInput with special styles and methods. How it work you can see on my video.

appVideo.mp4

A second solution can be TextInput with multiple strings and dynamic height.

I will glad to work with your team!

[shawnborton]

@roryabraham do we have a clear idea of why this bug is happening? It seems like there are a variety of interesting workarounds, but I'm curious if we understand the root cause.

Ideally we keep our font size at the standard 15, and our standard input size is at 40.

[roryabraham]

do we have a clear idea of why this bug is happening?

Short answer: no, not really 😅 It's a bug with RN itself.

Thanks for the detailed explanation @bekazandukeli. I personally would rather have your simple workaround for the time being than a custom-implemented TextInput like @vmv94 has proposed. Both solutions work, but again, the best solution would be to fix this bug upstream in RN so we don't need a workaround.

[isagoico]

Issue reproducible during today's KI retests

[arielgreen]

Thanks all. Closing this issue out — we've decided to change the scope (and raise the price).

cc @bekazandukeli @vmv94 @Naiem1808015 I encourage you to take a look at #2973 and submit a proposal if you're still interested! New Upwork job is here.