Merge pull request #8730 from parasharrajat/fix-autofill

Prevent the Composer from autofilling redundent data
Expensify · Apr 21, 2022 · 6d71878 · 6d71878
2 parents f27934b + d74c1d0
commit 6d71878
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 47 deletions.
diff --git 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
@@ -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
@@ -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}

diff --git a/src/components/SignInPageForm/BaseForm.js → src/components/FormElement.js b/src/components/SignInPageForm/BaseForm.js → 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
@@ -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
@@ -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;
diff --git 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 && (