diff --git a/src/components/FormSubmit/index.js b/src/components/FormSubmit/index.js index d0850766ce6f..35a9b64dc208 100644 --- a/src/components/FormSubmit/index.js +++ b/src/components/FormSubmit/index.js @@ -1,9 +1,10 @@ -import React from 'react'; +import React, {useEffect} from 'react'; import lodashGet from 'lodash/get'; import {View} from 'react-native'; import * as formSubmitPropTypes from './formSubmitPropTypes'; import CONST from '../../CONST'; import isEnterWhileComposition from '../../libs/KeyboardShortcut/isEnterWhileComposition'; +import * as ComponentUtils from '../../libs/ComponentUtils'; function FormSubmit({innerRef, children, onSubmit, style}) { /** @@ -36,11 +37,31 @@ function FormSubmit({innerRef, children, onSubmit, style}) { } }; + const preventDefaultFormBehavior = (e) => e.preventDefault(); + + useEffect(() => { + const form = innerRef.current; + + // Prevent the browser from applying its own validation, which affects the email input + form.setAttribute('novalidate', ''); + + form.addEventListener('submit', preventDefaultFormBehavior); + + return () => { + if (!form) { + return; + } + + form.removeEventListener('submit', preventDefaultFormBehavior); + }; + }, [innerRef]); + return ( // 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.