allow pasting magic codes in iOS Safari

Expensify · May 11, 2023 · 7a7d3d6 · 7a7d3d6
1 parent 1d951e6
commit 7a7d3d6
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git 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
@@ -2332,6 +2332,10 @@ const styles = {
         lineHeight: variables.inputHeight,
     },
 
+    magicCodeInputTransparent: {
+        color: 'transparent',
+    },
+
     iouAmountText: {
         ...headlineFont,
         fontSize: variables.iouAmountTextSize,