diff --git a/src/components/TextInput/TextInput.tsx b/src/components/TextInput/TextInput.tsx index 7c289d9152..93aa0daab0 100644 --- a/src/components/TextInput/TextInput.tsx +++ b/src/components/TextInput/TextInput.tsx @@ -482,6 +482,21 @@ const TextInput = forwardRef( 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 ( ( 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( onLeftAffixLayoutChange={onLeftAffixLayoutChange} onRightAffixLayoutChange={onRightAffixLayoutChange} maxFontSizeMultiplier={maxFontSizeMultiplier} - contentStyle={contentStyle} + contentStyle={[ + contentStyle, + autoHeight ? { minHeight: autoHeight } : undefined, + ].filter(Boolean)} scaledLabel={scaledLabel} /> ); diff --git a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap index dd6fce81c3..c2c3452ab8 100644 --- a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/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"