Solved closing of keyboard on changing text field on profile page

src/ONYXKEYS.js

@@ -194,5 +194,6 @@ export default {
     // List of Form ids
     FORMS: {
         ADD_DEBIT_CARD_FORM: 'addDebitCardForm',
+        PROFILE_FORM: 'profileForm',
     },
 };

src/libs/actions/PersonalDetails.js

@@ -292,6 +292,10 @@ function setPersonalDetails(details, shouldGrowl) {
             } else {
                 console.debug('Error while setting personal details', response);
             }
+
+            Onyx.merge(ONYXKEYS.FORMS.PROFILE_FORM, {
+                isSubmitting: false,
+            });
         });
 }
 

src/pages/settings/Profile/ProfilePage.js

@@ -2,7 +2,7 @@ import lodashGet from 'lodash/get';
 import React, {Component} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
-import {View, ScrollView} from 'react-native';
+import {View} from 'react-native';
 import Str from 'expensify-common/lib/str';
 import moment from 'moment-timezone';
 import _ from 'underscore';
@@ -18,17 +18,15 @@ import Text from '../../../components/Text';
 import LoginField from './LoginField';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import compose from '../../../libs/compose';
-import Button from '../../../components/Button';
 import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView';
-import FixedFooter from '../../../components/FixedFooter';
 import TextInput from '../../../components/TextInput';
 import Picker from '../../../components/Picker';
-import FullNameInputRow from '../../../components/FullNameInputRow';
 import CheckboxWithLabel from '../../../components/CheckboxWithLabel';
 import AvatarWithImagePicker from '../../../components/AvatarWithImagePicker';
 import currentUserPersonalDetailsPropsTypes from './currentUserPersonalDetailsPropsTypes';
 import * as ValidationUtils from '../../../libs/ValidationUtils';
 import * as ReportUtils from '../../../libs/ReportUtils';
+import Form from '../../../components/Form';
 
 const propTypes = {
     /* Onyx Props */
@@ -86,9 +84,9 @@ class ProfilePage extends Component {
         };
 
         this.getLogins = this.getLogins.bind(this);
+        this.validate = this.validate.bind(this);
         this.setAutomaticTimezone = this.setAutomaticTimezone.bind(this);
         this.updatePersonalDetails = this.updatePersonalDetails.bind(this);
-        this.validateInputs = this.validateInputs.bind(this);
         this.updateAvatar = this.updateAvatar.bind(this);
     }
 
@@ -162,10 +160,6 @@ class ProfilePage extends Component {
      * Submit form to update personal details
      */
     updatePersonalDetails() {
-        if (!this.validateInputs()) {
-            return;
-        }
-
         // Check if the user has modified their avatar
         if ((this.props.myPersonalDetails.avatar !== this.state.avatar.uri) && this.state.isAvatarChanged) {
             // If the user removed their profile photo, replace it accordingly with the default avatar
@@ -190,17 +184,46 @@ class ProfilePage extends Component {
         }, true);
     }
 
-    validateInputs() {
-        const [hasFirstNameError, hasLastNameError, hasPronounError] = ValidationUtils.doesFailCharacterLimit(
-            50,
-            [this.state.firstName.trim(), this.state.lastName.trim(), this.state.pronouns.trim()],
-        );
-        this.setState({
-            hasFirstNameError,
-            hasLastNameError,
-            hasPronounError,
-        });
-        return !hasFirstNameError && !hasLastNameError && !hasPronounError;
+    validate(values) {
+        const errors = {};
+
+        if (values.firstName) {
+            const [hasFirstNameError] = ValidationUtils.doesFailCharacterLimit(
+                50,
+                [values.firstName.trim()],
+            );
+
+            if(hasFirstNameError) {
+                this.setState({hasFirstNameError});
+                errors.firstName = PersonalDetails.getMaxCharacterError(this.state.hasFirstNameError);
+            }
+        }
+
+        if (values.lastName) {
+            const [hasLastNameError] = ValidationUtils.doesFailCharacterLimit(
+                50,
+                [values.lastName.trim()],
+            );
+
+            if(hasLastNameError) {
+                this.setState({hasLastNameError});
+                errors.lastName = PersonalDetails.getMaxCharacterError(this.state.hasLastNameError);
+            }
+        }
+
+        if (values.pronouns) {
+            const [hasPronounError] = ValidationUtils.doesFailCharacterLimit(
+                50,
+                [values.pronouns.trim()],
+            );
+
+            if(hasPronounError) {
+                this.setState({hasPronounError});
+                errors.pronouns = PersonalDetails.getMaxCharacterError(this.state.hasPronounError);
+            }
+        }
+
+        return errors;
     }
 
     render() {
@@ -209,14 +232,6 @@ class ProfilePage extends Component {
             value: `${CONST.PRONOUNS.PREFIX}${key}`,
         }));
 
-        // Disables button if none of the form values have changed
-        const isButtonDisabled = (this.props.myPersonalDetails.firstName === this.state.firstName.trim())
-            && (this.props.myPersonalDetails.lastName === this.state.lastName.trim())
-            && (this.props.myPersonalDetails.timezone.selected === this.state.selectedTimezone)
-            && (this.props.myPersonalDetails.timezone.automatic === this.state.isAutomaticTimezone)
-            && (this.props.myPersonalDetails.pronouns === this.state.pronouns.trim())
-            && (!this.state.isAvatarChanged || this.props.myPersonalDetails.avatarUploading);
-
         const pronounsPickerValue = this.state.hasSelfSelectedPronouns ? CONST.PRONOUNS.SELF_SELECT : this.state.pronouns;
 
         return (
@@ -228,8 +243,15 @@ class ProfilePage extends Component {
                         onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS)}
                         onCloseButtonPress={() => Navigation.dismissModal(true)}
                     />
-                    <ScrollView style={styles.flex1} contentContainerStyle={styles.p5}>
+                    <Form
+                        style={[styles.flex1, styles.p5]}
+                        formID={ONYXKEYS.FORMS.PROFILE_FORM}
+                        validate={this.validate}
+                        onSubmit={this.updatePersonalDetails}
+                        submitButtonText={this.props.translate('common.save')}
+                    >
                         <AvatarWithImagePicker
+                            inputID="avatar"
                             isUploading={this.props.myPersonalDetails.avatarUploading}
                             isUsingDefaultAvatar={this.state.avatar.uri.includes('/images/avatars/avatar')}
                             avatarURL={this.state.avatar.uri}
@@ -241,17 +263,36 @@ class ProfilePage extends Component {
                         <Text style={[styles.mt6, styles.mb6]}>
                             {this.props.translate('profilePage.tellUsAboutYourself')}
                         </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.mt4, styles.mb4]}
