Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix form default behavior #36401

Merged
merged 13 commits into from
Feb 29, 2024
Original file line number Diff line number Diff line change
Expand Up @@ -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}
shubham1206agra marked this conversation as resolved.
Show resolved Hide resolved
ref={ref}
// eslint-disable-next-line react/jsx-props-no-spreading
{...props}
Expand Down
50 changes: 50 additions & 0 deletions src/components/FormElement/index.tsx
Original file line number Diff line number Diff line change
@@ -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);
12 changes: 0 additions & 12 deletions src/components/SignInPageForm/index.native.tsx

This file was deleted.

49 changes: 0 additions & 49 deletions src/components/SignInPageForm/index.tsx

This file was deleted.

5 changes: 0 additions & 5 deletions src/components/SignInPageForm/types.ts

This file was deleted.

6 changes: 3 additions & 3 deletions src/pages/signin/SignInPageLayout/SignInPageContent.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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>
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@ function WorkspaceRatePage(props: WorkspaceRatePageProps) {
shouldHideFixErrorsAlert
submitFlexEnabled={false}
submitButtonStyles={[styles.mh5, styles.mt0]}
disablePressOnEnter={false}
>
<InputWrapperWithRef
InputComponent={AmountForm}
Expand Down
Loading