Merge pull request #36401 from shubham1206agra/fix-form-default

Fix form default behavior

src/components/FormElement.tsx → 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<View>) {
     return (
         <View
-            role={ComponentUtils.ACCESSIBILITY_ROLE_FORM}
             ref={ref}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}

src/components/FormElement/index.tsx

@@ -0,0 +1,50 @@
+import type {ForwardedRef} from 'react';
+import React, {forwardRef, useEffect, useRef} from 'react';
+import type {ViewProps} from 'react-native';
+import {View} from 'react-native';
+import * as ComponentUtils from '@libs/ComponentUtils';
+import mergeRefs from '@libs/mergeRefs';
+
+const preventFormDefault = (event: SubmitEvent) => {
+    // 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<View>) {
+    const formRef = useRef<HTMLFormElement & View>(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 (
+        <View
+            role={ComponentUtils.ACCESSIBILITY_ROLE_FORM}
+            ref={mergedRef}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+        />
+    );
+}
+
+FormElement.displayName = 'FormElement';
+
+export default forwardRef(FormElement);

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 */}
                 <View style={[styles.flexGrow1, shouldUseNarrowLayout ? styles.signInPageContentTopSpacerSmallScreens : styles.signInPageContentTopSpacer]} />
                 <View style={[styles.flexGrow2, styles.mb8]}>
-                    <SignInPageForm style={[styles.alignSelfStretch]}>
+                    <FormElement style={[styles.alignSelfStretch]}>
                         <View style={[shouldUseNarrowLayout ? styles.mb8 : styles.mb15, shouldUseNarrowLayout ? styles.alignItemsCenter : styles.alignSelfStart]}>
                             <ExpensifyWordmark />
                         </View>
@@ -51,7 +51,7 @@ function SignInPageContent({shouldShowWelcomeHeader, welcomeHeader, welcomeText,
                             ) : null}
                         </View>
                         {children}
-                    </SignInPageForm>
+                    </FormElement>
                     <View style={[styles.mb8, styles.signInPageWelcomeTextContainer, styles.alignSelfCenter]}>
                         <OfflineIndicator style={[styles.m0, styles.pl0, styles.alignItemsStart]} />
                     </View>

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}
                 >
                     <InputWrapperWithRef
                         InputComponent={AmountForm}