From 48fb5798201840daf23b2361fb1b0ed28f0ba4a1 Mon Sep 17 00:00:00 2001
From: Sam Hariri <137707942+samh-nl@users.noreply.github.com>
Date: Fri, 11 Aug 2023 13:57:25 +0200
Subject: [PATCH 1/4] fix: prevent browser form validation

---
 src/components/FormSubmit/index.js     | 13 ++++++++++++-
 src/components/SignInPageForm/index.js |  3 +++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/FormSubmit/index.js b/src/components/FormSubmit/index.js
index d0850766ce6f..ca5135da9d10 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,21 @@ function FormSubmit({innerRef, children, onSubmit, style}) {
         }
     };
 
+    const preventDefaultFormBehavior = (e) => e.preventDefault();
+
+    useEffect(() => {
+        // Prevent the browser from applying its own validation, which affects the email input
+        innerRef.current.setAttribute('novalidate', '');
+
+        innerRef.current.addEventListener('submit', preventDefaultFormBehavior);
+    }, []);
+
     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.
         <View
+            accessibilityRole={ComponentUtils.ACCESSIBILITY_ROLE_FORM}
             ref={innerRef}
             onKeyDownCapture={submitForm}
             style={style}
diff --git a/src/components/SignInPageForm/index.js b/src/components/SignInPageForm/index.js
index 21df710d2aa5..9db9ffea0e6a 100644
--- a/src/components/SignInPageForm/index.js
+++ b/src/components/SignInPageForm/index.js
@@ -13,6 +13,9 @@ class Form extends React.Component {
             return;
         }
 
+        // Prevent the browser from applying its own validation, which affects the email input
+        this.form.setAttribute('novalidate', '');
+
         // Password Managers need these attributes to be able to identify the form elements properly.
         this.form.setAttribute('method', 'post');
         this.form.setAttribute('action', '/');

From 4eac5044f659691278807638cdb6de9660bb0f73 Mon Sep 17 00:00:00 2001
From: Sam Hariri <137707942+samh-nl@users.noreply.github.com>
Date: Fri, 11 Aug 2023 17:00:13 +0200
Subject: [PATCH 2/4] fix: cleanup listener

---
 src/components/FormSubmit/index.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/FormSubmit/index.js b/src/components/FormSubmit/index.js
index ca5135da9d10..114138a33b3e 100644
--- a/src/components/FormSubmit/index.js
+++ b/src/components/FormSubmit/index.js
@@ -44,7 +44,14 @@ function FormSubmit({innerRef, children, onSubmit, style}) {
         innerRef.current.setAttribute('novalidate', '');
 
         innerRef.current.addEventListener('submit', preventDefaultFormBehavior);
-    }, []);
+
+        return () => {
+            if (!innerRef.current) {
+                return;
+            }
+            
+            innerRef.current.removeEventListener('submit', preventDefaultFormBehavior);
+        };
 
     return (
         // React-native-web prevents event bubbling on TextInput for key presses

From 15e173d59e21bf268c978a6814b9dfb18e07e03c Mon Sep 17 00:00:00 2001
From: Sam Hariri <137707942+samh-nl@users.noreply.github.com>
Date: Fri, 11 Aug 2023 17:00:41 +0200
Subject: [PATCH 3/4] fix: add dependency

---
 src/components/FormSubmit/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/FormSubmit/index.js b/src/components/FormSubmit/index.js
index 114138a33b3e..2e407431be88 100644
--- a/src/components/FormSubmit/index.js
+++ b/src/components/FormSubmit/index.js
@@ -52,6 +52,7 @@ function FormSubmit({innerRef, children, onSubmit, style}) {
             
             innerRef.current.removeEventListener('submit', preventDefaultFormBehavior);
         };
+    }, [innerRef]);
 
     return (
         // React-native-web prevents event bubbling on TextInput for key presses

From 12c14bbb6ad2e7e2c9f809bdcfc16a0be4a5d97d Mon Sep 17 00:00:00 2001
From: Sam Hariri <137707942+samh-nl@users.noreply.github.com>
Date: Fri, 11 Aug 2023 17:11:52 +0200
Subject: [PATCH 4/4] fix: lint

---
 src/components/FormSubmit/index.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/FormSubmit/index.js b/src/components/FormSubmit/index.js
index 2e407431be88..35a9b64dc208 100644
--- a/src/components/FormSubmit/index.js
+++ b/src/components/FormSubmit/index.js
@@ -40,17 +40,19 @@ 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
-        innerRef.current.setAttribute('novalidate', '');
+        form.setAttribute('novalidate', '');
 
-        innerRef.current.addEventListener('submit', preventDefaultFormBehavior);
+        form.addEventListener('submit', preventDefaultFormBehavior);
 
         return () => {
-            if (!innerRef.current) {
+            if (!form) {
                 return;
             }
-            
-            innerRef.current.removeEventListener('submit', preventDefaultFormBehavior);
+
+            form.removeEventListener('submit', preventDefaultFormBehavior);
         };
     }, [innerRef]);