From 121cd786244d9fd6032e8342b3168ce970205272 Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Thu, 21 Apr 2022 20:37:40 +0530
Subject: [PATCH 1/3] Rename BaseForm to FormElement

---
 .../{SignInPageForm/BaseForm.js => FormElement.js}        | 8 ++++----
 src/components/SignInPageForm/index.js                    | 4 ++--
 src/components/SignInPageForm/index.native.js             | 4 ++--
 3 files changed, 8 insertions(+), 8 deletions(-)
 rename src/components/{SignInPageForm/BaseForm.js => FormElement.js} (63%)

diff --git a/src/components/SignInPageForm/BaseForm.js b/src/components/FormElement.js
similarity index 63%
rename from src/components/SignInPageForm/BaseForm.js
rename to src/components/FormElement.js
index 21a4e19b1f9b..f46b24708c4c 100644
--- a/src/components/SignInPageForm/BaseForm.js
+++ b/src/components/FormElement.js
@@ -1,8 +1,8 @@
 import React, {forwardRef} from 'react';
 import {View} from 'react-native';
-import * as ComponentUtils from '../../libs/ComponentUtils';
+import * as ComponentUtils from '../libs/ComponentUtils';
 
-const BaseForm = forwardRef((props, ref) => (
+const FormElement = forwardRef((props, ref) => (
     <View
         accessibilityRole={ComponentUtils.ACCESSIBILITY_ROLE_FORM}
         accessibilityAutoComplete="on"
@@ -12,5 +12,5 @@ const BaseForm = forwardRef((props, ref) => (
     />
 ));
 
-BaseForm.displayName = 'BaseForm';
-export default BaseForm;
+FormElement.displayName = 'BaseForm';
+export default FormElement;
diff --git a/src/components/SignInPageForm/index.js b/src/components/SignInPageForm/index.js
index 163f1ee223b1..4ee95d1cb81e 100644
--- a/src/components/SignInPageForm/index.js
+++ b/src/components/SignInPageForm/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import BaseForm from './BaseForm';
+import FormElement from '../FormElement';
 
 class Form extends React.Component {
     componentDidMount() {
@@ -16,7 +16,7 @@ class Form extends React.Component {
 
     render() {
         return (
-            <BaseForm
+            <FormElement
                 ref={el => this.form = el}
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...this.props}
diff --git a/src/components/SignInPageForm/index.native.js b/src/components/SignInPageForm/index.native.js
index 21f10e7a428d..d09e60c1b98d 100644
--- a/src/components/SignInPageForm/index.native.js
+++ b/src/components/SignInPageForm/index.native.js
@@ -1,8 +1,8 @@
 import React from 'react';
-import BaseForm from './BaseForm';
+import FormElement from '../FormElement';
 
 // eslint-disable-next-line react/jsx-props-no-spreading
-const Form = props => <BaseForm {...props} />;
+const Form = props => <FormElement {...props} />;
 
 Form.displayName = 'Form';
 export default Form;

From a2a47c60988dcc971c86f0ae2e7f2cc7d10f5193 Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Thu, 21 Apr 2022 20:41:47 +0530
Subject: [PATCH 2/3] Turn autoComplete Off on the Composer

---
 src/components/Composer/index.android.js | 1 +
 src/components/Composer/index.ios.js     | 1 +
 src/components/Composer/index.js         | 1 +
 3 files changed, 3 insertions(+)

diff --git a/src/components/Composer/index.android.js b/src/components/Composer/index.android.js
index ed23d98020f2..687ac17ff91b 100644
--- a/src/components/Composer/index.android.js
+++ b/src/components/Composer/index.android.js
@@ -64,6 +64,7 @@ class Composer extends React.Component {
     render() {
         return (
             <RNTextInput
+                autoComplete="off"
                 placeholderTextColor={themeColors.placeholderText}
                 ref={el => this.textInput = el}
                 maxHeight={CONST.COMPOSER_MAX_HEIGHT}
diff --git a/src/components/Composer/index.ios.js b/src/components/Composer/index.ios.js
index 73784ace874e..d61339f18f3f 100644
--- a/src/components/Composer/index.ios.js
+++ b/src/components/Composer/index.ios.js
@@ -76,6 +76,7 @@ class Composer extends React.Component {
         const propsToPass = _.omit(this.props, 'selection');
         return (
             <RNTextInput
+                autoComplete="off"
                 placeholderTextColor={themeColors.placeholderText}
                 ref={el => this.textInput = el}
                 maxHeight={CONST.COMPOSER_MAX_HEIGHT}
diff --git a/src/components/Composer/index.js b/src/components/Composer/index.js
index caec71317e84..740d28757a6f 100755
--- a/src/components/Composer/index.js
+++ b/src/components/Composer/index.js
@@ -348,6 +348,7 @@ class Composer extends React.Component {
         const propsWithoutStyles = _.omit(this.props, 'style');
         return (
             <RNTextInput
+                autoComplete="off"
                 placeholderTextColor={themeColors.placeholderText}
                 ref={el => this.textInput = el}
                 selection={this.state.selection}

From d74c1d081d8f1cbabba1b714b70203c90e8334a5 Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Thu, 21 Apr 2022 20:56:22 +0530
Subject: [PATCH 3/3] Use Form element to restrict the autofill on the
 requestCallPage

---
 src/pages/RequestCallPage.js | 81 +++++++++++++++++++-----------------
 1 file changed, 42 insertions(+), 39 deletions(-)

diff --git a/src/pages/RequestCallPage.js b/src/pages/RequestCallPage.js
index 84504769a867..582c056b87b9 100644
--- a/src/pages/RequestCallPage.js
+++ b/src/pages/RequestCallPage.js
@@ -31,6 +31,7 @@ import * as LoginUtils from '../libs/LoginUtils';
 import * as ValidationUtils from '../libs/ValidationUtils';
 import * as PersonalDetails from '../libs/actions/PersonalDetails';
 import * as User from '../libs/actions/User';
+import FormElement from '../components/FormElement';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -262,45 +263,47 @@ class RequestCallPage extends Component {
                         onCloseButtonPress={() => Navigation.dismissModal(true)}
                     />
                     <ScrollView style={styles.flex1}>
-                        <Section
-                            title={this.props.translate('requestCallPage.subtitle')}
-                            icon={Illustrations.ConciergeExclamation}
-                        >
-                            <Text style={styles.mb4}>
-                                {this.props.translate('requestCallPage.description')}
-                            </Text>
-                            <FullNameInputRow
-                                firstName={this.state.firstName}
-                                firstNameError={PersonalDetails.getMaxCharacterError(this.state.hasFirstNameError)}
-                                lastName={this.state.lastName}
-                                lastNameError={PersonalDetails.getMaxCharacterError(this.state.hasLastNameError)}
-                                onChangeFirstName={firstName => this.setState({firstName})}
-                                onChangeLastName={lastName => this.setState({lastName})}
-                                style={[styles.mv4]}
-                            />
-                            <TextInput
-                                label={this.props.translate('common.phoneNumber')}
-                                name="phone"
-                                autoCorrect={false}
-                                value={this.state.phoneNumber}
-                                placeholder="2109400803"
-                                errorText={this.state.phoneNumberError}
-                                onBlur={this.validatePhoneInput}
-                                onChangeText={phoneNumber => this.setState({phoneNumber})}
-                            />
-                            <TextInput
-                                label={this.props.translate('requestCallPage.extension')}
-                                autoCompleteType="off"
-                                autoCorrect={false}
-                                value={this.state.phoneExtension}
-                                placeholder="100"
-                                errorText={this.state.phoneExtensionError}
-                                onBlur={this.validatePhoneExtensionInput}
-                                onChangeText={phoneExtension => this.setState({phoneExtension})}
-                                containerStyles={[styles.mt4]}
-                            />
-                            <Text style={[styles.textMicroSupporting, styles.mt4]}>{this.getWaitTimeMessage()}</Text>
-                        </Section>
+                        <FormElement>
+                            <Section
+                                title={this.props.translate('requestCallPage.subtitle')}
+                                icon={Illustrations.ConciergeExclamation}
+                            >
+                                <Text style={styles.mb4}>
+                                    {this.props.translate('requestCallPage.description')}
+                                </Text>
+                                <FullNameInputRow
+                                    firstName={this.state.firstName}
+                                    firstNameError={PersonalDetails.getMaxCharacterError(this.state.hasFirstNameError)}
+                                    lastName={this.state.lastName}
+                                    lastNameError={PersonalDetails.getMaxCharacterError(this.state.hasLastNameError)}
+                                    onChangeFirstName={firstName => this.setState({firstName})}
+                                    onChangeLastName={lastName => this.setState({lastName})}
+                                    style={[styles.mv4]}
+                                />
+                                <TextInput
+                                    label={this.props.translate('common.phoneNumber')}
+                                    name="phone"
+                                    autoCorrect={false}
+                                    value={this.state.phoneNumber}
+                                    placeholder="2109400803"
+                                    errorText={this.state.phoneNumberError}
+                                    onBlur={this.validatePhoneInput}
+                                    onChangeText={phoneNumber => this.setState({phoneNumber})}
+                                />
+                                <TextInput
+                                    label={this.props.translate('requestCallPage.extension')}
+                                    autoCompleteType="off"
+                                    autoCorrect={false}
+                                    value={this.state.phoneExtension}
+                                    placeholder="100"
+                                    errorText={this.state.phoneExtensionError}
+                                    onBlur={this.validatePhoneExtensionInput}
+                                    onChangeText={phoneExtension => this.setState({phoneExtension})}
+                                    containerStyles={[styles.mt4]}
+                                />
+                                <Text style={[styles.textMicroSupporting, styles.mt4]}>{this.getWaitTimeMessage()}</Text>
+                            </Section>
+                        </FormElement>
                     </ScrollView>
                     <FixedFooter>
                         {isBlockedFromConcierge && (