From bc4fed440144ae4250e4a3b3543179ecc97f879d Mon Sep 17 00:00:00 2001
From: Md Neyaz Ahmad <mdneyazahmad66@gmail.com>
Date: Tue, 13 Sep 2022 21:42:51 +0530
Subject: [PATCH 01/18] Fix form submit with enter press

---
 src/components/FormAlertWithSubmitButton.js  |   1 -
 src/components/FormSubmit/index.js           |  61 ++++++++
 src/components/FormSubmit/index.native.js    |  20 +++
 src/pages/SetPasswordPage.js                 |  41 ++---
 src/pages/settings/NewPasswordForm.js        |   3 -
 src/pages/workspace/WorkspaceSettingsPage.js | 148 ++++++++++---------
 6 files changed, 177 insertions(+), 97 deletions(-)
 create mode 100644 src/components/FormSubmit/index.js
 create mode 100644 src/components/FormSubmit/index.native.js

diff --git a/src/components/FormAlertWithSubmitButton.js b/src/components/FormAlertWithSubmitButton.js
index ca1e86d817ea..16da0aca0e1b 100644
--- a/src/components/FormAlertWithSubmitButton.js
+++ b/src/components/FormAlertWithSubmitButton.js
@@ -61,7 +61,6 @@ const FormAlertWithSubmitButton = props => (
         ) : (
             <Button
                 success
-                pressOnEnter
                 text={props.buttonText}
                 onPress={props.onSubmit}
                 isDisabled={props.isDisabled}
diff --git a/src/components/FormSubmit/index.js b/src/components/FormSubmit/index.js
new file mode 100644
index 000000000000..c251b9320ce2
--- /dev/null
+++ b/src/components/FormSubmit/index.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import lodashGet from 'lodash/get';
+import {View} from 'react-native';
+import stylePropTypes from '../../styles/stylePropTypes';
+
+const propTypes = {
+    /* A function to execute when form is submitted with ENTER */
+    onSubmit: PropTypes.func.isRequired,
+
+    /** Children to wrap with FormSubmit. */
+    children: PropTypes.node.isRequired,
+
+    /** Container styles */
+    style: stylePropTypes,
+};
+
+const defaultProps = {
+    style: [],
+};
+
+class FormSubmit extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.onKeyDownCapture = this.onKeyDownCapture.bind(this);
+    }
+
+    onKeyDownCapture(event) {
+        if (event.shiftKey || event.key !== 'Enter') {
+            return;
+        }
+
+        const tagName = lodashGet(event, 'target.tagName', '');
+
+        if (tagName === 'INPUT' || tagName === 'SELECT') {
+            this.props.onSubmit();
+            return;
+        }
+
+        if (tagName === 'TEXTAREA' && lodashGet(event, 'target.dataset.blurOnSubmit', 'false') === 'true') {
+            this.props.onSubmit();
+            return;
+        }
+
+        if (lodashGet(event, 'target.role') === 'checkbox') {
+            this.props.onSubmit();
+        }
+    }
+
+    render() {
+        return (
+            <View onKeyDownCapture={this.onKeyDownCapture} style={this.props.style}>{this.props.children}</View>
+        );
+    }
+}
+
+FormSubmit.propTypes = propTypes;
+FormSubmit.defaultProps = defaultProps;
+
+export default FormSubmit;
diff --git a/src/components/FormSubmit/index.native.js b/src/components/FormSubmit/index.native.js
new file mode 100644
index 000000000000..001cbbfef272
--- /dev/null
+++ b/src/components/FormSubmit/index.native.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+    /** Children to wrap with FormSubmit. */
+    children: PropTypes.node.isRequired,
+};
+
+function FormSubmit(props) {
+    return (
+        <>
+            {props.children}
+        </>
+    );
+}
+
+FormSubmit.propTypes = propTypes;
+FormSubmit.displayName = 'FormSubmit';
+
+export default FormSubmit;
diff --git a/src/pages/SetPasswordPage.js b/src/pages/SetPasswordPage.js
index ae46a1c53c76..17e0fe821f5e 100755
--- a/src/pages/SetPasswordPage.js
+++ b/src/pages/SetPasswordPage.js
@@ -19,6 +19,7 @@ import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
 import compose from '../libs/compose';
 import NewPasswordForm from './settings/NewPasswordForm';
 import FormAlertWithSubmitButton from '../components/FormAlertWithSubmitButton';
