use lodashClamp for calc textInput height

Expensify · Jul 19, 2023 · 6c3ad47 · 6c3ad47
1 parent 57ff809
commit 6c3ad47
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 11 deletions.
diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js
@@ -249,7 +249,11 @@ function BaseTextInput(props) {
                     onPress={onPress}
                     focusable={false}
                     accessibilityLabel={props.label}
-                    style={[props.autoGrowHeight && styles.autoGrowHeightInputContainer(textInputHeight, maxHeight), !isMultiline && styles.componentHeightLarge, ...props.containerStyles]}
+                    style={[
+                        props.autoGrowHeight && styles.autoGrowHeightInputContainer(textInputHeight, variables.componentSizeLarge, maxHeight),
+                        !isMultiline && styles.componentHeightLarge,
+                        ...props.containerStyles,
+                    ]}
                 >
                     <View
                         // When autoGrowHeight is true we calculate the width for the textInput, so it will break lines properly

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -1,4 +1,5 @@
 import {defaultStyles as defaultPickerStyles} from 'react-native-picker-select/src/styles';
+import lodashClamp from 'lodash/clamp';
 import fontFamily from './fontFamily';
 import addOutlineWidth from './addOutlineWidth';
 import themeColors from './themes/default';
@@ -855,16 +856,16 @@ const styles = {
         backgroundColor: themeColors.buttonDefaultBG,
     },
 
-    autoGrowHeightInputContainer: (textInputHeight, maxHeight) => {
-        const minHeight = variables.componentSizeLarge;
-        let height = textInputHeight;
-        if (height >= maxHeight) {
-            height = maxHeight;
-        } else if (height <= minHeight) {
-            height = minHeight;
-        }
-        return {height, minHeight};
-    },
+    /**
+     * @param {number} textInputHeight
+     * @param {number} minHeight
+     * @param {number} maxHeight
+     * @returns {object}
+     */
+    autoGrowHeightInputContainer: (textInputHeight, minHeight, maxHeight) => ({
+        height: lodashClamp(textInputHeight, minHeight, maxHeight),
+        minHeight,
+    }),
 
     autoGrowHeightHiddenInput: (maxWidth, maxHeight) => ({
         maxWidth,