diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js index 0fd2ad935f4c..cce8bda03591 100644 --- 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 { - 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 index 8ff1731945b2..46240542cede 100644 --- 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(