diff --git a/src/components/FormElement.tsx b/src/components/FormElement/index.native.tsx similarity index 80% rename from src/components/FormElement.tsx rename to src/components/FormElement/index.native.tsx index da98d4dc565a..d0413c5244c1 100644 --- a/src/components/FormElement.tsx +++ b/src/components/FormElement/index.native.tsx @@ -2,12 +2,10 @@ import type {ForwardedRef} from 'react'; import React, {forwardRef} from 'react'; import type {ViewProps} from 'react-native'; import {View} from 'react-native'; -import * as ComponentUtils from '@libs/ComponentUtils'; function FormElement(props: ViewProps, ref: ForwardedRef) { return ( { + // When Enter is pressed, the form is submitted to the action URL (POST /). + // As we are using a controlled component, we need to disable this behavior here. + event.preventDefault(); +}; + +function FormElement(props: ViewProps, outerRef: ForwardedRef) { + const formRef = useRef(null); + const mergedRef = mergeRefs(formRef, outerRef); + + useEffect(() => { + const formCurrent = formRef.current; + + if (!formCurrent) { + return; + } + + // Prevent the browser from applying its own validation, which affects the email input + formCurrent.setAttribute('novalidate', ''); + + // Password Managers need these attributes to be able to identify the form elements properly. + formCurrent.setAttribute('method', 'post'); + formCurrent.setAttribute('action', '/'); + formCurrent.addEventListener('submit', preventFormDefault); + + return () => { + formCurrent.removeEventListener('submit', preventFormDefault); + }; + }, []); + + return ( + + ); +} + +FormElement.displayName = 'FormElement'; + +export default forwardRef(FormElement); diff --git a/src/components/SignInPageForm/index.native.tsx b/src/components/SignInPageForm/index.native.tsx deleted file mode 100644 index 0d00c754d45a..000000000000 --- a/src/components/SignInPageForm/index.native.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import FormElement from '@components/FormElement'; -import type SignInPageFormProps from './types'; - -function SignInPageForm(props: SignInPageFormProps) { - // eslint-disable-next-line react/jsx-props-no-spreading - return ; -} - -SignInPageForm.displayName = 'SignInPageForm'; - -export default SignInPageForm; diff --git a/src/components/SignInPageForm/index.tsx b/src/components/SignInPageForm/index.tsx deleted file mode 100644 index b9f0fe202dd1..000000000000 --- a/src/components/SignInPageForm/index.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import React, {useEffect, useRef} from 'react'; -import type {View} from 'react-native'; -import FormElement from '@components/FormElement'; -import type SignInPageFormProps from './types'; - -const preventFormDefault = (event: SubmitEvent) => { - // When enter is pressed form is submitted to action url (POST /). - // As we are using controlled component, we need to disable it here. - event.preventDefault(); -}; - -function SignInPageForm(props: SignInPageFormProps) { - const form = useRef(null); - - useEffect(() => { - const formCurrent = form.current; - - if (!formCurrent) { - return; - } - - // Prevent the browser from applying its own validation, which affects the email input - formCurrent.setAttribute('novalidate', ''); - - // Password Managers need these attributes to be able to identify the form elements properly. - formCurrent.setAttribute('method', 'post'); - formCurrent.setAttribute('action', '/'); - formCurrent.addEventListener('submit', preventFormDefault); - - return () => { - if (!formCurrent) { - return; - } - formCurrent.removeEventListener('submit', preventFormDefault); - }; - }, []); - - return ( - - ); -} - -SignInPageForm.displayName = 'SignInPageForm'; - -export default SignInPageForm; diff --git a/src/components/SignInPageForm/types.ts b/src/components/SignInPageForm/types.ts deleted file mode 100644 index c7f71a3f7151..000000000000 --- a/src/components/SignInPageForm/types.ts +++ /dev/null @@ -1,5 +0,0 @@ -import type {ViewProps} from 'react-native'; - -type SignInPageFormProps = ViewProps; - -export default SignInPageFormProps; diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.tsx b/src/pages/signin/SignInPageLayout/SignInPageContent.tsx index 770eafa199b7..9e304bc9114d 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageContent.tsx +++ b/src/pages/signin/SignInPageLayout/SignInPageContent.tsx @@ -1,8 +1,8 @@ import React from 'react'; import {View} from 'react-native'; import ExpensifyWordmark from '@components/ExpensifyWordmark'; +import FormElement from '@components/FormElement'; import OfflineIndicator from '@components/OfflineIndicator'; -import SignInPageForm from '@components/SignInPageForm'; import Text from '@components/Text'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useStyleUtils from '@hooks/useStyleUtils'; @@ -27,7 +27,7 @@ function SignInPageContent({shouldShowWelcomeHeader, welcomeHeader, welcomeText, {/* This empty view creates margin on the top of the sign in form which will shrink and grow depending on if the keyboard is open or not */} - + @@ -51,7 +51,7 @@ function SignInPageContent({shouldShowWelcomeHeader, welcomeHeader, welcomeText, ) : null} {children} - + diff --git a/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage/RatePage.tsx b/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage/RatePage.tsx index d78ccb82d704..65be798f9520 100644 --- a/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage/RatePage.tsx +++ b/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage/RatePage.tsx @@ -92,6 +92,7 @@ function WorkspaceRatePage(props: WorkspaceRatePageProps) { shouldHideFixErrorsAlert submitFlexEnabled={false} submitButtonStyles={[styles.mh5, styles.mt0]} + disablePressOnEnter={false} >