Merge pull request #44888 from tienifr/fix/32683

fix: safari password autofill does not disappear

src/components/Form/SafariFormWrapper.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import {isSafari} from '@libs/Browser';
+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>;
+    }
+
+    return children;
+}
+
+export default SafariFormWrapper;

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';
@@ -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>
     );
 }