fix: textinput multiline with numberoflines issue

Author: harshaldhawale

src/components/TextInput/TextInput.tsx

@@ -482,6 +482,21 @@ const TextInput = forwardRef<TextInputHandles, Props>(
 
     const scaledLabel = !!(value || focused);
 
+    const defaultLineHeight = 24;
+
+    const lineHeight =
+      // MD3 fonts use `bodyLarge`
+      (theme.fonts as any)?.bodyLarge?.lineHeight ??
+      // MD2 fonts use `regular` (no lineHeight, so rely on size * 1.3)
+      ((theme.fonts as any)?.regular?.lineHeight ||
+        (theme.fonts as any)?.regular?.fontSize * 1.3) ??
+      defaultLineHeight;
+
+    const autoHeight =
+      multiline && rest.numberOfLines
+        ? rest.numberOfLines * lineHeight + 8 // + padding
+        : undefined;
+
     if (mode === 'outlined') {
       return (
         <TextInputOutlined
@@ -519,7 +534,10 @@ const TextInput = forwardRef<TextInputHandles, Props>(
           onLeftAffixLayoutChange={onLeftAffixLayoutChange}
           onRightAffixLayoutChange={onRightAffixLayoutChange}
           maxFontSizeMultiplier={maxFontSizeMultiplier}
-          contentStyle={contentStyle}
+          contentStyle={[
+            contentStyle,
+            autoHeight ? { minHeight: autoHeight } : undefined,
+          ].filter(Boolean)}
           scaledLabel={scaledLabel}
         />
       );
@@ -561,7 +579,10 @@ const TextInput = forwardRef<TextInputHandles, Props>(
         onLeftAffixLayoutChange={onLeftAffixLayoutChange}
         onRightAffixLayoutChange={onRightAffixLayoutChange}
         maxFontSizeMultiplier={maxFontSizeMultiplier}
-        contentStyle={contentStyle}
+        contentStyle={[
+          contentStyle,
+          autoHeight ? { minHeight: autoHeight } : undefined,
+        ].filter(Boolean)}
         scaledLabel={scaledLabel}
       />
     );

src/components/__tests__/__snapshots__/TextInput.test.tsx.snap

@@ -224,7 +224,7 @@ exports[`call onPress when affix adornment pressed 1`] = `
             "marginLeft": 0,
             "paddingLeft": 40,
           },
-          undefined,
+          [],
         ]
       }
       testID="text-input-flat"
@@ -545,7 +545,7 @@ exports[`correctly applies a component as the text label 1`] = `
           [
             {},
           ],
-          undefined,
+          [],
         ]
       }
       testID="text-input-flat"
@@ -779,7 +779,7 @@ exports[`correctly applies cursorColor prop 1`] = `
           [
             {},
           ],
-          undefined,
+          [],
         ]
       }
       testID="text-input-flat"
@@ -1013,7 +1013,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = `
           [
             {},
           ],
-          undefined,
+          [],
         ]
       }
       testID="text-input-flat"
@@ -1272,7 +1272,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
           [
             {},
           ],
-          undefined,
+          [],
         ]
       }
       testID="text-input-outlined"
@@ -1506,9 +1506,11 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = `
           [
             {},
           ],
-          {
-            "paddingLeft": 20,
-          },
+          [
+            {
+              "paddingLeft": 20,
+            },
+          ],
         ]
       }
       testID="text-input-flat"
@@ -1742,7 +1744,7 @@ exports[`correctly applies textAlign center 1`] = `
           [
             {},
           ],
-          undefined,
+          [],
         ]
       }
       testID="text-input-flat"
@@ -1979,7 +1981,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm
             "paddingLeft": 40,
             "paddingRight": 16,
           },
-          undefined,
+          [],
         ]
       }
       testID="text-input-flat"
@@ -2406,7 +2408,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
             "paddingLeft": 16,
             "paddingRight": 40,
           },
-          undefined,
+          [],
         ]
       }
       testID="text-input-flat"