From 7a7d3d62c55f9d0f8c1aab0f2b368db8181f64b8 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Thu, 11 May 2023 10:38:00 +0100
Subject: [PATCH 1/2] allow pasting magic codes in iOS Safari

---
 src/components/MagicCodeInput.js | 9 ++++++++-
 src/styles/styles.js             | 4 ++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js
index b33e686001db..1b1b8f9a0aa7 100644
--- a/src/components/MagicCodeInput.js
+++ b/src/components/MagicCodeInput.js
@@ -8,6 +8,7 @@ import CONST from '../CONST';
 import Text from './Text';
 import TextInput from './TextInput';
 import FormHelpMessage from './FormHelpMessage';
+import * as Browser from '../libs/Browser';
 
 const propTypes = {
     /** Name attribute for the input */
@@ -84,6 +85,10 @@ function MagicCodeInput(props) {
     const [focusedIndex, setFocusedIndex] = useState(0);
     const [editIndex, setEditIndex] = useState(0);
 
+    // For Safari on iOS, a transparent background will be used instead of opacity: 0, so that magic code pasting can work.
+    // Alternate styling will be applied based on this condition.
+    const isMobileSafari = Browser.isMobileSafari();
+
     useImperativeHandle(props.innerRef, () => ({
         focus() {
             setFocusedIndex(0);
@@ -266,7 +271,7 @@ function MagicCodeInput(props) {
                         <View style={[styles.textInputContainer, focusedIndex === index ? styles.borderColorFocus : {}]}>
                             <Text style={[styles.magicCodeInput, styles.textAlignCenter]}>{decomposeString(props.value)[index] || ''}</Text>
                         </View>
-                        <View style={[StyleSheet.absoluteFillObject, styles.w100, styles.opacity0]}>
+                        <View style={[StyleSheet.absoluteFillObject, styles.w100, isMobileSafari ? styles.bgTransparent : styles.opacity0]}>
                             <TextInput
                                 ref={(ref) => (inputRefs.current[index] = ref)}
                                 autoFocus={index === 0 && props.autoFocus}
@@ -291,6 +296,8 @@ function MagicCodeInput(props) {
                                 onKeyPress={onKeyPress}
                                 onPress={(event) => onPress(event, index)}
                                 onFocus={onFocus}
+                                caretHidden={isMobileSafari}
+                                inputStyle={[isMobileSafari ? styles.magicCodeInputTransparent : undefined]}
                             />
                         </View>
                     </View>
diff --git a/src/styles/styles.js b/src/styles/styles.js
index a8e86b220a03..7f49c50743cc 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2332,6 +2332,10 @@ const styles = {
         lineHeight: variables.inputHeight,
     },
 
+    magicCodeInputTransparent: {
+        color: 'transparent',
+    },
+
     iouAmountText: {
         ...headlineFont,
         fontSize: variables.iouAmountTextSize,

From d97a58eee69c68b3c072f31ce4c9bb317cacb144 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Tue, 16 May 2023 11:06:27 +0100
Subject: [PATCH 2/2] cleanup code and comments

---
 src/components/MagicCodeInput.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js
index 1b1b8f9a0aa7..f9127c755f31 100644
--- a/src/components/MagicCodeInput.js
+++ b/src/components/MagicCodeInput.js
@@ -85,10 +85,6 @@ function MagicCodeInput(props) {
     const [focusedIndex, setFocusedIndex] = useState(0);
     const [editIndex, setEditIndex] = useState(0);
 
-    // For Safari on iOS, a transparent background will be used instead of opacity: 0, so that magic code pasting can work.
-    // Alternate styling will be applied based on this condition.
-    const isMobileSafari = Browser.isMobileSafari();
-
     useImperativeHandle(props.innerRef, () => ({
         focus() {
             setFocusedIndex(0);
@@ -260,6 +256,11 @@ function MagicCodeInput(props) {
         }
     };
 
+    // We need to check the browser because, in iOS Safari, an input in a container with its opacity set to
+    // 0 (completely transparent) cannot handle user interaction, hence the Paste option is never shown.
+    // Alternate styling will be applied based on this condition.
+    const isMobileSafari = Browser.isMobileSafari();
+
     return (
         <>
             <View style={[styles.magicCodeInputContainer]}>