Skip to content

Commit

Permalink
fix(text-input): parent scroll with text input height (#4422)
Browse files Browse the repository at this point in the history
  • Loading branch information
@seb-zabielski
seb-zabielski authored Jul 27, 2024
1 parent f577097 commit c1495ea
Show file tree
Hide file tree
Showing 4 changed files with 33 additions and 28 deletions.
4 changes: 3 additions & 1 deletion src/components/TextInput/TextInputFlat.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -399,7 +399,7 @@ const TextInputFlat = ({
multiline,
style: [
styles.input,
!multiline || (multiline && height) ? { height: flatHeight } : {},
multiline && height ? { height: flatHeight } : {},
paddingFlat,
{
paddingLeft,
Expand Down Expand Up @@ -442,9 +442,11 @@ const styles = StyleSheet.create({
labelContainer: {
paddingTop: 0,
paddingBottom: 0,
flex: 1,
},
input: {
margin: 0,
flex: 1,
},
inputFlat: {
paddingTop: 24,
Expand Down
5 changes: 3 additions & 2 deletions src/components/TextInput/TextInputOutlined.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -429,9 +428,11 @@ export default TextInputOutlined;
const styles = StyleSheet.create({
labelContainer: {
paddingBottom: 0,
flex: 1,
},
input: {
margin: 0,
flex: 1,
},
inputOutlined: {
paddingTop: 8,
Expand Down
2 changes: 1 addition & 1 deletion src/components/TextInput/helpers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down
50 changes: 26 additions & 24 deletions src/components/__tests__/__snapshots__/TextInput.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ exports[`call onPress when affix adornment pressed 1`] = `
style={
[
{
"flex": 1,
"paddingBottom": 0,
"paddingTop": 0,
},
Expand Down Expand Up @@ -186,11 +187,10 @@ exports[`call onPress when affix adornment pressed 1`] = `
style={
[
{
"flex": 1,
"margin": 0,
},
{
"height": 56,
},
{},
{
"paddingBottom": 4,
"paddingTop": 24,
Expand Down Expand Up @@ -337,6 +337,7 @@ exports[`correctly applies a component as the text label 1`] = `
style={
[
{
"flex": 1,
"paddingBottom": 0,
"paddingTop": 0,
},
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -577,6 +577,7 @@ exports[`correctly applies cursorColor prop 1`] = `
style={
[
{
"flex": 1,
"paddingBottom": 0,
"paddingTop": 0,
},
Expand Down Expand Up @@ -726,11 +727,10 @@ exports[`correctly applies cursorColor prop 1`] = `
style={
[
{
"flex": 1,
"margin": 0,
},
{
"height": 56,
},
{},
{
"paddingBottom": 4,
"paddingTop": 24,
Expand Down Expand Up @@ -801,6 +801,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = `
style={
[
{
"flex": 1,
"paddingBottom": 0,
"paddingTop": 0,
},
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -1018,6 +1018,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
style={
[
{
"flex": 1,
"paddingBottom": 0,
},
{
Expand Down Expand Up @@ -1207,6 +1208,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
style={
[
{
"flex": 1,
"margin": 0,
},
{
Expand Down Expand Up @@ -1281,6 +1283,7 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = `
style={
[
{
"flex": 1,
"paddingBottom": 0,
"paddingTop": 0,
},
Expand Down Expand Up @@ -1430,11 +1433,10 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = `
style={
[
{
"flex": 1,
"margin": 0,
},
{
"height": 56,
},
{},
{
"paddingBottom": 4,
"paddingTop": 24,
Expand Down Expand Up @@ -1507,6 +1509,7 @@ exports[`correctly applies textAlign center 1`] = `
style={
[
{
"flex": 1,
"paddingBottom": 0,
"paddingTop": 0,
},
Expand Down Expand Up @@ -1656,11 +1659,10 @@ exports[`correctly applies textAlign center 1`] = `
style={
[
{
"flex": 1,
"margin": 0,
},
{
"height": 56,
},
{},
{
"paddingBottom": 4,
"paddingTop": 24,
Expand Down Expand Up @@ -1731,6 +1733,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm
style={
[
{
"flex": 1,
"paddingBottom": 0,
"paddingTop": 0,
},
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -2157,6 +2159,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
style={
[
{
"flex": 1,
"paddingBottom": 0,
"paddingTop": 0,
},
Expand Down Expand Up @@ -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,
Expand Down

0 comments on commit c1495ea

Please sign in to comment.