Web - New text input does not work with autofill

[kavimuru]

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. Go to https://staging.new.expensify.com
2. Log in with expensifail account
3. Navigate to the company page https://staging.new.expensify.com/bank-account/company.
4. Observe the page

Expected Result:

When using auto-fill, the label should not overlap the value in the text box.

Actual Result:

When the text input is auto-filled, the label overlaps with the value.

Workaround:

Don't use autofill (unacceptable)

Platform:

• Web

Version Number:
1.0.85-0
Logs: https://stackoverflow.com/c/expensify/questions/4856
**Notes/Photos/Videos:

Expensify/Expensify Issue URL:

View all open jobs on Upwork

[OSBotify]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open StagingDeployCash deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[MelvinBot]

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

[Jag96]

It looks like #3414 is the offending PR here, the main change here was replacing TextInputWitihLabel with ExpensiTextInput here and updating the Picker used here.

I confirmed the issue happens on version 1.0.83-2 which is the version after this PR was merged (it isn't happening on 1.0.83-1 which is production atm).

@kakajann can you please take a look? cc @roryabraham

[Luke9389]

I'll be shortening the copy on the Company Address input field, so no need to work on that here.

The regression here is that the input label overlaps with the value when the field gets auto-filled.
@MitchExpensify verified that this is happening

[Luke9389]

@kavimuru, thanks for making this issue. I've changed the title and the description to reflect the exact problem that we need to get fixed.

[Luke9389]

@parasharrajat, to clarify, the tab behavior has indeed been fixed by your PR. It's the auto-fill problem that we're still seeing.

[parasharrajat]

OK, I think I found the main issue for autofill. the technique to trigger the label position is not correct as it is not checking the current state of the input value.

So instead of checking the prop value, we should check the value in the inputField. This value is a prop that will never update when the value is auto-filled.

App/src/components/ExpensiTextInput/BaseExpensiTextInput.js

Line 47 in 2b48ffb

if (this.props.value.length === 0) {

We have to track the value changes using the onChangeText as this component is controlled. I am working on the implementation to test it.

[parasharrajat]

It's good to revert the title to Web - New Text Input does not work with auto-fill

[Luke9389]

OK, @parasharrajat, we're gonna make this issue exclusively about the auto-fill problem, and then Export this to Upwork, and get you hired for this auto-fill fix ASAP. Sound good?

[parasharrajat]

Yup @Luke9389 Fix is ready.

[Luke9389]

Awesome, @MitchExpensify is getting the job set up in Upwork as we speak.

[MitchExpensify]

Upwork job

[parasharrajat]

PR #4632 cc: @Luke9389

[lmf-git]

I found this via upwork.

The reason your autofill field isn't working is that autofill does not trigger the change event. I've encountered this before but I had to stray deep into my memory palace to figure out why.

I'm hesitant to dedicate my time to this when someone could come along and swipe my investment but I thought I'd at least leave this comment to assist you.

[isagoico]

Retest for this was a pass 🎉 These 2 issues are still reproducible tho #4630 and #4631

[Luke9389]

Thanks, @isagoico! The other two issues still occurring is expected. One of them was merged after you tested this, and the other hasn't been merged yet.

[MitchExpensify]

Paid! cc @parasharrajat