IOU - digit appears cutoff for a moment when entering a digit before decimal point

src/components/TextInput/BaseTextInput.js

@@ -39,6 +39,7 @@ class BaseTextInput extends Component {
 
             // Value should be kept in state for the autoGrow feature to work - https://github.com/Expensify/App/pull/8232#issuecomment-1077282006
             value,
+            hiddenInputValue: value,
         };
 
         this.input = null;
@@ -72,13 +73,23 @@ class BaseTextInput extends Component {
         this.input.focus();
     }
 
-    componentDidUpdate(prevProps) {
+    componentDidUpdate(prevProps, prevState) {
         // Activate or deactivate the label when value is changed programmatically from outside
         const inputValue = _.isUndefined(this.props.value) ? this.input.value : this.props.value;
         if ((_.isUndefined(inputValue) || this.state.value === inputValue) && _.isEqual(prevProps.selection, this.props.selection)) {
             return;
         }
 
+        if (this.props.autoGrow) {
+            if (inputValue !== this.state.hiddenInputValue) {
+                this.setState({hiddenInputValue: inputValue, selection: this.props.selection});
+            }
+
+            if (prevState.textInputWidth === this.state.textInputWidth && this.props.shouldWaitWidthCalculation) {
+                return;
+            }
+        }
+
         // eslint-disable-next-line react/no-did-update-set-state
         this.setState({value: inputValue, selection: this.props.selection});
 
@@ -148,7 +159,9 @@ class BaseTextInput extends Component {
         if (this.props.onInputChange) {
             this.props.onInputChange(value);
         }
-        this.setState({value});
+        if (!this.props.autoGrow) {
+            this.setState({value});
+        }
         Str.result(this.props.onChangeText, value);
         this.activateLabel();
     }
@@ -380,7 +393,7 @@ class BaseTextInput extends Component {
                         style={[...this.props.inputStyle, this.props.autoGrowHeight ? {maxWidth: this.state.width} : {}, styles.hiddenElementOutsideOfWindow, styles.visibilityHidden]}
                         onLayout={e => this.setState({textInputWidth: e.nativeEvent.layout.width + 2, textInputHeight: e.nativeEvent.layout.height})}
                     >
-                        {this.state.value || this.props.placeholder}
+                        {this.props.autoGrowHeight ? this.state.value : this.state.hiddenInputValue || this.props.placeholder}
                     </Text>
                 )}
             </>

src/components/TextInput/baseTextInputPropTypes.js

@@ -88,6 +88,9 @@ const propTypes = {
 
     /** Set the default value to the input if there is a valid saved value */
     shouldUseDefaultValue: PropTypes.bool,
+
+    /** Indicate whether input should wait until getting calculated width based on value */
+    shouldWaitWidthCalculation: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -124,6 +127,7 @@ const defaultProps = {
     icon: null,
     shouldUseDefaultValue: false,
     multiline: false,
+    shouldWaitWidthCalculation: false,
 };
 
 export {propTypes, defaultProps};

src/components/TextInput/index.js

@@ -22,6 +22,7 @@ class TextInput extends React.Component {
             <BaseTextInput
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...this.props}
+                shouldWaitWidthCalculation
                 innerRef={(el) => {
                     this.textInput = el;
                     if (!this.props.innerRef) {