+import FormSubmit from '../components/FormSubmit';
 
 const propTypes = {
     /* Onyx Props */
@@ -108,26 +109,26 @@ class SetPasswordPage extends Component {
                     shouldShowWelcomeText
                     welcomeText={this.props.translate('setPasswordPage.passwordFormTitle')}
                 >
-                    <View style={[styles.mb4]}>
-                        {/* The prop onSubmitEditing is required, but it needs to stay as a no-op because the form is submitted and validated from the button below */}
-                        <NewPasswordForm
-                            onSubmitEditing={() => {}}
-                            password={this.state.password}
-                            updatePassword={password => this.setState({password})}
-                            updateIsFormValid={isValid => this.setState({isFormValid: isValid})}
-                        />
-                    </View>
-                    <View>
-                        <FormAlertWithSubmitButton
-                            buttonText={buttonText}
-                            isLoading={this.props.account.isLoading}
-                            onSubmit={this.validateAndSubmitForm}
-                            containerStyles={[styles.mb2, styles.mh0]}
-                            message={error}
-                            isAlertVisible={!_.isEmpty(error)}
-                            isDisabled={!this.state.isFormValid}
-                        />
-                    </View>
+                    <FormSubmit onSubmit={this.validateAndSubmitForm}>
+                        <View style={[styles.mb4]}>
+                            <NewPasswordForm
+                                password={this.state.password}
+                                updatePassword={password => this.setState({password})}
+                                updateIsFormValid={isValid => this.setState({isFormValid: isValid})}
+                            />
+                        </View>
+                        <View>
+                            <FormAlertWithSubmitButton
+                                buttonText={buttonText}
+                                isLoading={this.props.account.isLoading}
+                                onSubmit={this.validateAndSubmitForm}
+                                containerStyles={[styles.mb2, styles.mh0]}
+                                message={error}
+                                isAlertVisible={!_.isEmpty(error)}
+                                isDisabled={!this.state.isFormValid}
+                            />
+                        </View>
+                    </FormSubmit>
                 </SignInPageLayout>
             </SafeAreaView>
         );
diff --git a/src/pages/settings/NewPasswordForm.js b/src/pages/settings/NewPasswordForm.js
index 1b84d827d1e4..27b3e5b98dea 100644
--- a/src/pages/settings/NewPasswordForm.js
+++ b/src/pages/settings/NewPasswordForm.js
@@ -20,8 +20,6 @@ const propTypes = {
     /** Callback function called with boolean value for if the password form is valid  */
     updateIsFormValid: PropTypes.func.isRequired,
 
-    /** Callback function for when form is submitted  */
-    onSubmitEditing: PropTypes.func.isRequired,
     ...withLocalizePropTypes,
 };
 
@@ -77,7 +75,6 @@ class NewPasswordForm extends React.Component {
                     value={this.props.password}
                     onChangeText={password => this.props.updatePassword(password)}
                     onBlur={() => this.onBlurNewPassword()}
-                    onSubmitEditing={() => this.props.onSubmitEditing()}
                 />
                 <Text
                     style={[
diff --git a/src/pages/workspace/WorkspaceSettingsPage.js b/src/pages/workspace/WorkspaceSettingsPage.js
index 40c370abb92b..c4cf83cf387b 100644
--- a/src/pages/workspace/WorkspaceSettingsPage.js
+++ b/src/pages/workspace/WorkspaceSettingsPage.js
@@ -23,6 +23,7 @@ import withPolicy, {policyPropTypes, policyDefaultProps} from './withPolicy';
 import {withNetwork} from '../../components/OnyxProvider';
 import OfflineWithFeedback from '../../components/OfflineWithFeedback';
 import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
+import FormSubmit from '../../components/FormSubmit';
 
 const propTypes = {
     ...policyPropTypes,
@@ -78,81 +79,82 @@ class WorkspaceSettingsPage extends React.Component {
     render() {
         return (
             <FullPageNotFoundView shouldShow={_.isEmpty(this.props.policy)}>
-                <WorkspacePageWithSections
-                    headerText={this.props.translate('workspace.common.settings')}
-                    route={this.props.route}
-                    guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_SETTINGS}
-                    footer={(
-                        <FixedFooter style={[styles.w100]}>
-                            <OfflineWithFeedback
-                                errors={lodashGet(this.props.policy, 'errorFields.generalSettings')}
-                                onClose={() => Policy.clearWorkspaceGeneralSettingsErrors(this.props.policy.id)}
-                            >
-                                <Button
-                                    success
-                                    isLoading={this.props.policy.isPolicyUpdating}
-                                    text={this.props.translate('workspace.editor.save')}
-                                    onPress={this.submit}
-                                    pressOnEnter
-                                />
-                            </OfflineWithFeedback>
-                        </FixedFooter>
-                    )}
-                >
-                    {hasVBA => (
-                        <View style={[styles.pageWrapper, styles.flex1, styles.alignItemsStretch]}>
-                            <OfflineWithFeedback
-                                pendingAction={lodashGet(this.props.policy, 'pendingFields.avatar', null)}
-                                errors={lodashGet(this.props.policy, 'errorFields.avatar', null)}
-                                onClose={() => Policy.clearAvatarErrors(this.props.policy.id)}
-                            >
-                                <AvatarWithImagePicker
-                                    isUploading={this.props.policy.isAvatarUploading}
-                                    avatarURL={lodashGet(this.props.policy, 'avatar')}
-                                    size={CONST.AVATAR_SIZE.LARGE}
-                                    DefaultAvatar={() => (
-                                        <Icon
-                                            src={Expensicons.Workspace}
-                                            height={80}
-                                            width={80}
-                                            fill={defaultTheme.iconSuccessFill}
-                                        />
-                                    )}
-                                    fallbackIcon={Expensicons.FallbackWorkspaceAvatar}
-                                    style={[styles.mb3]}
-                                    anchorPosition={{top: 172, right: 18}}
-                                    isUsingDefaultAvatar={!lodashGet(this.props.policy, 'avatar', null)}
-                                    onImageSelected={file => Policy.updateWorkspaceAvatar(lodashGet(this.props.policy, 'id', ''), file)}
-                                    onImageRemoved={() => Policy.deleteWorkspaceAvatar(lodashGet(this.props.policy, 'id', ''))}
-                                />
-                            </OfflineWithFeedback>
-                            <OfflineWithFeedback
-                                pendingAction={lodashGet(this.props.policy, 'pendingFields.generalSettings')}
-                            >
-                                <TextInput
-                                    label={this.props.translate('workspace.editor.nameInputLabel')}
-                                    containerStyles={[styles.mt4]}
-                                    onChangeText={name => this.setState({name})}
-                                    value={this.state.name}
-                                    hasError={!this.state.name.trim().length}
-                                    errorText={this.state.name.trim().length ? '' : this.props.translate('workspace.editor.nameIsRequiredError')}
-                                />
-                                <View style={[styles.mt4]}>
-                                    <Picker
-                                        label={this.props.translate('workspace.editor.currencyInputLabel')}
-                                        onInputChange={currency => this.setState({currency})}
-                                        items={this.getCurrencyItems()}
-                                        value={this.state.currency}
-                                        isDisabled={hasVBA}
+                <FormSubmit onSubmit={this.submit}>
+                    <WorkspacePageWithSections
+                        headerText={this.props.translate('workspace.common.settings')}
+                        route={this.props.route}
+                        guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_SETTINGS}
+                        footer={(
+                            <FixedFooter style={[styles.w100]}>
+                                <OfflineWithFeedback
+                                    errors={lodashGet(this.props.policy, 'errorFields.generalSettings')}
+                                    onClose={() => Policy.clearWorkspaceGeneralSettingsErrors(this.props.policy.id)}
+                                >
+                                    <Button
+                                        success
+                                        isLoading={this.props.policy.isPolicyUpdating}
+                                        text={this.props.translate('workspace.editor.save')}
+                                        onPress={this.submit}
                                     />
-                                </View>
-                                <Text style={[styles.textLabel, styles.colorMuted, styles.mt2]}>
-                                    {this.props.translate('workspace.editor.currencyInputHelpText')}
-                                </Text>
-                            </OfflineWithFeedback>
-                        </View>
+                                </OfflineWithFeedback>
+                            </FixedFooter>
                     )}
-                </WorkspacePageWithSections>
+                    >
+                        {hasVBA => (
+                            <View style={[styles.pageWrapper, styles.flex1, styles.alignItemsStretch]}>
+                                <OfflineWithFeedback
+                                    pendingAction={lodashGet(this.props.policy, 'pendingFields.avatar', null)}
+                                    errors={lodashGet(this.props.policy, 'errorFields.avatar', null)}
+                                    onClose={() => Policy.clearAvatarErrors(this.props.policy.id)}
+                                >
+                                    <AvatarWithImagePicker
+                                        isUploading={this.props.policy.isAvatarUploading}
+                                        avatarURL={lodashGet(this.props.policy, 'avatar')}
+                                        size={CONST.AVATAR_SIZE.LARGE}
+                                        DefaultAvatar={() => (
+                                            <Icon
+                                                src={Expensicons.Workspace}
+                                                height={80}
+                                                width={80}
+                                                fill={defaultTheme.iconSuccessFill}
+                                            />
+                                        )}
+                                        fallbackIcon={Expensicons.FallbackWorkspaceAvatar}
+                                        style={[styles.mb3]}
+                                        anchorPosition={{top: 172, right: 18}}
+                                        isUsingDefaultAvatar={!lodashGet(this.props.policy, 'avatar', null)}
+                                        onImageSelected={file => Policy.updateWorkspaceAvatar(lodashGet(this.props.policy, 'id', ''), file)}
+                                        onImageRemoved={() => Policy.deleteWorkspaceAvatar(lodashGet(this.props.policy, 'id', ''))}
+                                    />
+                                </OfflineWithFeedback>
+                                <OfflineWithFeedback
+                                    pendingAction={lodashGet(this.props.policy, 'pendingFields.generalSettings')}
+                                >
+                                    <TextInput
+                                        label={this.props.translate('workspace.editor.nameInputLabel')}
+                                        containerStyles={[styles.mt4]}
+                                        onChangeText={name => this.setState({name})}
+                                        value={this.state.name}
+                                        hasError={!this.state.name.trim().length}
+                                        errorText={this.state.name.trim().length ? '' : this.props.translate('workspace.editor.nameIsRequiredError')}
+                                    />
+                                    <View style={[styles.mt4]}>
+                                        <Picker
+                                            label={this.props.translate('workspace.editor.currencyInputLabel')}
+                                            onInputChange={currency => this.setState({currency})}
+                                            items={this.getCurrencyItems()}
+                                            value={this.state.currency}
+                                            isDisabled={hasVBA}
+                                        />
+                                    </View>
+                                    <Text style={[styles.textLabel, styles.colorMuted, styles.mt2]}>
+                                        {this.props.translate('workspace.editor.currencyInputHelpText')}
+                                    </Text>
+                                </OfflineWithFeedback>
+                            </View>
+                        )}
+                    </WorkspacePageWithSections>
+                </FormSubmit>
             </FullPageNotFoundView>
         );
     }

From 94a65848fed69450ffb722cd820085fe2453e5e9 Mon Sep 17 00:00:00 2001
From: Md Neyaz Ahmad <mdneyazahmad66@gmail.com>
Date: Tue, 13 Sep 2022 21:57:56 +0530
Subject: [PATCH 02/18] Fix submit with enter press on invite member page

---
 src/pages/workspace/WorkspaceInvitePage.js | 155 +++++++++++----------
 1 file changed, 79 insertions(+), 76 deletions(-)

diff --git a/src/pages/workspace/WorkspaceInvitePage.js b/src/pages/workspace/WorkspaceInvitePage.js
index 86fcc48b9757..6187a0f8f0ea 100644
--- a/src/pages/workspace/WorkspaceInvitePage.js
+++ b/src/pages/workspace/WorkspaceInvitePage.js
@@ -24,6 +24,7 @@ import withPolicy, {policyPropTypes, policyDefaultProps} from './withPolicy';
 import {withNetwork} from '../../components/OnyxProvider';
 import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
 import networkPropTypes from '../../components/networkPropTypes';
+import FormSubmit from '../../components/FormSubmit';
 
 const personalDetailsPropTypes = PropTypes.shape({
     /** The login of the person (either email or phone number) */
@@ -261,84 +262,86 @@ class WorkspaceInvitePage extends React.Component {
                                 shouldShowBackButton
                                 onBackButtonPress={() => Navigation.goBack()}
                             />
-                            <View style={[styles.flex1]}>
-                                {!didScreenTransitionEnd && <FullScreenLoadingIndicator />}
-                                {didScreenTransitionEnd && (
-                                <OptionsSelector
-                                    autoFocus={false}
-                                    canSelectMultipleOptions
-                                    sections={sections}
-                                    selectedOptions={this.state.selectedOptions}
-                                    value={this.state.searchValue}
-                                    onSelectRow={this.toggleOption}
-                                    onChangeText={(searchValue = '') => {
-                                        const {
-                                            personalDetails,
-                                            userToInvite,
-                                        } = OptionsListUtils.getMemberInviteOptions(
-                                            this.props.personalDetails,
-                                            this.props.betas,
-                                            searchValue,
-                                            this.getExcludedUsers(),
-                                        );
-                                        this.setState({
-                                            searchValue,
-                                            userToInvite,
-                                            personalDetails,
-                                        });
-                                    }}
-                                    onConfirmSelection={this.inviteUser}
-                                    headerMessage={headerMessage}
-                                    hideSectionHeaders
-                                    hideAdditionalOptionStates
-                                    forceTextUnreadStyle
-                                    shouldFocusOnSelectRow
-                                />
-                                )}
-                            </View>
-                            <View style={[styles.flexShrink0]}>
-                                <View style={[styles.ph5, styles.pv3]}>
-                                    <TextInput
-                                        label={this.props.translate('workspace.invite.personalMessagePrompt')}
-                                        autoCompleteType="off"
-                                        autoCorrect={false}
-                                        numberOfLines={4}
-                                        textAlignVertical="top"
-                                        multiline
-                                        containerStyles={[styles.workspaceInviteWelcome]}
-                                        value={this.state.welcomeNote}
-                                        onChangeText={text => this.setState({welcomeNote: text})}
+                            <FormSubmit style={[styles.flex1]} onSubmit={this.inviteUser}>
+                                <View style={[styles.flex1]}>
+                                    {!didScreenTransitionEnd && <FullScreenLoadingIndicator />}
+                                    {didScreenTransitionEnd && (
+                                    <OptionsSelector
+                                        autoFocus={false}
+                                        canSelectMultipleOptions
+                                        sections={sections}
+                                        selectedOptions={this.state.selectedOptions}
+                                        value={this.state.searchValue}
+                                        onSelectRow={this.toggleOption}
+                                        onChangeText={(searchValue = '') => {
+                                            const {
+                                                personalDetails,
+                                                userToInvite,
+                                            } = OptionsListUtils.getMemberInviteOptions(
+                                                this.props.personalDetails,
+                                                this.props.betas,
+                                                searchValue,
+                                                this.getExcludedUsers(),
+                                            );
+                                            this.setState({
+                                                searchValue,
+                                                userToInvite,
+                                                personalDetails,
+                                            });
+                                        }}
+                                        onConfirmSelection={this.inviteUser}
+                                        headerMessage={headerMessage}
+                                        hideSectionHeaders
+                                        hideAdditionalOptionStates
+                                        forceTextUnreadStyle
+                                        shouldFocusOnSelectRow
                                     />
-                                </View>
-                                <FormAlertWithSubmitButton
-                                    isDisabled={!this.state.selectedOptions.length}
-                                    isAlertVisible={this.getShouldShowAlertPrompt()}
-                                    buttonText={this.props.translate('common.invite')}
-                                    onSubmit={this.inviteUser}
-                                    onFixTheErrorsLinkPressed={() => {}}
-                                    message={this.props.policy.alertMessage}
-                                    containerStyles={[styles.flexReset, styles.mb0, styles.flexGrow0, styles.flexShrink0, styles.flexBasisAuto]}
-                                />
-                                <Pressable
-                                    onPress={(e) => {
-                                        e.preventDefault();
-                                        Link.openExternalLink(CONST.PRIVACY_URL);
-                                    }}
-                                    accessibilityRole="link"
-                                    href={CONST.PRIVACY_URL}
-                                    style={[styles.mh5, styles.mv2, styles.alignSelfStart]}
-                                >
-                                    {({hovered, pressed}) => (
-                                        <View style={[styles.flexRow]}>
-                                            <Text
-                                                style={[styles.mr1, styles.label, (hovered || pressed) ? styles.linkHovered : styles.link]}
-                                            >
-                                                {this.props.translate('common.privacyPolicy')}
-                                            </Text>
-                                        </View>
                                     )}
-                                </Pressable>
-                            </View>
+                                </View>
+                                <View style={[styles.flexShrink0]}>
+                                    <View style={[styles.ph5, styles.pv3]}>
+                                        <TextInput
+                                            label={this.props.translate('workspace.invite.personalMessagePrompt')}
+                                            autoCompleteType="off"
+                                            autoCorrect={false}
+                                            numberOfLines={4}
+                                            textAlignVertical="top"
+                                            multiline
+                                            containerStyles={[styles.workspaceInviteWelcome]}
+                                            value={this.state.welcomeNote}
+                                            onChangeText={text => this.setState({welcomeNote: text})}
+                                        />
+                                    </View>
+                                    <FormAlertWithSubmitButton
+                                        isDisabled={!this.state.selectedOptions.length}
+                                        isAlertVisible={this.getShouldShowAlertPrompt()}
+                                        buttonText={this.props.translate('common.invite')}
+                                        onSubmit={this.inviteUser}
+                                        onFixTheErrorsLinkPressed={() => {}}
+                                        message={this.props.policy.alertMessage}
+                                        containerStyles={[styles.flexReset, styles.mb0, styles.flexGrow0, styles.flexShrink0, styles.flexBasisAuto]}
+                                    />
+                                    <Pressable
+                                        onPress={(e) => {
+                                            e.preventDefault();
+                                            Link.openExternalLink(CONST.PRIVACY_URL);
+                                        }}
+                                        accessibilityRole="link"
+                                        href={CONST.PRIVACY_URL}
+                                        style={[styles.mh5, styles.mv2, styles.alignSelfStart]}
+                                    >
+                                        {({hovered, pressed}) => (
+                                            <View style={[styles.flexRow]}>
+                                                <Text
+                                                    style={[styles.mr1, styles.label, (hovered || pressed) ? styles.linkHovered : styles.link]}
+                                                >
+                                                    {this.props.translate('common.privacyPolicy')}
+                                                </Text>
+                                            </View>
+                                        )}
+                                    </Pressable>
+                                </View>
+                            </FormSubmit>
                         </>
                     </FullPageNotFoundView>
                 )}

From ac0741380e3451be65aca11f17836c3efebd4a99 Mon Sep 17 00:00:00 2001
From: Md Neyaz Ahmad <mdneyazahmad66@gmail.com>
Date: Mon, 31 Oct 2022 18:31:17 +0530
Subject: [PATCH 03/18] refactor: form components

---
 src/components/FormAlertWithSubmitButton.js   |   7 +-
 .../FormSubmit/formSubmitPropTypes.js         |  19 ++
 src/components/FormSubmit/index.js            |  23 +--
 src/components/FormSubmit/index.native.js     |  17 +-
 src/pages/workspace/WorkspaceSettingsPage.js  | 163 ++++++++----------
 5 files changed, 103 insertions(+), 126 deletions(-)
 create mode 100644 src/components/FormSubmit/formSubmitPropTypes.js

diff --git a/src/components/FormAlertWithSubmitButton.js b/src/components/FormAlertWithSubmitButton.js
index 8cb737395010..3fbb5ac607b7 100644
--- a/src/components/FormAlertWithSubmitButton.js
+++ b/src/components/FormAlertWithSubmitButton.js
@@ -28,7 +28,7 @@ const propTypes = {
     message: PropTypes.string,
 
     /** Callback fired when the "fix the errors" link is pressed */
-    onFixTheErrorsPressed: PropTypes.func,
+    onFixTheErrorsLinkPressed: PropTypes.func,
 
     /** Submit function */
     onSubmit: PropTypes.func.isRequired,
@@ -43,7 +43,7 @@ const defaultProps = {
     isMessageHtml: false,
     containerStyles: [],
     isLoading: false,
-    onFixTheErrorsPressed: () => {},
+    onFixTheErrorsLinkPressed: () => {},
     enabledWhenOffline: false,
 };
 
@@ -53,7 +53,7 @@ const FormAlertWithSubmitButton = props => (
         isAlertVisible={props.isAlertVisible}
         isMessageHtml={props.isMessageHtml}
         message={props.message}
-        onFixTheErrorsPressed={props.onFixTheErrorsPressed}
+        onFixTheErrorsLinkPressed={props.onFixTheErrorsLinkPressed}
     >
         {isOffline => ((isOffline && !props.enabledWhenOffline) ? (
             <Button
@@ -65,6 +65,7 @@ const FormAlertWithSubmitButton = props => (
         ) : (
             <Button
                 success
+                pressOnEnter
                 text={props.buttonText}
                 onPress={props.onSubmit}
                 isDisabled={props.isDisabled}
diff --git a/src/components/FormSubmit/formSubmitPropTypes.js b/src/components/FormSubmit/formSubmitPropTypes.js
new file mode 100644
index 000000000000..5f419137ad11
--- /dev/null
+++ b/src/components/FormSubmit/formSubmitPropTypes.js
@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+import stylePropTypes from '../../styles/stylePropTypes';
+
+const propTypes = {
+    /* A function to execute when form is submitted with ENTER */
+    onSubmit: PropTypes.func.isRequired,
+
+    /** Children to wrap with FormSubmit. */
+    children: PropTypes.node.isRequired,
+
+    /** Container styles */
+    style: stylePropTypes,
+};
+
+const defaultProps = {
+    style: [],
+};
+
+export {propTypes, defaultProps};
diff --git a/src/components/FormSubmit/index.js b/src/components/FormSubmit/index.js
index c251b9320ce2..80772f271d62 100644
--- a/src/components/FormSubmit/index.js
+++ b/src/components/FormSubmit/index.js
@@ -1,32 +1,17 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import lodashGet from 'lodash/get';
 import {View} from 'react-native';
-import stylePropTypes from '../../styles/stylePropTypes';
+import {propTypes, defaultProps} from './formSubmitPropTypes';
 
-const propTypes = {
-    /* A function to execute when form is submitted with ENTER */
-    onSubmit: PropTypes.func.isRequired,
-
-    /** Children to wrap with FormSubmit. */
-    children: PropTypes.node.isRequired,
-
-    /** Container styles */
-    style: stylePropTypes,
-};
-
-const defaultProps = {
-    style: [],
-};
 
 class FormSubmit extends React.Component {
     constructor(props) {
         super(props);
 
-        this.onKeyDownCapture = this.onKeyDownCapture.bind(this);
+        this.submitForm = this.submitForm.bind(this);
     }
 
-    onKeyDownCapture(event) {
+    submitForm(event) {
         if (event.shiftKey || event.key !== 'Enter') {
             return;
         }
@@ -50,7 +35,7 @@ class FormSubmit extends React.Component {
 
     render() {
         return (
-            <View onKeyDownCapture={this.onKeyDownCapture} style={this.props.style}>{this.props.children}</View>
+            <View onKeyDownCapture={this.submitForm} style={this.props.style}>{this.props.children}</View>
         );
     }
 }
diff --git a/src/components/FormSubmit/index.native.js b/src/components/FormSubmit/index.native.js
index 001cbbfef272..c55f9d5d3adf 100644
--- a/src/components/FormSubmit/index.native.js
+++ b/src/components/FormSubmit/index.native.js
@@ -1,20 +1,11 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import {View} from 'react-native';
+import {propTypes, defaultProps} from './formSubmitPropTypes';
 
-const propTypes = {
-    /** Children to wrap with FormSubmit. */
-    children: PropTypes.node.isRequired,
-};
-
-function FormSubmit(props) {
-    return (
-        <>
-            {props.children}
-        </>
-    );
-}
+const FormSubmit = (props) => <View style={props.style}>{props.children}</View>;
 
 FormSubmit.propTypes = propTypes;
+FormSubmit.defaultProps = defaultProps;
 FormSubmit.displayName = 'FormSubmit';
 
 export default FormSubmit;
diff --git a/src/pages/workspace/WorkspaceSettingsPage.js b/src/pages/workspace/WorkspaceSettingsPage.js
index c4cf83cf387b..e778ecf89339 100644
--- a/src/pages/workspace/WorkspaceSettingsPage.js
+++ b/src/pages/workspace/WorkspaceSettingsPage.js
@@ -1,12 +1,11 @@
 import React from 'react';
-import {View} from 'react-native';
+import {Keyboard, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
 import ONYXKEYS from '../../ONYXKEYS';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import styles from '../../styles/styles';
-import Button from '../../components/Button';
 import Text from '../../components/Text';
 import compose from '../../libs/compose';
 import * as Policy from '../../libs/actions/Policy';
@@ -17,13 +16,12 @@ import defaultTheme from '../../styles/themes/default';
 import CONST from '../../CONST';
 import Picker from '../../components/Picker';
 import TextInput from '../../components/TextInput';
-import FixedFooter from '../../components/FixedFooter';
 import WorkspacePageWithSections from './WorkspacePageWithSections';
 import withPolicy, {policyPropTypes, policyDefaultProps} from './withPolicy';
 import {withNetwork} from '../../components/OnyxProvider';
 import OfflineWithFeedback from '../../components/OfflineWithFeedback';
 import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
-import FormSubmit from '../../components/FormSubmit';
+import Form from '../../components/Form';
 
 const propTypes = {
     ...policyPropTypes,
@@ -38,11 +36,6 @@ class WorkspaceSettingsPage extends React.Component {
     constructor(props) {
         super(props);
 
-        this.state = {
-            name: props.policy.name,
-            currency: props.policy.outputCurrency,
-        };
-
         this.submit = this.submit.bind(this);
         this.getCurrencyItems = this.getCurrencyItems.bind(this);
         this.validate = this.validate.bind(this);
@@ -59,102 +52,90 @@ class WorkspaceSettingsPage extends React.Component {
         }));
     }
 
-    submit() {
-        if (this.props.policy.isPolicyUpdating || !this.validate()) {
+    submit(values) {
+        if (this.props.policy.isPolicyUpdating) {
             return;
         }
-        const name = this.state.name.trim();
-        const outputCurrency = this.state.currency;
+        const name = values.name.trim();
+        const outputCurrency = values.currency;
         Policy.updateGeneralSettings(this.props.policy.id, name, outputCurrency);
+        Keyboard.dismiss();
     }
 
-    validate() {
+    validate(values) {
         const errors = {};
-        if (!this.state.name.trim().length) {
-            errors.nameError = true;
+        if (!values.name || !values.name.trim().length) {
+            errors.name = this.props.translate('workspace.editor.nameIsRequiredError');
         }
-        return _.size(errors) === 0;
+        return errors;
     }
 
     render() {
         return (
             <FullPageNotFoundView shouldShow={_.isEmpty(this.props.policy)}>
-                <FormSubmit onSubmit={this.submit}>
-                    <WorkspacePageWithSections
-                        headerText={this.props.translate('workspace.common.settings')}
-                        route={this.props.route}
-                        guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_SETTINGS}
-                        footer={(
-                            <FixedFooter style={[styles.w100]}>
-                                <OfflineWithFeedback
-                                    errors={lodashGet(this.props.policy, 'errorFields.generalSettings')}
-                                    onClose={() => Policy.clearWorkspaceGeneralSettingsErrors(this.props.policy.id)}
-                                >
-                                    <Button
-                                        success
-                                        isLoading={this.props.policy.isPolicyUpdating}
-                                        text={this.props.translate('workspace.editor.save')}
-                                        onPress={this.submit}
+                <WorkspacePageWithSections
+                    headerText={this.props.translate('workspace.common.settings')}
+                    route={this.props.route}
+                    guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_SETTINGS}
+                >
+                    {hasVBA => (
+                        <Form
+                            formID={ONYXKEYS.FORMS.WORKSPACE_SETTINGS_FORM}
+                            submitButtonText={this.props.translate('workspace.editor.save')}
+                            style={[styles.mh5, styles.mt5, styles.flexGrow1]}
+                            validate={this.validate}
+                            onSubmit={this.submit}
+                        >
+                            <OfflineWithFeedback
+                                pendingAction={lodashGet(this.props.policy, 'pendingFields.avatar', null)}
+                                errors={lodashGet(this.props.policy, 'errorFields.avatar', null)}
+                                onClose={() => Policy.clearAvatarErrors(this.props.policy.id)}
+                            >
+                                <AvatarWithImagePicker
+                                    isUploading={this.props.policy.isAvatarUploading}
+                                    avatarURL={lodashGet(this.props.policy, 'avatar')}
+                                    size={CONST.AVATAR_SIZE.LARGE}
+                                    DefaultAvatar={() => (
+                                        <Icon
+                                            src={Expensicons.Workspace}
+                                            height={80}
+                                            width={80}
+                                            fill={defaultTheme.iconSuccessFill}
+                                        />
+                                    )}
+                                    fallbackIcon={Expensicons.FallbackWorkspaceAvatar}
+                                    style={[styles.mb3]}
+                                    anchorPosition={{top: 172, right: 18}}
+                                    isUsingDefaultAvatar={!lodashGet(this.props.policy, 'avatar', null)}
+                                    onImageSelected={file => Policy.updateWorkspaceAvatar(lodashGet(this.props.policy, 'id', ''), file)}
+                                    onImageRemoved={() => Policy.deleteWorkspaceAvatar(lodashGet(this.props.policy, 'id', ''))}
+                                />
+                            </OfflineWithFeedback>
+                            <OfflineWithFeedback
+                                pendingAction={lodashGet(this.props.policy, 'pendingFields.generalSettings')}
+                            >
+                                <TextInput
+                                    inputID="name"
+                                    label={this.props.translate('workspace.editor.nameInputLabel')}
+                                    containerStyles={[styles.mt4]}
+                                    defaultValue={this.props.policy.name}
+                                />
+                                <View style={[styles.mt4]}>
+                                    <Picker
+                                        inputID="currency"
+                                        label={this.props.translate('workspace.editor.currencyInputLabel')}
+                                        items={this.getCurrencyItems()}
+                                        isDisabled={hasVBA}
+                                        defaultValue={this.props.policy.outputCurrency}
                                     />
-                                </OfflineWithFeedback>
-                            </FixedFooter>
+                                </View>
+                                <Text style={[styles.textLabel, styles.colorMuted, styles.mt2]}>
+                                    {this.props.translate('workspace.editor.currencyInputHelpText')}
+                                </Text>
+                            </OfflineWithFeedback>
+                        </Form>
                     )}
-                    >
-                        {hasVBA => (
-                            <View style={[styles.pageWrapper, styles.flex1, styles.alignItemsStretch]}>
-                                <OfflineWithFeedback
-                                    pendingAction={lodashGet(this.props.policy, 'pendingFields.avatar', null)}
-                                    errors={lodashGet(this.props.policy, 'errorFields.avatar', null)}
-                                    onClose={() => Policy.clearAvatarErrors(this.props.policy.id)}
-                                >
-                                    <AvatarWithImagePicker
-                                        isUploading={this.props.policy.isAvatarUploading}
-                                        avatarURL={lodashGet(this.props.policy, 'avatar')}
-                                        size={CONST.AVATAR_SIZE.LARGE}
-                                        DefaultAvatar={() => (
-                                            <Icon
-                                                src={Expensicons.Workspace}
-                                                height={80}
-                                                width={80}
-                                                fill={defaultTheme.iconSuccessFill}
-                                            />
-                                        )}
-                                        fallbackIcon={Expensicons.FallbackWorkspaceAvatar}
-                                        style={[styles.mb3]}
-                                        anchorPosition={{top: 172, right: 18}}
-                                        isUsingDefaultAvatar={!lodashGet(this.props.policy, 'avatar', null)}
-                                        onImageSelected={file => Policy.updateWorkspaceAvatar(lodashGet(this.props.policy, 'id', ''), file)}
-                                        onImageRemoved={() => Policy.deleteWorkspaceAvatar(lodashGet(this.props.policy, 'id', ''))}
-                                    />
-                                </OfflineWithFeedback>
-                                <OfflineWithFeedback
-                                    pendingAction={lodashGet(this.props.policy, 'pendingFields.generalSettings')}
-                                >
-                                    <TextInput
-                                        label={this.props.translate('workspace.editor.nameInputLabel')}
-                                        containerStyles={[styles.mt4]}
-                                        onChangeText={name => this.setState({name})}
-                                        value={this.state.name}
-                                        hasError={!this.state.name.trim().length}
-                                        errorText={this.state.name.trim().length ? '' : this.props.translate('workspace.editor.nameIsRequiredError')}
-                                    />
-                                    <View style={[styles.mt4]}>
-                                        <Picker
-                                            label={this.props.translate('workspace.editor.currencyInputLabel')}
-                                            onInputChange={currency => this.setState({currency})}
-                                            items={this.getCurrencyItems()}
-                                            value={this.state.currency}
-                                            isDisabled={hasVBA}
-                                        />
-                                    </View>
-                                    <Text style={[styles.textLabel, styles.colorMuted, styles.mt2]}>
-                                        {this.props.translate('workspace.editor.currencyInputHelpText')}
-                                    </Text>
-                                </OfflineWithFeedback>
-                            </View>
-                        )}
-                    </WorkspacePageWithSections>
-                </FormSubmit>
+                </WorkspacePageWithSections>
             </FullPageNotFoundView>
         );
     }

From df17655ca25cab44020051685968b2a7940913d2 Mon Sep 17 00:00:00 2001
From: Md Neyaz Ahmad <mdneyazahmad66@gmail.com>
Date: Mon, 31 Oct 2022 21:46:15 +0530
Subject: [PATCH 04/18] style: fix eslint error

---
 src/components/FormSubmit/index.js        | 1 -
 src/components/FormSubmit/index.native.js | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/FormSubmit/index.js b/src/components/FormSubmit/index.js
index 80772f271d62..3a5e643d3cf8 100644
--- a/src/components/FormSubmit/index.js
+++ b/src/components/FormSubmit/index.js
@@ -3,7 +3,6 @@ import lodashGet from 'lodash/get';
 import {View} from 'react-native';
 import {propTypes, defaultProps} from './formSubmitPropTypes';
 
-
 class FormSubmit extends React.Component {
     constructor(props) {
         super(props);
diff --git a/src/components/FormSubmit/index.native.js b/src/components/FormSubmit/index.native.js
index c55f9d5d3adf..56dba1a17d5e 100644
--- a/src/components/FormSubmit/index.native.js
+++ b/src/components/FormSubmit/index.native.js
@@ -2,7 +2,7 @@ import React from 'react';
 import {View} from 'react-native';
 import {propTypes, defaultProps} from './formSubmitPropTypes';
 
-const FormSubmit = (props) => <View style={props.style}>{props.children}</View>;
+const FormSubmit = props => <View style={props.style}>{props.children}</View>;
 
 FormSubmit.propTypes = propTypes;
 FormSubmit.defaultProps = defaultProps;

From c0d70f653b9bf15cd323d6b40c8bc7e41efbaafa Mon Sep 17 00:00:00 2001
From: Md Neyaz Ahmad <mdneyazahmad66@gmail.com>
Date: Tue, 1 Nov 2022 01:10:14 +0530
Subject: [PATCH 05/18] feat: add form submit on enter key press

---
 src/components/Form.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Form.js b/src/components/Form.js
index b7b5f72edbd5..a768c236abba 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -10,6 +10,7 @@ import * as FormActions from '../libs/actions/FormActions';
 import * as ErrorUtils from '../libs/ErrorUtils';
 import styles from '../styles/styles';
 import FormAlertWithSubmitButton from './FormAlertWithSubmitButton';
+import FormSubmit from './FormSubmit';
 
 const propTypes = {
     /** A unique Onyx key identifying the form */
@@ -212,7 +213,7 @@ class Form extends React.Component {
 
     render() {
         return (
-            <>
+            <FormSubmit style={[styles.w100, styles.flex1]} onSubmit={this.submit}>
                 <ScrollView
                     style={[styles.w100, styles.flex1]}
                     contentContainerStyle={styles.flexGrow1}
@@ -236,7 +237,7 @@ class Form extends React.Component {
                         )}
                     </View>
                 </ScrollView>
-            </>
+            </FormSubmit>
         );
     }
 }

From 0785afe30d8a0e853f45a3a08e7ed022d7b525b6 Mon Sep 17 00:00:00 2001
From: Md Neyaz Ahmad <mdneyazahmad66@gmail.com>
Date: Mon, 7 Nov 2022 15:34:33 +0530
Subject: [PATCH 06/18] fix: temporarily disable press on enter

---
 src/components/Form.js                      | 1 +
 src/components/FormAlertWithSubmitButton.js | 8 +++++++-
 src/pages/workspace/WorkspaceInvitePage.js  | 1 +
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/Form.js b/src/components/Form.js
index a768c236abba..b81f7aa4ecbd 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -233,6 +233,7 @@ class Form extends React.Component {
                             }}
                             containerStyles={[styles.mh0, styles.mt5]}
                             enabledWhenOffline={this.props.enabledWhenOffline}
+                            tempDisablePressOnEnter
                         />
                         )}
                     </View>
diff --git a/src/components/FormAlertWithSubmitButton.js b/src/components/FormAlertWithSubmitButton.js
index 3fbb5ac607b7..1744b18a802c 100644
--- a/src/components/FormAlertWithSubmitButton.js
+++ b/src/components/FormAlertWithSubmitButton.js
@@ -35,6 +35,11 @@ const propTypes = {
 
     /** Should the button be enabled when offline */
     enabledWhenOffline: PropTypes.bool,
+
+    /** Temporarily disable press on enter, this will be removed when all instances of
+     * submit event handler is replaced with FormSubmit component
+      */
+    tempDisablePressOnEnter: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -45,6 +50,7 @@ const defaultProps = {
     isLoading: false,
     onFixTheErrorsLinkPressed: () => {},
     enabledWhenOffline: false,
+    tempDisablePressOnEnter: false,
 };
 
 const FormAlertWithSubmitButton = props => (
@@ -65,7 +71,7 @@ const FormAlertWithSubmitButton = props => (
         ) : (
             <Button
                 success
-                pressOnEnter
+                pressOnEnter={!props.tempDisablePressOnEnter}
                 text={props.buttonText}
                 onPress={props.onSubmit}
                 isDisabled={props.isDisabled}
diff --git a/src/pages/workspace/WorkspaceInvitePage.js b/src/pages/workspace/WorkspaceInvitePage.js
index a68ddb0f15d9..5604aa54c260 100644
--- a/src/pages/workspace/WorkspaceInvitePage.js
+++ b/src/pages/workspace/WorkspaceInvitePage.js
@@ -322,6 +322,7 @@ class WorkspaceInvitePage extends React.Component {
                                         message={this.props.policy.alertMessage}
                                         containerStyles={[styles.flexReset, styles.mb0, styles.flexGrow0, styles.flexShrink0, styles.flexBasisAuto]}
                                         enabledWhenOffline
+                                        tempDisablePressOnEnter
                                     />
                                     <Pressable
                                         onPress={(e) => {

From 81ec3f0cbda13ee3768d1a4ff418cd0092a26b98 Mon Sep 17 00:00:00 2001
From: Md Neyaz Ahmad <mdneyazahmad66@gmail.com>
Date: Mon, 7 Nov 2022 16:48:26 +0530
Subject: [PATCH 07/18] refactor: rename variable names

---
 src/components/Form.js                      | 2 +-
 src/components/FormAlertWithSubmitButton.js | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Form.js b/src/components/Form.js
index b81f7aa4ecbd..0fc374b65fcf 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -233,7 +233,7 @@ class Form extends React.Component {
                             }}
                             containerStyles={[styles.mh0, styles.mt5]}
                             enabledWhenOffline={this.props.enabledWhenOffline}
-                            tempDisablePressOnEnter
+                            disablePressOnEnter
                         />
                         )}
                     </View>
diff --git a/src/components/FormAlertWithSubmitButton.js b/src/components/FormAlertWithSubmitButton.js
index 1744b18a802c..cfa841a46e2f 100644
--- a/src/components/FormAlertWithSubmitButton.js
+++ b/src/components/FormAlertWithSubmitButton.js
@@ -39,7 +39,7 @@ const propTypes = {
     /** Temporarily disable press on enter, this will be removed when all instances of
      * submit event handler is replaced with FormSubmit component
       */
-    tempDisablePressOnEnter: PropTypes.bool,
+    disablePressOnEnter: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -50,7 +50,7 @@ const defaultProps = {
     isLoading: false,
     onFixTheErrorsLinkPressed: () => {},
     enabledWhenOffline: false,
-    tempDisablePressOnEnter: false,
+    disablePressOnEnter: false,
 };
 
 const FormAlertWithSubmitButton = props => (
@@ -71,7 +71,7 @@ const FormAlertWithSubmitButton = props => (
         ) : (
             <Button
                 success
-                pressOnEnter={!props.tempDisablePressOnEnter}
+                pressOnEnter={!props.disablePressOnEnter}
                 text={props.buttonText}
                 onPress={props.onSubmit}
                 isDisabled={props.isDisabled}

From 3272d34ac08976380c420d422772312d118aa64d Mon Sep 17 00:00:00 2001
From: Md Neyaz Ahmad <mdneyazahmad66@gmail.com>
Date: Mon, 21 Nov 2022 15:37:56 +0530
Subject: [PATCH 08/18] fix: add missing prop

---
 src/pages/workspace/WorkspaceInvitePage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/workspace/WorkspaceInvitePage.js b/src/pages/workspace/WorkspaceInvitePage.js
index 83b3917f63d1..1dcf07689509 100644
--- a/src/pages/workspace/WorkspaceInvitePage.js
+++ b/src/pages/workspace/WorkspaceInvitePage.js
@@ -322,7 +322,7 @@ class WorkspaceInvitePage extends React.Component {
                                         message={this.props.policy.alertMessage}
                                         containerStyles={[styles.flexReset, styles.mb0, styles.flexGrow0, styles.flexShrink0, styles.flexBasisAuto]}
                                         enabledWhenOffline
-                                        tempDisablePressOnEnter
+                                        disablePressOnEnter
                                     />
                                     <Pressable
                                         onPress={(e) => {

From d5bf3b11be5e66438da025851271f5095b58813b Mon Sep 17 00:00:00 2001
From: Md Neyaz Ahmad <mdneyazahmad66@gmail.com>
Date: Mon, 21 Nov 2022 21:54:37 +0530
Subject: [PATCH 09/18] refactor: form submit component

---
 src/components/Form.js                      |  3 +++
 src/components/FormAlertWithSubmitButton.js |  4 +---
 src/components/FormSubmit/index.js          | 18 +++++++++++++++---
 src/components/FormSubmit/index.native.js   |  6 +++---
 4 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/components/Form.js b/src/components/Form.js
index 72b93301b3af..a46e1bab95da 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -239,6 +239,9 @@ class Form extends React.Component {
                             containerStyles={[styles.mh0, styles.mt5]}
                             enabledWhenOffline={this.props.enabledWhenOffline}
                             isDangerousAction={this.props.isDangerousAction}
+
+                            // Temporarily disable press on enter, this will be removed when all instances of
+                            // form submit event handler is replaced with FormSubmit component
                             disablePressOnEnter
                         />
                         )}
diff --git a/src/components/FormAlertWithSubmitButton.js b/src/components/FormAlertWithSubmitButton.js
index dee9fb195706..d4908f8d5bb8 100644
--- a/src/components/FormAlertWithSubmitButton.js
+++ b/src/components/FormAlertWithSubmitButton.js
@@ -36,9 +36,7 @@ const propTypes = {
     /** Should the button be enabled when offline */
     enabledWhenOffline: PropTypes.bool,
 
-    /** Temporarily disable press on enter, this will be removed when all instances of
-     * submit event handler is replaced with FormSubmit component
-      */
+    /** Disable press on enter for submit button */
     disablePressOnEnter: PropTypes.bool,
 
     /** Whether the action is dangerous */
diff --git a/src/components/FormSubmit/index.js b/src/components/FormSubmit/index.js
index 3a5e643d3cf8..5a9e93ac8812 100644
--- a/src/components/FormSubmit/index.js
+++ b/src/components/FormSubmit/index.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import lodashGet from 'lodash/get';
 import {View} from 'react-native';
-import {propTypes, defaultProps} from './formSubmitPropTypes';
+import * as formSubmitPropTypes from './formSubmitPropTypes';
 
+// This is a wrapper component to handle the ENTER key press, and submit the form.
 class FormSubmit extends React.Component {
     constructor(props) {
         super(props);
@@ -10,23 +11,34 @@ class FormSubmit extends React.Component {
         this.submitForm = this.submitForm.bind(this);
     }
 
+    /**
+     * Submits the form when ENTER is pressed on form element.
+     * @param {SyntheticEvent} event
+     */
+
     submitForm(event) {
+        // ENTER is pressed with modifier key, do not submit the form
         if (event.shiftKey || event.key !== 'Enter') {
             return;
         }
 
         const tagName = lodashGet(event, 'target.tagName', '');
 
+        // ENTER is pressed on INPUT or SELECT element, submit the form
         if (tagName === 'INPUT' || tagName === 'SELECT') {
             this.props.onSubmit();
             return;
         }
 
+        // We usually do not submit the form on TEXTAREA element, when ENTER is pressed.
+        // As there is a prop on react native `blurOnSubmit`, we indeed want to submit it here.
+        // Element dataset is used here to store `blurOnSubmit` prop.
         if (tagName === 'TEXTAREA' && lodashGet(event, 'target.dataset.blurOnSubmit', 'false') === 'true') {
             this.props.onSubmit();
             return;
         }
 
+        // ENTER is pressed on checkbox element, submit the form
         if (lodashGet(event, 'target.role') === 'checkbox') {
             this.props.onSubmit();
         }
@@ -39,7 +51,7 @@ class FormSubmit extends React.Component {
     }
 }
 
-FormSubmit.propTypes = propTypes;
-FormSubmit.defaultProps = defaultProps;
+FormSubmit.propTypes = formSubmitPropTypes.propTypes;
+FormSubmit.defaultProps = formSubmitPropTypes.defaultProps;
 
 export default FormSubmit;
diff --git a/src/components/FormSubmit/index.native.js b/src/components/FormSubmit/index.native.js
index 56dba1a17d5e..e7cb569b6c7e 100644
--- a/src/components/FormSubmit/index.native.js
+++ b/src/components/FormSubmit/index.native.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import {View} from 'react-native';
-import {propTypes, defaultProps} from './formSubmitPropTypes';
+import * as formSubmitPropTypes from './formSubmitPropTypes';
 
 const FormSubmit = props => <View style={props.style}>{props.children}</View>;
 
-FormSubmit.propTypes = propTypes;
-FormSubmit.defaultProps = defaultProps;
+FormSubmit.propTypes = formSubmitPropTypes.propTypes;
+FormSubmit.defaultProps = formSubmitPropTypes.defaultProps;
 FormSubmit.displayName = 'FormSubmit';
 
 export default FormSubmit;

From 8a3286bd7561af64f6b041ab5b407e563bd9660d Mon Sep 17 00:00:00 2001
From: Md Neyaz Ahmad <mdneyazahmad66@gmail.com>
Date: Mon, 21 Nov 2022 23:30:34 +0530
Subject: [PATCH 10/18] docs: update comments

---
 src/components/FormSubmit/index.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/FormSubmit/index.js b/src/components/FormSubmit/index.js
index 5a9e93ac8812..826cca6ce5d2 100644
--- a/src/components/FormSubmit/index.js
+++ b/src/components/FormSubmit/index.js
@@ -12,8 +12,8 @@ class FormSubmit extends React.Component {
     }
 
     /**
-     * Submits the form when ENTER is pressed on form element.
-     * @param {SyntheticEvent} event
+     * Calls the submit callback when ENTER is pressed on a form element.
+     * @param {Object} event
      */
 
     submitForm(event) {
@@ -24,7 +24,7 @@ class FormSubmit extends React.Component {
 
         const tagName = lodashGet(event, 'target.tagName', '');
 
-        // ENTER is pressed on INPUT or SELECT element, submit the form
+        // ENTER is pressed on INPUT or SELECT element, call the submit callback.
         if (tagName === 'INPUT' || tagName === 'SELECT') {
             this.props.onSubmit();
             return;
@@ -38,7 +38,7 @@ class FormSubmit extends React.Component {
             return;
         }
 
-        // ENTER is pressed on checkbox element, submit the form
+        // ENTER is pressed on checkbox element, call the submit callback.
         if (lodashGet(event, 'target.role') === 'checkbox') {
             this.props.onSubmit();
         }

From 796bd14cbd478b894f1725bca49d0c8c00a47277 Mon Sep 17 00:00:00 2001
From: Md Neyaz Ahmad <mdneyazahmad66@gmail.com>
Date: Tue, 22 Nov 2022 16:37:34 +0530
Subject: [PATCH 11/18] feat: add submit on enter press for multiline text
 input

---
 src/components/FormSubmit/index.js                 | 6 ++----
 src/components/TextInput/BaseTextInput.js          | 2 ++
 src/components/TextInput/baseTextInputPropTypes.js | 4 ++++
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/FormSubmit/index.js b/src/components/FormSubmit/index.js
index 826cca6ce5d2..551b201619f2 100644
--- a/src/components/FormSubmit/index.js
+++ b/src/components/FormSubmit/index.js
@@ -30,10 +30,8 @@ class FormSubmit extends React.Component {
             return;
         }
 
-        // We usually do not submit the form on TEXTAREA element, when ENTER is pressed.
-        // As there is a prop on react native `blurOnSubmit`, we indeed want to submit it here.
-        // Element dataset is used here to store `blurOnSubmit` prop.
-        if (tagName === 'TEXTAREA' && lodashGet(event, 'target.dataset.blurOnSubmit', 'false') === 'true') {
+        // Pressing Enter on TEXTAREA element adds a new line. When `dataset.submitOnEnter` prop is passed, call submit.
+        if (tagName === 'TEXTAREA' && lodashGet(event, 'target.dataset.submitOnEnter', 'false') === 'true') {
             this.props.onSubmit();
             return;
         }
diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js
index fe29ff79bf25..1d69f974472f 100644
--- a/src/components/TextInput/BaseTextInput.js
+++ b/src/components/TextInput/BaseTextInput.js
@@ -287,6 +287,8 @@ class BaseTextInput extends Component {
                                         keyboardType={getSecureEntryKeyboardType(this.props.keyboardType, this.props.secureTextEntry, this.state.passwordHidden)}
                                         value={this.state.value}
                                         selection={this.state.selection}
+                                        dataSet={{submitOnEnter: this.props.multiline && this.props.submitOnEnter}}
+
                                     />
                                     {this.props.secureTextEntry && (
                                         <Checkbox
diff --git a/src/components/TextInput/baseTextInputPropTypes.js b/src/components/TextInput/baseTextInputPropTypes.js
index b18c1fe6cd96..5c52d1e17b8f 100644
--- a/src/components/TextInput/baseTextInputPropTypes.js
+++ b/src/components/TextInput/baseTextInputPropTypes.js
@@ -70,6 +70,9 @@ const propTypes = {
 
     /** Whether we should wait before focusing the TextInput, useful when using transitions  */
     shouldDelayFocus: PropTypes.bool,
+
+    /** Indicate whether pressing Enter on multiline input is allowed to submit the form. */
+    submitOnEnter: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -101,6 +104,7 @@ const defaultProps = {
     prefixCharacter: '',
     onInputChange: () => {},
     shouldDelayFocus: false,
+    submitOnEnter: false,
 };
 
 export {propTypes, defaultProps};

From acaf7c51859fef903843342118d0615853428312 Mon Sep 17 00:00:00 2001
From: Md Neyaz Ahmad <mdneyazahmad66@gmail.com>
Date: Tue, 22 Nov 2022 17:34:49 +0530
Subject: [PATCH 12/18] docs: update comments

---
 src/components/FormSubmit/index.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/FormSubmit/index.js b/src/components/FormSubmit/index.js
index 551b201619f2..88b2907c2bac 100644
--- a/src/components/FormSubmit/index.js
+++ b/src/components/FormSubmit/index.js
@@ -30,7 +30,8 @@ class FormSubmit extends React.Component {
             return;
         }
 
-        // Pressing Enter on TEXTAREA element adds a new line. When `dataset.submitOnEnter` prop is passed, call submit.
+        // FormSubmit Enter key handler does not have access to direct props.
+        // `dataset.submitOnEnter` is used to indicate that pressing Enter on this input should call the submit callback.
         if (tagName === 'TEXTAREA' && lodashGet(event, 'target.dataset.submitOnEnter', 'false') === 'true') {
             this.props.onSubmit();
             return;
@@ -44,6 +45,9 @@ class FormSubmit extends React.Component {
 
     render() {
         return (
+
+            // When Enter is pressed on `TextInput` the event is stopped (react-native-web).
+            // We are using capture phase here to track the keyboard input, and call the submit callback.
             <View onKeyDownCapture={this.submitForm} style={this.props.style}>{this.props.children}</View>
         );
     }

From b6fe28e7f89a42e088ebd6ec007b214be8db5127 Mon Sep 17 00:00:00 2001
From: Md Neyaz Ahmad <mdneyazahmad66@gmail.com>
Date: Tue, 22 Nov 2022 21:02:18 +0530
Subject: [PATCH 13/18] docs: update comments

---
 src/components/FormSubmit/index.js        | 8 ++++----
 src/components/TextInput/BaseTextInput.js | 3 +++
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/FormSubmit/index.js b/src/components/FormSubmit/index.js
index 88b2907c2bac..ee08b4d90ad1 100644
--- a/src/components/FormSubmit/index.js
+++ b/src/components/FormSubmit/index.js
@@ -30,8 +30,7 @@ class FormSubmit extends React.Component {
             return;
         }
 
-        // FormSubmit Enter key handler does not have access to direct props.
-        // `dataset.submitOnEnter` is used to indicate that pressing Enter on this input should call the submit callback.
+        // Pressing Enter on TEXTAREA element adds a new line. When `dataset.submitOnEnter` prop is passed, call the submit callback.
         if (tagName === 'TEXTAREA' && lodashGet(event, 'target.dataset.submitOnEnter', 'false') === 'true') {
             this.props.onSubmit();
             return;
@@ -46,8 +45,9 @@ class FormSubmit extends React.Component {
     render() {
         return (
 
-            // When Enter is pressed on `TextInput` the event is stopped (react-native-web).
-            // We are using capture phase here to track the keyboard input, and call the submit callback.
+            // react-native-web prevents event bubbling on TextInput for key presses
+            // https://github.com/necolas/react-native-web/blob/fa47f80d34ee6cde2536b2a2241e326f84b633c4/packages/react-native-web/src/exports/TextInput/index.js#L272
+            // Thus use capture phase.
             <View onKeyDownCapture={this.submitForm} style={this.props.style}>{this.props.children}</View>
         );
     }
diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js
index 1d69f974472f..b93ae0878d00 100644
--- a/src/components/TextInput/BaseTextInput.js
+++ b/src/components/TextInput/BaseTextInput.js
@@ -287,6 +287,9 @@ class BaseTextInput extends Component {
                                         keyboardType={getSecureEntryKeyboardType(this.props.keyboardType, this.props.secureTextEntry, this.state.passwordHidden)}
                                         value={this.state.value}
                                         selection={this.state.selection}
+
+                                        // FormSubmit Enter key handler does not have access to direct props.
+                                        // `dataset.submitOnEnter` is used to indicate that pressing Enter on this input should call the submit callback.
                                         dataSet={{submitOnEnter: this.props.multiline && this.props.submitOnEnter}}
 
                                     />

From 7d339388dea6a6060c547566e28dd158cd49d15d Mon Sep 17 00:00:00 2001
From: mdneyazahmad <77761491+mdneyazahmad@users.noreply.github.com>
Date: Wed, 23 Nov 2022 09:39:58 +0530
Subject: [PATCH 14/18] docs: update comment

Co-authored-by: Rajat Parashar <parasharrajat@users.noreply.github.com>
---
 src/components/FormSubmit/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/FormSubmit/index.js b/src/components/FormSubmit/index.js
index ee08b4d90ad1..3c1db2515643 100644
--- a/src/components/FormSubmit/index.js
+++ b/src/components/FormSubmit/index.js
@@ -45,7 +45,7 @@ class FormSubmit extends React.Component {
     render() {
         return (
 
-            // react-native-web prevents event bubbling on TextInput for key presses
+            // React-native-web prevents event bubbling on TextInput for key presses
             // https://github.com/necolas/react-native-web/blob/fa47f80d34ee6cde2536b2a2241e326f84b633c4/packages/react-native-web/src/exports/TextInput/index.js#L272
             // Thus use capture phase.
             <View onKeyDownCapture={this.submitForm} style={this.props.style}>{this.props.children}</View>

From ac9019d1121da17718393d74d6240d27fb0977ab Mon Sep 17 00:00:00 2001
From: Md Neyaz Ahmad <mdneyazahmad66@gmail.com>
Date: Fri, 30 Dec 2022 12:07:21 +0530
Subject: [PATCH 15/18] fix(WorkspaceInvitePage): submit form with

---
 src/pages/workspace/WorkspaceInvitePage.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/pages/workspace/WorkspaceInvitePage.js b/src/pages/workspace/WorkspaceInvitePage.js
index 348af36ba089..41bcb002248d 100644
--- a/src/pages/workspace/WorkspaceInvitePage.js
+++ b/src/pages/workspace/WorkspaceInvitePage.js
@@ -14,6 +14,7 @@ import ONYXKEYS from '../../ONYXKEYS';
 import * as Policy from '../../libs/actions/Policy';
 import TextInput from '../../components/TextInput';
 import FormAlertWithSubmitButton from '../../components/FormAlertWithSubmitButton';
+import FormSubmit from '../../components/FormSubmit';
 import OptionsSelector from '../../components/OptionsSelector';
 import * as OptionsListUtils from '../../libs/OptionsListUtils';
 import CONST from '../../CONST';
@@ -285,7 +286,7 @@ class WorkspaceInvitePage extends React.Component {
                         shouldShow={_.isEmpty(this.props.policy)}
                         onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}
                     >
-                        <>
+                        <FormSubmit style={[styles.flex1]} onSubmit={this.inviteUser}>
                             <HeaderWithCloseButton
                                 title={this.props.translate('workspace.invite.invitePeople')}
                                 subtitle={policyName}
@@ -338,6 +339,7 @@ class WorkspaceInvitePage extends React.Component {
                                     message={this.props.policy.alertMessage}
                                     containerStyles={[styles.flexReset, styles.mb0, styles.flexGrow0, styles.flexShrink0, styles.flexBasisAuto]}
                                     enabledWhenOffline
+                                    disablePressOnEnter
                                 />
                                 <Pressable
                                     onPress={this.openPrivacyURL}
@@ -356,7 +358,7 @@ class WorkspaceInvitePage extends React.Component {
                                     )}
                                 </Pressable>
                             </View>
-                        </>
+                        </FormSubmit>
                     </FullPageNotFoundView>
                 )}
             </ScreenWrapper>

From 6dc6c4d6975e701f0644b4cc8e54cf9ac393afab Mon Sep 17 00:00:00 2001
From: Md Neyaz Ahmad <mdneyazahmad66@gmail.com>
Date: Fri, 6 Jan 2023 01:38:18 +0530
Subject: [PATCH 16/18] style: fix lint error

---
 src/components/Form.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Form.js b/src/components/Form.js
index 42fa299d0304..8c2a2a3e1ff3 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -1,6 +1,5 @@
 import lodashGet from 'lodash/get';
 import React from 'react';
-import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import {withOnyx} from 'react-native-onyx';

From 899270968b67ba4ca9783f69da1e25003eb4a871 Mon Sep 17 00:00:00 2001
From: Md Neyaz Ahmad <mdneyazahmad66@gmail.com>
Date: Wed, 25 Jan 2023 19:17:59 +0530
Subject: [PATCH 17/18] fix: add style proptype

---
 src/components/Form.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/Form.js b/src/components/Form.js
index e3e141ce4caf..809d410e871d 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -13,6 +13,7 @@ import FormAlertWithSubmitButton from './FormAlertWithSubmitButton';
 import FormSubmit from './FormSubmit';
 import SafeAreaConsumer from './SafeAreaConsumer';
 import ScrollViewWithContext from './ScrollViewWithContext';
+import stylePropTypes from '../styles/stylePropTypes';
 
 const propTypes = {
     /** A unique Onyx key identifying the form */
@@ -68,6 +69,9 @@ const propTypes = {
      */
     scrollContextEnabled: PropTypes.bool,
 
+    /** Container styles */
+    style: stylePropTypes,
+
     ...withLocalizePropTypes,
 };
 
@@ -82,6 +86,7 @@ const defaultProps = {
     isSubmitActionDangerous: false,
     scrollToOverflowEnabled: false,
     scrollContextEnabled: false,
+    style: [],
 };
 
 class Form extends React.Component {

From e952bca006863a260e781f0cb52c99498c23b280 Mon Sep 17 00:00:00 2001
From: Md Neyaz Ahmad <mdneyazahmad66@gmail.com>
Date: Wed, 25 Jan 2023 20:09:04 +0530
Subject: [PATCH 18/18] fix: style proptype error

---
 src/components/Form.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Form.js b/src/components/Form.js
index 809d410e871d..99270029f565 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -1,6 +1,6 @@
 import lodashGet from 'lodash/get';
 import React from 'react';
-import {ScrollView} from 'react-native';
+import {ScrollView, StyleSheet} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import {withOnyx} from 'react-native-onyx';
@@ -279,7 +279,7 @@ class Form extends React.Component {
 
     render() {
         const scrollViewContent = safeAreaPaddingBottomStyle => (
-            <FormSubmit style={[this.props.style, safeAreaPaddingBottomStyle]} onSubmit={this.submit}>
+            <FormSubmit style={StyleSheet.flatten([this.props.style, safeAreaPaddingBottomStyle])} onSubmit={this.submit}>
                 {this.childrenWrapperWithProps(this.props.children)}
                 {this.props.isSubmitButtonVisible && (
                 <FormAlertWithSubmitButton