From c612fed3e5f2637a64edc88edbe670bdbac67f05 Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Fri, 5 Jul 2024 17:10:49 +0700
Subject: [PATCH 1/3] fix: safari password autofill does not disappear

---
 src/components/Form/SafariFormWrapper.tsx          | 14 ++++++++++++++
 .../ValidateCodeForm/BaseValidateCodeForm.tsx      |  5 +++--
 2 files changed, 17 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Form/SafariFormWrapper.tsx

diff --git a/src/components/Form/SafariFormWrapper.tsx b/src/components/Form/SafariFormWrapper.tsx
new file mode 100644
index 000000000000..47a080b72126
--- /dev/null
+++ b/src/components/Form/SafariFormWrapper.tsx
@@ -0,0 +1,14 @@
+import {isSafari} from "@libs/Browser";
+import type ChildrenProps from "@src/types/utils/ChildrenProps";
+
+type SafariFormWrapperProps = ChildrenProps;
+
+function SafariFormWrapper({children}: SafariFormWrapperProps) {
+    if (isSafari()) {
+        return <form>{children}</form>;
+    }
+
+   return <>{children}</>;
+}
+
+export default SafariFormWrapper;
diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx
index 523c89874f9c..58196f8e65fa 100755
--- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx
+++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx
@@ -31,6 +31,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import type {Account, Credentials, Session} from '@src/types/onyx';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import type ValidateCodeFormProps from './types';
+import SafariFormWrapper from '@components/Form/SafariFormWrapper';
 
 type BaseValidateCodeFormOnyxProps = {
     /** The details about the account that the user is signing in with */
@@ -291,7 +292,7 @@ function BaseValidateCodeForm({account, credentials, session, autoComplete, isUs
     }, [account, credentials, twoFactorAuthCode, validateCode, isUsingRecoveryCode, recoveryCode]);
 
     return (
-        <>
+        <SafariFormWrapper>
             {/* At this point, if we know the account requires 2FA we already successfully authenticated */}
             {account?.requiresTwoFactorAuth ? (
                 <View style={[styles.mv3]}>
@@ -402,7 +403,7 @@ function BaseValidateCodeForm({account, credentials, session, autoComplete, isUs
             <View style={[styles.mt5, styles.signInPageWelcomeTextContainer]}>
                 <Terms />
             </View>
-        </>
+        </SafariFormWrapper>
     );
 }
 

From 22e4f3fe14c18c08b4522029932bdd1e8cab03ca Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Tue, 9 Jul 2024 19:01:30 +0700
Subject: [PATCH 2/3] fix lint

---
 src/components/Form/SafariFormWrapper.tsx                  | 7 ++++---
 src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/Form/SafariFormWrapper.tsx b/src/components/Form/SafariFormWrapper.tsx
index 47a080b72126..4062205fa1ea 100644
--- a/src/components/Form/SafariFormWrapper.tsx
+++ b/src/components/Form/SafariFormWrapper.tsx
@@ -1,5 +1,6 @@
-import {isSafari} from "@libs/Browser";
-import type ChildrenProps from "@src/types/utils/ChildrenProps";
+import React from 'react';
+import {isSafari} from '@libs/Browser';
+import type ChildrenProps from '@src/types/utils/ChildrenProps';
 
 type SafariFormWrapperProps = ChildrenProps;
 
@@ -8,7 +9,7 @@ function SafariFormWrapper({children}: SafariFormWrapperProps) {
         return <form>{children}</form>;
     }
 
-   return <>{children}</>;
+    return children;
 }
 
 export default SafariFormWrapper;
diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx
index 58196f8e65fa..e28d1791134d 100755
--- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx
+++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx
@@ -4,6 +4,7 @@ import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
+import SafariFormWrapper from '@components/Form/SafariFormWrapper';
 import FormHelpMessage from '@components/FormHelpMessage';
 import type {MagicCodeInputHandle} from '@components/MagicCodeInput';
 import MagicCodeInput from '@components/MagicCodeInput';
@@ -31,7 +32,6 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import type {Account, Credentials, Session} from '@src/types/onyx';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import type ValidateCodeFormProps from './types';
-import SafariFormWrapper from '@components/Form/SafariFormWrapper';
 
 type BaseValidateCodeFormOnyxProps = {
     /** The details about the account that the user is signing in with */

From e70ae1e092a457c2797f6908dfd6227e6f2297d7 Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Wed, 10 Jul 2024 18:49:43 +0700
Subject: [PATCH 3/3] add explanative comments

---
 src/components/Form/SafariFormWrapper.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/Form/SafariFormWrapper.tsx b/src/components/Form/SafariFormWrapper.tsx
index 4062205fa1ea..8ad411e547be 100644
--- a/src/components/Form/SafariFormWrapper.tsx
+++ b/src/components/Form/SafariFormWrapper.tsx
@@ -4,6 +4,9 @@ import type ChildrenProps from '@src/types/utils/ChildrenProps';
 
 type SafariFormWrapperProps = ChildrenProps;
 
+/**
+ * If we used any <input> without <form> wrapper, Safari 11+ would show the auto-fill suggestion popup.
+ */
 function SafariFormWrapper({children}: SafariFormWrapperProps) {
     if (isSafari()) {
         return <form>{children}</form>;