Remove unnecessary style causing bug in android

[aldo-expensify]

cc: @pecanoro @marcaaron @jasperhuangg CC you guys because you have a good idea of what was going on.

Details

I labeled this CP Staging because it is fixing the following regression: #4730 (comment)

The style errorOutline was unnecessary and was causing an unwanted behaviour in Android.

Fixed Issues

$ #4730

Tests/QA

1. Navigate to <baseURL>/bank-account/company.
2. Input invalid data for the following fields and try to submit the form. Verify that red outlines AND growl messages occur.
   • Empty password
   • Invalid address street
   • Invalid address zip code
   • Invalid website URL
   • Invalid company tax ID
   • Invalid industry code
   • Invalid incorporation date

Make sure that in Android the value of the input with error doesn't disappear .

Expected to look like this:

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

Mobile Web

Desktop

iOS

Android

[github-actions]

⚠️ ⚠️ Heads up! This pull request has the CP Staging label. ⚠️ ⚠️
Merging it will cause it to be immediately deployed to staging, even if the open StagingDeployCash deploy checklist is locked.

[luacmartins]

Tests well and code LGTM!

[luacmartins]

@aldo-expensify Feel free to self-merge once tests pass.

[marcaaron]

The style errorOutline was unnecessary and was causing an unwanted behaviour in Android.

I get that it was unnecessary since it looks like we wrapped the TextInput in a View that already has an outline...

App/src/components/ExpensiTextInput/BaseExpensiTextInput.js

Line 136 in eb73fd3

(hasError || errorText) && styles.borderColorDanger,

But is there some explanation for why this should make the element value completely disappear? 🤯

[aldo-expensify]

@marcaaron I don't have good explanation for it, but what I found is:

• The text content didn't really disappear, it was there but out of view. The input of is scrollable and if you scroll you eventually can see the text, but the space available for the text is very small:

Screen.Recording.2021-08-24.at.3.33.34.PM.mov

• In Android we have to make the padding 0 (see styles.expensiTextInputAndroid). If use we a small padding value, i.e. 4:

    expensiTextInputAndroid: left => ({
        padding: 4,
        left,
    }),

The space for the input text becomes smaller and we get some scrolling:

Screen.Recording.2021-08-24.at.3.29.45.PM.mov

• If we remove the padding: 0 completely from styles.expensiTextInputAndroid, the input value is not visible anymore (too much padding?).

I don't know why, but adding the style errorOutline to the TextInput seems to somehow mess up this in a similar way as adding padding messes it up. Maybe when we add the borderColor Android does something with the padding? 🤷 I just found that this fixed it by trial an error, removing and putting back things.

[aldo-expensify]

Update: had to resolve conflict and commit again. Tested again in web and Android and seems to work.

[isagoico]

@aldo-expensify Can this be tested on your side? We're currently unable to navigate to /bank-account/company in Android or iOS bc we don't have access to the current URL in the app.

[aldo-expensify]

@aldo-expensify Can this be tested on your side? We're currently unable to navigate to /bank-account/company in Android or iOS bc we don't have access to the current URL in the app.

Sure, I'm waiting on the PR to be approved and merged.

[roryabraham]

After resolving conflicts during the CP, this PR is being deployed in 1.0.86-11 here

[OSBotify]

🚀 Deployed to production by @roryabraham in version: 1.0.86-11 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	failure ❌
🕸 web 🕸	success ✅

[aldo-expensify]

Tested the stage branch locally with Android device and it is working

IOS failure?

[OSBotify]

🚀 Cherry-picked to staging by @aldo-expensify in version: 1.0.86-11 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

@Expensify/applauseleads please QA this PR and check it off on the deploy checklist if it passes.

[OSBotify]

🚀 Deployed to production by @roryabraham in version: 1.0.88-2 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	failure ❌
🕸 web 🕸	success ✅