Security - Placeholder is overlapping with entered text #7422

kbecciv · 2022-01-26T16:04:17Z

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:

Launch the app
Log in with any account
Go to Settings - Security - Close account
On Enter email box start typing the email

Expected Result:

Placeholder is not overlapping with entered text

Actual Result:

Placeholder is overlapping with entered text

Workaround:

Unknown

Platform:

Where is this issue occurring?

iOS (issue reproduce for small devices - iPhone 8)
Android (issue reproduce for small devices - Samsung Galaxy S21)

Version Number: 1.1.33 -2

Reproducible in staging?: Yes

Reproducible in production?: Yes

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

Notes/Photos/Videos: Any additional supporting documentation

Image.from.iOS.7.MP4

Expensify/Expensify Issue URL:

Issue reported by: Applause

Slack conversation:

View all open jobs on GitHub

MelvinBot · 2022-01-26T16:04:20Z

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

bondydaa · 2022-01-26T17:24:21Z

well that's an annoying regression 😞

I would guess external can handle this though we should probably check to see what PR caused this.

MelvinBot · 2022-01-26T17:24:33Z

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

mateusbra · 2022-01-26T18:01:02Z

@parasharrajat is that an issue you're working on within your TextInput's PRs? if you're not working on this one I would like to.

parasharrajat · 2022-01-26T18:22:44Z

Sorry but this is a duplicate of #7379.

mateusbra · 2022-01-26T18:24:45Z

No worries, thank you for the reply.

mvtglobally · 2022-01-26T21:39:20Z

@mateusbra @parasharrajat
I do not believe #7379 is same. This issue is about text OVER placeholder. 7379 is only about how placeholder text displayed. Check this out.

parasharrajat · 2022-01-27T00:22:52Z

@mvtglobally the root cause is the same. Due to the long label, it is overlapping on the value.

mvtglobally · 2022-01-27T01:58:09Z

label should disappear like on bunch of other CTAs across Expensify.
If this text meant to persist, it should be not inside the box but somewhere outside...

Recording.384.mp4

parasharrajat · 2022-01-27T03:40:15Z

Ah, you may be confusing two things here. Let me clarify this and then we can evaluate.

The related field for this issue is using a label.
Placeholder should vanish when the user starts typing.
label should stack top in New Expensify when the user starts typing.
Here label is bigger than the width of the Input box thus it wraps in the next lines. But Input is designed to have only one line label text.
Thus the typed value is overlapping with the label.

In the other issue, I was reporting the same behavior but I used more technical statement which may be confusing here.

But we can keep this issue open and wait to see if this is fixed by #7379.

MelvinBot · 2022-02-14T19:20:09Z