From 987197a1d10a50df42ded2d8bdb1f0f789da6f02 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Fri, 10 Mar 2023 04:02:18 +0500 Subject: [PATCH 1/3] fix: removed line height from all inputs --- src/components/TextInput/BaseTextInput.js | 4 +--- src/styles/styles.js | 3 ++- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js index 74f7700ec7a6..7e2bc701706a 100644 --- a/src/components/TextInput/BaseTextInput.js +++ b/src/components/TextInput/BaseTextInput.js @@ -294,9 +294,7 @@ class BaseTextInput extends Component { this.props.prefixCharacter && StyleUtils.getPaddingLeft(this.state.prefixWidth + styles.pl1.paddingLeft), this.props.secureTextEntry && styles.secureInput, - // Explicitly remove `lineHeight` from single line inputs so that long text doesn't disappear - // once it exceeds the input space (See https://github.com/Expensify/App/issues/13802) - !this.props.multiline && {height: this.state.height, lineHeight: undefined}, + !this.props.multiline && {height: this.state.height}, ]} multiline={this.props.multiline} maxLength={this.props.maxLength} diff --git a/src/styles/styles.js b/src/styles/styles.js index fe71c5274eff..a241722cd14c 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -767,9 +767,10 @@ const styles = { }), baseTextInput: { + // Adding lineheight should be avoided here + // as per https://github.com/Expensify/App/issues/14799 fontFamily: fontFamily.EXP_NEUE, fontSize: variables.fontSizeNormal, - lineHeight: variables.lineHeightXLarge, color: themeColors.text, paddingTop: 23, paddingBottom: 8, From fab71d511189edb66078ad6c43df2a006e404778 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Fri, 10 Mar 2023 14:00:51 +0500 Subject: [PATCH 2/3] fix: removed composer height --- src/components/TextInput/BaseTextInput.js | 1 - src/styles/styles.js | 4 +++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js index 7e2bc701706a..270376f8b366 100644 --- a/src/components/TextInput/BaseTextInput.js +++ b/src/components/TextInput/BaseTextInput.js @@ -293,7 +293,6 @@ class BaseTextInput extends Component { (!hasLabel || this.props.multiline) && styles.pv0, this.props.prefixCharacter && StyleUtils.getPaddingLeft(this.state.prefixWidth + styles.pl1.paddingLeft), this.props.secureTextEntry && styles.secureInput, - !this.props.multiline && {height: this.state.height}, ]} multiline={this.props.multiline} diff --git a/src/styles/styles.js b/src/styles/styles.js index a241722cd14c..ffc2f502dc0e 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1401,6 +1401,9 @@ const styles = { // Be extremely careful when editing the compose styles, as it is easy to introduce regressions. // Make sure you run the following tests against any changes: #12669 + // Adding lineheight should be avoided here + // as per https://github.com/Expensify/App/issues/14799 + textInputCompose: addOutlineWidth({ backgroundColor: themeColors.componentBG, borderColor: themeColors.border, @@ -1409,7 +1412,6 @@ const styles = { fontSize: variables.fontSizeNormal, borderWidth: 0, height: 'auto', - lineHeight: variables.lineHeightXLarge, ...overflowXHidden, // On Android, multiline TextInput with height: 'auto' will show extra padding unless they are configured with From 78c6732c2dc4a24ea3c03ece059b637d8a699fba Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Fri, 10 Mar 2023 17:08:39 +0500 Subject: [PATCH 3/3] fix: updated comment for removing line height from text input --- src/styles/styles.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/styles/styles.js b/src/styles/styles.js index ffc2f502dc0e..6829252315df 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -767,8 +767,10 @@ const styles = { }), baseTextInput: { - // Adding lineheight should be avoided here - // as per https://github.com/Expensify/App/issues/14799 + // Explicitly remove `lineHeight` from single line inputs so that long text doesn't disappear + // once it exceeds the input space (See https://github.com/Expensify/App/issues/13802) + // Adding lineheight for multiline input should be avoided here because of flickering issue + // on android as per https://github.com/Expensify/App/issues/14799 fontFamily: fontFamily.EXP_NEUE, fontSize: variables.fontSizeNormal, color: themeColors.text,