[Due for payment 2025-02-19] [$500] [MacOS Chrome / iOS Chrome] Chrome Browser Has Mistaken Form Fields For Inputs in Expensify Chat

[yuwenmemon]

Version Number: 9.0.23-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: Caught during CVP Testing
Email or phone of affected tester (no customers): [email protected]
Logs: N/A
Expensify/Expensify Issue URL: N/A
Issue reported by: @yuwenmemon
Slack conversation: https://expensify.slack.com/archives/C036QM0SLJK/p1724431920271019

Issue

1. On the same account, go to the chat with Concierge on mobile web
2. Click on the text input, your phone keyboard should pop up

Expected Result:

• The keyboard should show on mobile chrome without any form input helpers (i.e. the key, creditcard, and location options above the keyboard)

Actual Result:

• Chrome thinks the input is a form field and thus presents some form field shortcuts above the keyboard:

Workaround:

N/A

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021846212488219658542
• Upwork Job ID: 1846212488219658542
• Last Price Increase: 2024-11-19
• Automatic offers:
• allgandalf | Reviewer | 104995463

Issue Owner

Current Issue Owner: @RachCHopkins

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @allgandalf (External)

[melvin-bot]

Triggered auto assignment to @anmurali (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[Nodebrute]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Chrome Browser Has Mistaken Form Fields For Inputs in Expensify Chat

What is the root cause of that problem?

This issue is not confined to the Onboarding form fields; it also affects other fields, such as the name field in the profile. We should not rely solely on labels for Google to accurately predict the purpose of each field.

What changes do you think we should make in order to solve the problem?

We have an autocomplete attribute that we should use for all TextInput components where we are encountering this problem. We can also set autocomplete to off in the fields where we don't want google to autocomplete.

More Info here.

What alternative solutions did you explore? (Optional)

[klajdipaja]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Chrome browser on mobile tries to autocomplete some input fields like the name in the signup process or in the profile, the merchant when adding expenses etc and in doing so it shows options like Credit Card autofill.
NOTE. I was unable to reproduce this in the Chat with concierge.

What is the root cause of that problem?

Autocomplete is not disabled in components/TextInput even though we are treating it as disabled by not propagating the property in the components/Form/InputWrapper component. Since it's not disabled Chrome uses the label to try and understand how to do that autofill.

What changes do you think we should make in order to solve the problem?

Before passing the props by the wrapper component in:

App/src/components/TextInput/index.tsx

Lines 58 to 59 in 0c84552

	// eslint-disable-next-line react/jsx-props-no-spreading
	{...props}

We should disable it explicitly by adding:

            autoComplete="off"
            // eslint-disable-next-line react/jsx-props-no-spreading 
            {...props}

That would still allow for the props to add an autocomplete option in the wrapper component for special use-cases of the input field.

What alternative solutions did you explore? (Optional)

[melvin-bot]

@yuwenmemon, @anmurali, @allgandalf Whoops! This issue is 2 days overdue. Let's get this updated quick!

[anmurali]

Cannot reproduce the first issue

I can reproduce the second

[trjExpensify]

@allgandalf what do you think of the proposals?

[allgandalf]

There is something wrong with my k2, not able to see recent issues, (Maybe the token has expires 💢 , I will review the Proposals after this deploy blocker today @trjExpensify

[trjExpensify]

Thanks!

[allgandalf]

Reviewing Proposals now ♻️

[allgandalf]

@Nodebrute @klajdipaja are you able to reproduce the 1st issue? can you share a recording of it?

For the second issue:

I am able to reproduce the second issue, but none of the proposals above have the RCA or the solution for the issue, so i suggest both to please update your proposals, this issue is also open for proposals from other contributors 🙏

[allgandalf]

@Nodebrute @klajdipaja will you guys be able to update your proposals ?

[klajdipaja]

@allgandalf I was unable to reproduce the first issue, only the second one.
As for my proposal you are right I tried again and it did not provide the expected fix and with all my research all I could find is that this is a default behavior of Chromium browsers.
The root cause to me seems to be a "bug" or maybe default behavior in Chrome that for every input no matter if you have requested autocompletion or not, the autocompletion bar with the three icons show up. When autocomplete is specified to some type than in addition to these three default icons you could also see a list of suggestions.

There's a long list of hacks on this gist https://gist.github.com/niksumeiko/360164708c3b326bd1c8 that some of the users report as useful but non actually work to remove the whole autofill bar and to be honest I don't think we should aim to go in that direction.
I see three options here:

1. Set autocomplete values appropriately when possible so that the autofill bar becomes meaningful for most inputs. At the moment we are not doing this for 90% of inputs, even email fields do not have the autocomplete set to email which would help users fill the data.
2. Ignore this issue as a chrome behaviour and avoid building workarounds that might become unnecessary in a feature chrome update.
3. Workaround 1. Use RNMarkdownTextInput instead of RNTextInput. You can test it by replacing setting isMarkdownEnabled = true
4. Workaround 2 . Make the input a text-area which is why in some fields like the chat we do not get the autofill bar. That could be done by adding

    maxLength={25}
    multiline={true}
    numberOfLines={1}
```.
I can prepare a proposal for this if you think that would be the direction you want to go. 

[melvin-bot]

@yuwenmemon @anmurali @allgandalf this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[yuwenmemon]

It seems like we're not able to reproduce the first issue across the board, so I'm fine with us tackling just the second issue in proposals.

[allgandalf]

not overdue, waiting for @SzymczakJ to be back from OoO

[SzymczakJ]

I'm back from OOO, I'm planning to start working on it this week I just need to put up a PR for #52317. I'll try to make is as fast as possible to take up this task again.

[yuwenmemon]

Thanks @SzymczakJ!

[allgandalf]

any chance you were able to get to this one @SzymczakJ ?

[SzymczakJ]

I'll try to take a look at it today, the PR that I was talking about is almost ready.

[SzymczakJ]

FYI I started to investigate this, I will split my work time between this issue and finishing #55078 (which soon will be in review stage, so I will have more time for this bug).
I'll publish my investigation progress every one/two days.

[allgandalf]

lets push this one through this week 💪

[SzymczakJ]

After two days of investigating this, this is what I’ve found:

1. Chrome Android bug(the autocomplete bar showing up on every input keyboard)

is well known and we cannot really fix it as it’s on Chrome’s side(reference links: link 1, link 2), but there’s one workaround that I’ve published in the PR above. This workaround won’t work if we need some specific type of inputMode, but it should solve most of the cases like onboarding inputs that show us the card autocomplete, so also card suggestions should not show.

2. The Chrome iOS bug(which is shown in the issue description)

is also well known issue and also out of our reach as it’s caused by Apple itself(ref: link1, link2). After trying out every prop of text input and long search over the internet I don’t see any workaround for this, but the same bug also happens on all popular sites like amazon of facebook, so I think nobody can solve this and we’ll just have to live with it.

I think we could just push the Chrome Android fix as it’s the most we can do in this case. WDYT @yuwenmemon @allgandalf

[allgandalf]

Thanks for investigating, agree with your findings

I think we could just push the Chrome Android fix as it’s the most we can do in this case. WDYT

yeah, works for me, @yuwenmemon should we proceed with the fix here?

[SzymczakJ]

I'll upload videos and test more, when @yuwenmemon gives us green light 🟢

[yuwenmemon]

@allgandalf @SzymczakJ Better than nothing! Thanks for the extensive investigation and write up!

Let's move forward but just be sure to effectively document that this is a workaround in the code where we implement this.

[melvin-bot]

This issue has not been updated in over 15 days. @yuwenmemon, @RachCHopkins, @SzymczakJ, @allgandalf eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.96-1 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix chrome android input bug #55210

If no regressions arise, payment will be issued on 2025-02-19. 🎊

For reference, here are some details about the assignees on this issue:

• @SzymczakJ does not require payment (Contractor)
• @allgandalf requires payment automatic offer (Reviewer)

[melvin-bot]

@allgandalf @RachCHopkins @allgandalf The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]