Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Prevent the Composer from autofilling redundent data #8730

Merged
merged 3 commits into from
Apr 21, 2022
Merged

Prevent the Composer from autofilling redundent data #8730

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
121cd78
Rename BaseForm to FormElement
parasharrajat Apr 21, 2022
a2a47c6
Turn autoComplete Off on the Composer
parasharrajat Apr 21, 2022
d74c1d0
Use Form element to restrict the autofill on the requestCallPage
parasharrajat Apr 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/components/Composer/index.android.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
1 change: 1 addition & 0 deletions src/components/Composer/index.ios.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
1 change: 1 addition & 0 deletions src/components/Composer/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
8 changes: 4 additions & 4 deletions src/components/SignInPageForm/BaseForm.js → src/components/FormElement.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -12,5 +12,5 @@ const BaseForm = forwardRef((props, ref) => (
/>
));

BaseForm.displayName = 'BaseForm';
export default BaseForm;
FormElement.displayName = 'BaseForm';
export default FormElement;
4 changes: 2 additions & 2 deletions src/components/SignInPageForm/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import BaseForm from './BaseForm';
import FormElement from '../FormElement';

class Form extends React.Component {
componentDidMount() {
Expand All @@ -16,7 +16,7 @@ class Form extends React.Component {

render() {
return (
<BaseForm
<FormElement
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is sort of an ambiguous name. When I think of a FormElement I think of an input and not the form itself...?

ref={el => this.form = el}
// eslint-disable-next-line react/jsx-props-no-spreading
{...this.props}
Expand Down
4 changes: 2 additions & 2 deletions src/components/SignInPageForm/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
81 changes: 42 additions & 39 deletions src/pages/RequestCallPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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 && (
Expand Down