Merge pull request #21935 from bernhardoj/fix/21591-workspace-invite-…

…enter-behavior Fix pressing enter in workspace invite page will submit and proceed to invite message page
Expensify · Jul 3, 2023 · 3322b88 · 3322b88
2 parents 9bd7ccd + 23c891b
commit 3322b88
Showing 1 changed file with 40 additions and 46 deletions.
diff --git a/src/pages/workspace/WorkspaceInvitePage.js b/src/pages/workspace/WorkspaceInvitePage.js
@@ -13,7 +13,6 @@ import compose from '../../libs/compose';
 import ONYXKEYS from '../../ONYXKEYS';
 import * as Policy from '../../libs/actions/Policy';
 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';
@@ -277,52 +276,47 @@ class WorkspaceInvitePage extends React.Component {
                     shouldShow={_.isEmpty(this.props.policy)}
                     onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}
                 >
-                    <FormSubmit
-                        style={[styles.flex1]}
-                        onSubmit={this.inviteUser}
-                    >
-                        <HeaderWithBackButton
-                            title={this.props.translate('workspace.invite.invitePeople')}
-                            subtitle={policyName}
-                            shouldShowGetAssistanceButton
-                            guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_MEMBERS}
-                            onBackButtonPress={() => {
-                                this.clearErrors();
-                                Navigation.goBack(ROUTES.getWorkspaceMembersRoute(this.props.route.params.policyID));
-                            }}
+                    <HeaderWithBackButton
+                        title={this.props.translate('workspace.invite.invitePeople')}
+                        subtitle={policyName}
+                        shouldShowGetAssistanceButton
+                        guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_MEMBERS}
+                        onBackButtonPress={() => {
+                            this.clearErrors();
+                            Navigation.goBack(ROUTES.getWorkspaceMembersRoute(this.props.route.params.policyID));
+                        }}
+                    />
+                    <View style={[styles.flexGrow1, styles.flexShrink0, styles.flexBasisAuto]}>
+                        <OptionsSelector
+                            contentContainerStyles={[styles.flexGrow1, styles.flexShrink0, styles.flexBasisAuto]}
+                            listContainerStyles={[styles.flexGrow1, styles.flexShrink1, styles.flexBasis0]}
+                            canSelectMultipleOptions
+                            sections={sections}
+                            selectedOptions={this.state.selectedOptions}
+                            value={this.state.searchTerm}
+                            shouldShowOptions={OptionsListUtils.isPersonalDetailsReady(this.props.personalDetails)}
+                            onSelectRow={this.toggleOption}
+                            onChangeText={this.updateOptionsWithSearchTerm}
+                            onConfirmSelection={this.inviteUser}
+                            headerMessage={headerMessage}
+                            hideSectionHeaders
+                            boldStyle
+                            shouldFocusOnSelectRow={!Browser.isMobile()}
+                            textInputLabel={this.props.translate('optionsSelector.nameEmailOrPhoneNumber')}
                         />
-                        <View style={[styles.flexGrow1, styles.flexShrink0, styles.flexBasisAuto]}>
-                            <OptionsSelector
-                                contentContainerStyles={[styles.flexGrow1, styles.flexShrink0, styles.flexBasisAuto]}
-                                listContainerStyles={[styles.flexGrow1, styles.flexShrink1, styles.flexBasis0]}
-                                canSelectMultipleOptions
-                                sections={sections}
-                                selectedOptions={this.state.selectedOptions}
-                                value={this.state.searchTerm}
-                                shouldShowOptions={OptionsListUtils.isPersonalDetailsReady(this.props.personalDetails)}
-                                onSelectRow={this.toggleOption}
-                                onChangeText={this.updateOptionsWithSearchTerm}
-                                onConfirmSelection={this.inviteUser}
-                                headerMessage={headerMessage}
-                                hideSectionHeaders
-                                boldStyle
-                                shouldFocusOnSelectRow={!Browser.isMobile()}
-                                textInputLabel={this.props.translate('optionsSelector.nameEmailOrPhoneNumber')}
-                            />
-                        </View>
-                        <View style={[styles.flexShrink0]}>
-                            <FormAlertWithSubmitButton
-                                isDisabled={!this.state.selectedOptions.length}
-                                isAlertVisible={this.getShouldShowAlertPrompt()}
-                                buttonText={this.props.translate('common.next')}
-                                onSubmit={this.inviteUser}
-                                message={this.props.policy.alertMessage}
-                                containerStyles={[styles.flexReset, styles.flexGrow0, styles.flexShrink0, styles.flexBasisAuto, styles.mb5]}
-                                enabledWhenOffline
-                                disablePressOnEnter
-                            />
-                        </View>
-                    </FormSubmit>
+                    </View>
+                    <View style={[styles.flexShrink0]}>
+                        <FormAlertWithSubmitButton
+                            isDisabled={!this.state.selectedOptions.length}
+                            isAlertVisible={this.getShouldShowAlertPrompt()}
+                            buttonText={this.props.translate('common.next')}
+                            onSubmit={this.inviteUser}
+                            message={this.props.policy.alertMessage}
+                            containerStyles={[styles.flexReset, styles.flexGrow0, styles.flexShrink0, styles.flexBasisAuto, styles.mb5]}
+                            enabledWhenOffline
+                            disablePressOnEnter
+                        />
+                    </View>
                 </FullPageNotFoundView>
             </ScreenWrapper>
         );