Skip to content

Commit c1495ea

Browse files
seb-zabielskiseb-zabielski
authored
fix(text-input): parent scroll with text input height (#4422)
1 parent f577097 commit c1495ea

File tree

4 files changed

+33
-28
lines changed

4 files changed

+33
-28
lines changed

‎src/components/TextInput/TextInputFlat.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -399,7 +399,7 @@ const TextInputFlat = ({
399399
multiline,
400400
style: [
401401
styles.input,
402-
!multiline || (multiline && height) ? { height: flatHeight } : {},
402+
multiline && height ? { height: flatHeight } : {},
403403
paddingFlat,
404404
{
405405
paddingLeft,
@@ -442,9 +442,11 @@ const styles = StyleSheet.create({
442442
labelContainer: {
443443
paddingTop: 0,
444444
paddingBottom: 0,
445+
flex: 1,
445446
},
446447
input: {
447448
margin: 0,
449+
flex: 1,
448450
},
449451
inputFlat: {
450452
paddingTop: 24,

‎src/components/TextInput/TextInputOutlined.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -265,8 +265,7 @@ const TextInputOutlined = ({
265265
(dense ? MIN_DENSE_HEIGHT_OUTLINED : MIN_HEIGHT)) as number;
266266

267267
const outlinedHeight =
268-
inputHeight + (!height ? (dense ? densePaddingTop / 2 : paddingTop) : 0);
269-
268+
inputHeight + (dense ? densePaddingTop / 2 : paddingTop);
270269
const { leftLayout, rightLayout } = parentState;
271270

272271
const leftAffixTopPosition = calculateOutlinedIconAndAffixTopPosition({
@@ -429,9 +428,11 @@ export default TextInputOutlined;
429428
const styles = StyleSheet.create({
430429
labelContainer: {
431430
paddingBottom: 0,
431+
flex: 1,
432432
},
433433
input: {
434434
margin: 0,
435+
flex: 1,
435436
},
436437
inputOutlined: {
437438
paddingTop: 8,

‎src/components/TextInput/helpers.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ export const adjustPaddingOut = ({
132132
const refFontHeight = scale * fontSize;
133133
let result = pad;
134134

135-
if (height && !multiline) {
135+
if (!isAndroid && height && !multiline) {
136136
return {
137137
paddingTop: Math.max(0, (height - fontHeight) / 2),
138138
paddingBottom: Math.max(0, (height - fontHeight) / 2),

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

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ exports[`call onPress when affix adornment pressed 1`] = `
3838
style={
3939
[
4040
{
41+
"flex": 1,
4142
"paddingBottom": 0,
4243
"paddingTop": 0,
4344
},
@@ -186,11 +187,10 @@ exports[`call onPress when affix adornment pressed 1`] = `
186187
style={
187188
[
188189
{
190+
"flex": 1,
189191
"margin": 0,
190192
},
191-
{
192-
"height": 56,
193-
},
193+
{},
194194
{
195195
"paddingBottom": 4,
196196
"paddingTop": 24,
@@ -337,6 +337,7 @@ exports[`correctly applies a component as the text label 1`] = `
337337
style={
338338
[
339339
{
340+
"flex": 1,
340341
"paddingBottom": 0,
341342
"paddingTop": 0,
342343
},
@@ -502,11 +503,10 @@ exports[`correctly applies a component as the text label 1`] = `
502503
style={
503504
[
504505
{
506+
"flex": 1,
505507
"margin": 0,
506508
},
507-
{
508-
"height": 56,
509-
},
509+
{},
510510
{
511511
"paddingBottom": 4,
512512
"paddingTop": 24,
@@ -577,6 +577,7 @@ exports[`correctly applies cursorColor prop 1`] = `
577577
style={
578578
[
579579
{
580+
"flex": 1,
580581
"paddingBottom": 0,
581582
"paddingTop": 0,
582583
},
@@ -726,11 +727,10 @@ exports[`correctly applies cursorColor prop 1`] = `
726727
style={
727728
[
728729
{
730+
"flex": 1,
729731
"margin": 0,
730732
},
731-
{
732-
"height": 56,
733-
},
733+
{},
734734
{
735735
"paddingBottom": 4,
736736
"paddingTop": 24,
@@ -801,6 +801,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = `
801801
style={
802802
[
803803
{
804+
"flex": 1,
804805
"paddingBottom": 0,
805806
"paddingTop": 0,
806807
},
@@ -950,11 +951,10 @@ exports[`correctly applies default textAlign based on default RTL 1`] = `
950951
style={
951952
[
952953
{
954+
"flex": 1,
953955
"margin": 0,
954956
},
955-
{
956-
"height": 56,
957-
},
957+
{},
958958
{
959959
"paddingBottom": 4,
960960
"paddingTop": 24,
@@ -1018,6 +1018,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
10181018
style={
10191019
[
10201020
{
1021+
"flex": 1,
10211022
"paddingBottom": 0,
10221023
},
10231024
{
@@ -1207,6 +1208,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
12071208
style={
12081209
[
12091210
{
1211+
"flex": 1,
12101212
"margin": 0,
12111213
},
12121214
{
@@ -1281,6 +1283,7 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = `
12811283
style={
12821284
[
12831285
{
1286+
"flex": 1,
12841287
"paddingBottom": 0,
12851288
"paddingTop": 0,
12861289
},
@@ -1430,11 +1433,10 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = `
14301433
style={
14311434
[
14321435
{
1436+
"flex": 1,
14331437
"margin": 0,
14341438
},
1435-
{
1436-
"height": 56,
1437-
},
1439+
{},
14381440
{
14391441
"paddingBottom": 4,
14401442
"paddingTop": 24,
@@ -1507,6 +1509,7 @@ exports[`correctly applies textAlign center 1`] = `
15071509
style={
15081510
[
15091511
{
1512+
"flex": 1,
15101513
"paddingBottom": 0,
15111514
"paddingTop": 0,
15121515
},
@@ -1656,11 +1659,10 @@ exports[`correctly applies textAlign center 1`] = `
16561659
style={
16571660
[
16581661
{
1662+
"flex": 1,
16591663
"margin": 0,
16601664
},
1661-
{
1662-
"height": 56,
1663-
},
1665+
{},
16641666
{
16651667
"paddingBottom": 4,
16661668
"paddingTop": 24,
@@ -1731,6 +1733,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm
17311733
style={
17321734
[
17331735
{
1736+
"flex": 1,
17341737
"paddingBottom": 0,
17351738
"paddingTop": 0,
17361739
},
@@ -1880,11 +1883,10 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm
18801883
style={
18811884
[
18821885
{
1886+
"flex": 1,
18831887
"margin": 0,
18841888
},
1885-
{
1886-
"height": 56,
1887-
},
1889+
{},
18881890
{
18891891
"paddingBottom": 4,
18901892
"paddingTop": 24,
@@ -2157,6 +2159,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
21572159
style={
21582160
[
21592161
{
2162+
"flex": 1,
21602163
"paddingBottom": 0,
21612164
"paddingTop": 0,
21622165
},
@@ -2306,11 +2309,10 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
23062309
style={
23072310
[
23082311
{
2312+
"flex": 1,
23092313
"margin": 0,
23102314
},
2311-
{
2312-
"height": 56,
2313-
},
2315+
{},
23142316
{
23152317
"paddingBottom": 4,
23162318
"paddingTop": 24,

0 commit comments

Comments
 (0)