Merge pull request #18885 from allroundexperts/fix-18736

fix: add red border to the magic code input
Expensify · May 15, 2023 · a930756 · a930756
2 parents 5f3b5a0 + d043c85
commit a930756
Showing 1 changed file with 9 additions and 1 deletion.
diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js
@@ -38,6 +38,9 @@ const propTypes = {
 
     /** Function to call when the input is submitted or fully complete */
     onFulfill: PropTypes.func,
+
+    /** Specifies if the input has a validation error */
+    hasError: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -50,6 +53,7 @@ const defaultProps = {
     innerRef: null,
     onChangeText: () => {},
     onFulfill: () => {},
+    hasError: false,
 };
 
 /**
@@ -263,7 +267,11 @@ function MagicCodeInput(props) {
                         key={index}
                         style={[styles.w15]}
                     >
-                        <View style={[styles.textInputContainer, focusedIndex === index ? styles.borderColorFocus : {}]}>
+                        <View style={[
+                            styles.textInputContainer,
+                            focusedIndex === index ? styles.borderColorFocus : {},
+                            props.hasError  || props.errorText ? styles.borderColorDanger : {},
+                        ]}>
                             <Text style={[styles.magicCodeInput, styles.textAlignCenter]}>{decomposeString(props.value)[index] || ''}</Text>
                         </View>
                         <View style={[StyleSheet.absoluteFillObject, styles.w100, styles.opacity0]}>