diff --git a/src/components/TextInput/TextInputFlat.tsx b/src/components/TextInput/TextInputFlat.tsx index 31ae029777..affe5bb5dc 100644 --- a/src/components/TextInput/TextInputFlat.tsx +++ b/src/components/TextInput/TextInputFlat.tsx @@ -399,7 +399,7 @@ const TextInputFlat = ({ multiline, style: [ styles.input, - !multiline || (multiline && height) ? { height: flatHeight } : {}, + multiline && height ? { height: flatHeight } : {}, paddingFlat, { paddingLeft, @@ -442,9 +442,11 @@ const styles = StyleSheet.create({ labelContainer: { paddingTop: 0, paddingBottom: 0, + flex: 1, }, input: { margin: 0, + flex: 1, }, inputFlat: { paddingTop: 24, diff --git a/src/components/TextInput/TextInputOutlined.tsx b/src/components/TextInput/TextInputOutlined.tsx index 2f5b2af6bd..a250c439cf 100644 --- a/src/components/TextInput/TextInputOutlined.tsx +++ b/src/components/TextInput/TextInputOutlined.tsx @@ -265,8 +265,7 @@ const TextInputOutlined = ({ (dense ? MIN_DENSE_HEIGHT_OUTLINED : MIN_HEIGHT)) as number; const outlinedHeight = - inputHeight + (!height ? (dense ? densePaddingTop / 2 : paddingTop) : 0); - + inputHeight + (dense ? densePaddingTop / 2 : paddingTop); const { leftLayout, rightLayout } = parentState; const leftAffixTopPosition = calculateOutlinedIconAndAffixTopPosition({ @@ -429,9 +428,11 @@ export default TextInputOutlined; const styles = StyleSheet.create({ labelContainer: { paddingBottom: 0, + flex: 1, }, input: { margin: 0, + flex: 1, }, inputOutlined: { paddingTop: 8, diff --git a/src/components/TextInput/helpers.tsx b/src/components/TextInput/helpers.tsx index 9c3637a2e4..4a5da1d24a 100644 --- a/src/components/TextInput/helpers.tsx +++ b/src/components/TextInput/helpers.tsx @@ -132,7 +132,7 @@ export const adjustPaddingOut = ({ const refFontHeight = scale * fontSize; let result = pad; - if (height && !multiline) { + if (!isAndroid && height && !multiline) { return { paddingTop: Math.max(0, (height - fontHeight) / 2), paddingBottom: Math.max(0, (height - fontHeight) / 2), diff --git a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap index a91767a534..f9135eda70 100644 --- a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -38,6 +38,7 @@ exports[`call onPress when affix adornment pressed 1`] = ` style={ [ { + "flex": 1, "paddingBottom": 0, "paddingTop": 0, }, @@ -186,11 +187,10 @@ exports[`call onPress when affix adornment pressed 1`] = ` style={ [ { + "flex": 1, "margin": 0, }, - { - "height": 56, - }, + {}, { "paddingBottom": 4, "paddingTop": 24, @@ -337,6 +337,7 @@ exports[`correctly applies a component as the text label 1`] = ` style={ [ { + "flex": 1, "paddingBottom": 0, "paddingTop": 0, }, @@ -502,11 +503,10 @@ exports[`correctly applies a component as the text label 1`] = ` style={ [ { + "flex": 1, "margin": 0, }, - { - "height": 56, - }, + {}, { "paddingBottom": 4, "paddingTop": 24, @@ -577,6 +577,7 @@ exports[`correctly applies cursorColor prop 1`] = ` style={ [ { + "flex": 1, "paddingBottom": 0, "paddingTop": 0, }, @@ -726,11 +727,10 @@ exports[`correctly applies cursorColor prop 1`] = ` style={ [ { + "flex": 1, "margin": 0, }, - { - "height": 56, - }, + {}, { "paddingBottom": 4, "paddingTop": 24, @@ -801,6 +801,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = ` style={ [ { + "flex": 1, "paddingBottom": 0, "paddingTop": 0, }, @@ -950,11 +951,10 @@ exports[`correctly applies default textAlign based on default RTL 1`] = ` style={ [ { + "flex": 1, "margin": 0, }, - { - "height": 56, - }, + {}, { "paddingBottom": 4, "paddingTop": 24, @@ -1018,6 +1018,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = ` style={ [ { + "flex": 1, "paddingBottom": 0, }, { @@ -1207,6 +1208,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = ` style={ [ { + "flex": 1, "margin": 0, }, { @@ -1281,6 +1283,7 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = ` style={ [ { + "flex": 1, "paddingBottom": 0, "paddingTop": 0, }, @@ -1430,11 +1433,10 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = ` style={ [ { + "flex": 1, "margin": 0, }, - { - "height": 56, - }, + {}, { "paddingBottom": 4, "paddingTop": 24, @@ -1507,6 +1509,7 @@ exports[`correctly applies textAlign center 1`] = ` style={ [ { + "flex": 1, "paddingBottom": 0, "paddingTop": 0, }, @@ -1656,11 +1659,10 @@ exports[`correctly applies textAlign center 1`] = ` style={ [ { + "flex": 1, "margin": 0, }, - { - "height": 56, - }, + {}, { "paddingBottom": 4, "paddingTop": 24, @@ -1731,6 +1733,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm style={ [ { + "flex": 1, "paddingBottom": 0, "paddingTop": 0, }, @@ -1880,11 +1883,10 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm style={ [ { + "flex": 1, "margin": 0, }, - { - "height": 56, - }, + {}, { "paddingBottom": 4, "paddingTop": 24, @@ -2157,6 +2159,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm style={ [ { + "flex": 1, "paddingBottom": 0, "paddingTop": 0, }, @@ -2306,11 +2309,10 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm style={ [ { + "flex": 1, "margin": 0, }, - { - "height": 56, - }, + {}, { "paddingBottom": 4, "paddingTop": 24,