From e134ed34cf703142f95388b78289ee74c3396ccf Mon Sep 17 00:00:00 2001
From: Oliver Wilks <ollywilks@googlemail.com>
Date: Tue, 9 May 2023 12:51:40 +0100
Subject: [PATCH 1/4] Added autoGrowHeightHiddenInput

---
 src/styles/styles.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/styles/styles.js b/src/styles/styles.js
index 0fba33839128..71db658d6563 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -813,6 +813,12 @@ const styles = {
         minHeight: variables.componentSizeLarge,
     }),
 
+    autoGrowHeightHiddenInput: (maxWidth, maxHeight) => ({
+        maxWidth,
+        maxHeight: maxHeight + 1,
+        overflow: 'hidden',
+    }),
+
     textInputContainer: {
         flex: 1,
         justifyContent: 'center',

From a24719157c842dbdd7eab899f0113c385adff579 Mon Sep 17 00:00:00 2001
From: Oliver Wilks <ollywilks@googlemail.com>
Date: Tue, 9 May 2023 12:52:09 +0100
Subject: [PATCH 2/4] Implemented autoGrowHeightHiddenInput style

---
 src/components/TextInput/BaseTextInput.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js
index 176f39ac673d..7e5b46bfd93b 100644
--- a/src/components/TextInput/BaseTextInput.js
+++ b/src/components/TextInput/BaseTextInput.js
@@ -379,7 +379,8 @@ class BaseTextInput extends Component {
 
                     // Add +2 to width so that the first digit of amount do not cut off on mWeb - https://github.com/Expensify/App/issues/8158.
                     <Text
-                        style={[...this.props.inputStyle, this.props.autoGrowHeight ? {maxWidth: this.state.width} : {}, styles.hiddenElementOutsideOfWindow, styles.visibilityHidden]}
+                        style={[...this.props.inputStyle, this.props.autoGrowHeight && styles.autoGrowHeightHiddenInput(this.state.width, maxHeight),
+                            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}

From 09238b77ef81c09f62fcabb511b35f566ce43da2 Mon Sep 17 00:00:00 2001
From: Olly <ollywilks@googlemail.com>
Date: Wed, 10 May 2023 10:37:34 +0100
Subject: [PATCH 3/4] Only use maxHeight when it exists

Co-authored-by: Fedi Rajhi <fedirjh@gmail.com>
---
 src/styles/styles.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/styles.js b/src/styles/styles.js
index 71db658d6563..bf0c1a2e33de 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -815,7 +815,7 @@ const styles = {
 
     autoGrowHeightHiddenInput: (maxWidth, maxHeight) => ({
         maxWidth,
-        maxHeight: maxHeight + 1,
+        maxHeight: maxHeight && (maxHeight + 1),
         overflow: 'hidden',
     }),
 

From ec40e8e1ddfeaae5f45cb51becdf9951d0d6cf1b Mon Sep 17 00:00:00 2001
From: Oliver Wilks <ollywilks@googlemail.com>
Date: Wed, 10 May 2023 10:44:11 +0100
Subject: [PATCH 4/4] Run prettier

---
 src/components/TextInput/BaseTextInput.js | 10 +++++++---
 src/styles/styles.js                      |  2 +-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js
index 97a1666ff1ab..1a6eec10fb7d 100644
--- a/src/components/TextInput/BaseTextInput.js
+++ b/src/components/TextInput/BaseTextInput.js
@@ -380,9 +380,13 @@ class BaseTextInput extends Component {
                 {(this.props.autoGrow || this.props.autoGrowHeight) && (
                     // Add +2 to width so that the first digit of amount do not cut off on mWeb - https://github.com/Expensify/App/issues/8158.
                     <Text
-                        style={[...this.props.inputStyle, this.props.autoGrowHeight && styles.autoGrowHeightHiddenInput(this.state.width, maxHeight),
-                            styles.hiddenElementOutsideOfWindow, styles.visibilityHidden]}
-                        onLayout={e => this.setState({textInputWidth: e.nativeEvent.layout.width + 2, textInputHeight: e.nativeEvent.layout.height})}
+                        style={[
+                            ...this.props.inputStyle,
+                            this.props.autoGrowHeight && styles.autoGrowHeightHiddenInput(this.state.width, maxHeight),
+                            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}
                     </Text>
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 7230e35a784a..8deb2a98013a 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -815,7 +815,7 @@ const styles = {
 
     autoGrowHeightHiddenInput: (maxWidth, maxHeight) => ({
         maxWidth,
-        maxHeight: maxHeight && (maxHeight + 1),
+        maxHeight: maxHeight && maxHeight + 1,
         overflow: 'hidden',
     }),