[$500] mWeb/Chrome - Profile setting - The autofill field remains when scrolling the page

[kbecciv]

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 URL https://staging.new.expensify.com/
2. Login with any account
3. Go to Settings->Profile
4. Focus on the name input field (first or last name)
5. Scroll the page

Expected Result:

The autofill field should be hidden

Actual Result:

The autofill field remains

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Mobile Web

Version Number: 1.2.7.2

Reproducible in staging?: Yes

Reproducible in production?: Yes

Email or phone of affected tester (no customers): any

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

Notes/Photos/Videos: Any additional supporting documentation

Bug5751085_Record_2022-09-27-11-45-13.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - internal Team

Slack conversation:

View all open jobs on GitHub

[melvin-bot]

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

[marcochavezf]

I was able to reproduce this one on production too. Looking at other sites, the autofill pop-up disappears when the user scrolls down/up the page.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Current assignee @marcochavezf is eligible for the External assigner, not assigning anyone new.

[tienifr]

Proposal

Problem

The default behavior of removing autofill is when we scroll window. Unfortunately, our form stays inside other container so when we scroll, we'll scroll this container not window.
I think it's the native component of chrome so the browser does not give us access to.

ref: https://stackoverflow.com/a/45446880

Solution

My suggestion is to remove and restore from the active input field in a form's onScroll event

in https://github.com/Expensify/App/blob/1bed3e5bc8c895eb630206e19c0aa82970f890f1/src/pages/settings/Profile/ProfilePage.js
Because this issue happens only on chrome browser so I have to check if activeElement is defined or not

+    onScroll(){
+        const activeElement = get(window,'document.activeElement')
+        if(!activeElement) return;
+        activeElement.blur();
+        activeElement.focus();
+    }

                <Form
                    style={[styles.flexGrow1, styles.ph5]}
                    formID={CONST.PROFILE_SETTINGS_FORM}
                    validate={this.validate}
                    onSubmit={this.updatePersonalDetails}
                    submitButtonText={this.props.translate('common.save')}
+                  onScroll={this.onScroll}
                >

In https://github.com/Expensify/App/blob/1bed3e5bc8c895eb630206e19c0aa82970f890f1/src/components/Form.js
I also set scrollEventThrottle: 400(ms) to prevent the onScroll call too much times. Actually, the onScroll func just makes sense at the first time it's called to remove the autofill component

    onSubmit: PropTypes.func.isRequired,

    children: PropTypes.node.isRequired,

+    onScroll: PropTypes.func,

                <ScrollView
                    style={[styles.w100, styles.flex1]}
                    contentContainerStyle={styles.flexGrow1}
                    keyboardShouldPersistTaps="handled"
+                  onScroll={this.props.onScroll}
+                  scrollEventThrottle={400}
                >

Screen.Recording.2022-09-29.at.14.02.42.mp4