mWeb - Focus on search boxes changes when tapping outside the box (Visual issue)

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

---

Action Performed:

1. Log in to e.cash on mobile web (iOS)
2. Open search
3. Tap outside the box

Expected Result:

Focus should be consistent in all inputs

Actual Result:

Focus is not consistent on different inputs. There's a different behaviour (visual) on the text boxes when editing the profile info.

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platform:

Where is this issue occurring?

Web
iOS
Android
Desktop App
Mobile Web ✔️

Version Number: 1.0.74-0

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

Notes/Photos/Videos:

Screen.Recording.2021-06-27.at.9.10.10.PM.mov

Expensify/Expensify Issue URL:

View all open jobs on Upwork

---

From @aliabbasmalik8 https://expensify.slack.com/archives/C01GTK53T8Q/p1624842576154800

Produced on click outside the input. Also have on other inputs

[MelvinBot]

Triggered auto assignment to @Dal-Papa (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[MelvinBot]

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

[aliabbasmalik8]

PROPOSAL:

textInputReversedFocus: {
    borderColor: themeColors.borderFocus,
    outline: 'none',
},

Need to update textInputReversedFocus styling object like above mentioned code
https://github.com/Expensify/Expensify.cash/blob/5cde3ca0d202f1086d24d2449c84a4482c688892/src/styles/styles.js#L413-L415

Thanks

[MelvinBot]

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

[stephanieelliott]

Posted to Upwork: https://www.upwork.com/jobs/~017c26f39d5e9d2473

[devpanther]

Can't find this issue on v1.0.75-5

Screen.Recording.2021-07-01.at.5.22.48.AM.mov

[aliabbasmalik8]

Platform:
Mobile Web
Browser
Safari

Screen.Recording.2021-07-01.at.12.36.01.AM.mov

[chiragsalian]

The proposal looks good to me. @aliabbasmalik8 feel free to create the PR.
@stephanieelliott could you hire @aliabbasmalik8 in upwork when you get the chance. Thank you.

[stephanieelliott]

Hi @aliabbasmalik8 please submit yourself for the job on Upwork so we may hire you: https://www.upwork.com/jobs/~017c26f39d5e9d2473

[aliabbasmalik8]

@chiragsalian This issue only produced on iPhone 11 IOS 14.4 safari for me, so before raising PR want to confirm. is it also produced for others on the same platform?

[haseebrehmanpc]

PROPOSAL:
There are multiple people who already have posted the answers but just for the explanations I will first try out with outline: 'none' in CSS. If its not working for any reasons I will jump to solution two which is to use :focus and regular CSS methods specifically for this. Third thing I can try is to get the ref of this node and use JavaScript code to apply CSS forcefully.

[chiragsalian]

@aliabbasmalik8, good question. Let's ask @isagoico, any idea which mobile version had the issue, and was the issue also reproducible on Android mobile web?

[isagoico]

I was able to reproduce the issue in iOS mWeb (Chrome) for build 1.0.75-5 in the search text box.

On Android mWeb it was not reproducible

[aliabbasmalik8]

Hi @aliabbasmalik8 please submit yourself for the job on Upwork so we may hire you: https://www.upwork.com/jobs/~017c26f39d5e9d2473

I submit the proposal for the JOB on upwork.

Thanks

[stephanieelliott]

@aliabbasmalik8 what is your name on Upwork? Not sure which one is you in the list there and want to make sure we hire the right person 😃

[aliabbasmalik8]

@aliabbasmalik8 what is your name on Upwork? Not sure which one is you in the list there and want to make sure we hire the right person 😃
Here are my details.

JOB Proposal: https://www.upwork.com/ab/proposals/1412072722105774081
Name: Ali A

[stephanieelliott]

Great, sent you the offer @aliabbasmalik8!

[stephanieelliott]

@aliabbasmalik8 once you've created the PR, can you please link it to this issue?

[aliabbasmalik8]

@chiragsalian it looks like this issue is already resolved on this PR #3414 and this issue looks like part of that issue.

[kakajann]

I've already solved this issue in #3414

Screen.Recording.2021-07-11.at.8.22.02.AM.mov

[chiragsalian]

Ah alright, I didn't notice the dupe earlier, and sorry for the trouble @aliabbasmalik8. Thanks for catching it.
I'm going to close this issue as its a dupe since its part of this GH - #3108