Fixed rendering of BaseTextInput using autoGrow

Expensify · Sep 19, 2023 · f5eb835 · f5eb835
1 parent b294af5
commit f5eb835
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js
@@ -399,10 +399,13 @@ function BaseTextInput(props) {
                 This Text component is intentionally positioned out of the screen.
             */}
             {(props.autoGrow || props.autoGrowHeight) && (
+                // Add +32 to width so that text is not cut off due to the cursor or when changing the value
+                // https://github.com/Expensify/App/issues/8158
+                // https://github.com/Expensify/App/issues/26628
                 <Text
                     style={[...props.inputStyle, props.autoGrowHeight && styles.autoGrowHeightHiddenInput(width, maxHeight), styles.hiddenElementOutsideOfWindow, styles.visibilityHidden]}
                     onLayout={(e) => {
-                        setTextInputWidth(e.nativeEvent.layout.width);
+                        setTextInputWidth(e.nativeEvent.layout.width + 32);
                         setTextInputHeight(e.nativeEvent.layout.height);
                     }}
                 >

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -2680,6 +2680,9 @@ const styles = (theme) => ({
         fontSize: variables.iouAmountTextSize,
         color: theme.heading,
         lineHeight: variables.inputHeight,
+        // This margin counteracts the additional size given to the autoGrow text in BaseTextInput.js
+        // It fixes issue https://github.com/Expensify/App/issues/26628
+        marginLeft: 32
     },
 
     iouAmountTextInput: addOutlineWidth(