-                        />
+
+                        <View style={[styles.flexRow, styles.mt4, styles.mb4]}>
+                            <View style={styles.flex1}>
+                                <TextInput
+                                    inputID="firstName"
+                                    name="fname"
+                                    label={this.props.translate('common.firstName')}
+                                    value={this.state.firstName}
+                                    hasError={this.state.hasFirstNameError}
+                                    errorText={PersonalDetails.getMaxCharacterError(this.state.hasFirstNameError)}
+                                    onChangeText={firstName => this.setState({firstName})}
+                                    placeholder={this.props.translate('profilePage.john')}
+                                />
+                            </View>
+                            <View style={[styles.flex1, styles.ml2]}>
+                                <TextInput
+                                    inputID="lastName"
+                                    name="lname"
+                                    label={this.props.translate('common.lastName')}
+                                    value={this.state.lastName}
+                                    hasError={this.state.hasLastNameError}
+                                    errorText={PersonalDetails.getMaxCharacterError(this.state.hasLastNameError)}
+                                    onChangeText={lastName => this.setState({lastName})}
+                                    placeholder={this.props.translate('profilePage.doe')}
+                                />
+                            </View>
+                        </View>
                         <View style={styles.mb6}>
                             <Picker
+                                inputID="pronounsPicker"
                                 label={this.props.translate('profilePage.preferredPronouns')}
                                 onInputChange={(pronouns) => {
                                     const hasSelfSelectedPronouns = pronouns === CONST.PRONOUNS.SELF_SELECT;
@@ -266,53 +307,50 @@ class ProfilePage extends Component {
                                     label: this.props.translate('profilePage.selectYourPronouns'),
                                 }}
                                 value={pronounsPickerValue}
+                                shouldSaveDraft
                             />
                             {this.state.hasSelfSelectedPronouns && (
                                 <View style={styles.mt2}>
                                     <TextInput
+                                        inputID="pronounSelected"
                                         value={this.state.pronouns}
                                         onChangeText={pronouns => this.setState({pronouns})}
                                         placeholder={this.props.translate('profilePage.selfSelectYourPronoun')}
+                                        hasError={this.state.hasPronounError}
                                         errorText={PersonalDetails.getMaxCharacterError(this.state.hasPronounError)}
                                     />
                                 </View>
                             )}
                         </View>
                         <LoginField
+                            inputID="loginEmail"
                             label={this.props.translate('profilePage.emailAddress')}
                             type="email"
                             login={this.state.logins.email}
                         />
                         <LoginField
+                            inputID="loginPhoneNumber"
                             label={this.props.translate('common.phoneNumber')}
                             type="phone"
                             login={this.state.logins.phone}
                         />
                         <View style={styles.mb3}>
                             <Picker
+                                inputID="timezonePicker"
                                 label={this.props.translate('profilePage.timezone')}
                                 onInputChange={selectedTimezone => this.setState({selectedTimezone})}
                                 items={timezones}
                                 isDisabled={this.state.isAutomaticTimezone}
                                 value={this.state.selectedTimezone}
+                                shouldSaveDraft
                             />
                         </View>
                         <CheckboxWithLabel
                             label={this.props.translate('profilePage.setMyTimezoneAutomatically')}
                             isChecked={this.state.isAutomaticTimezone}
                             onInputChange={this.setAutomaticTimezone}
                         />
-                    </ScrollView>
-                    <FixedFooter>
-                        <Button
-                            success
-                            isDisabled={isButtonDisabled}
-                            onPress={this.updatePersonalDetails}
-                            style={[styles.w100]}
-                            text={this.props.translate('common.save')}
-                            pressOnEnter
-                        />
-                    </FixedFooter>
+                    </Form>
                 </KeyboardAvoidingView>
             </ScreenWrapper>
         );