From 30dda155687bd26c298724e41d04e103972bf53e Mon Sep 17 00:00:00 2001 From: miroslav Date: Fri, 13 Jan 2023 10:38:20 +0100 Subject: [PATCH 1/3] fix long text cut in iOS single line input --- src/components/RNTextInput.js | 5 ----- src/components/TextInput/BaseTextInput.js | 2 +- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/src/components/RNTextInput.js b/src/components/RNTextInput.js index ab924357e68b..b3cf44c84212 100644 --- a/src/components/RNTextInput.js +++ b/src/components/RNTextInput.js @@ -22,11 +22,6 @@ const RNTextInput = props => ( } props.forwardedRef(ref); }} - - // By default, align input to the left to override right alignment in RTL mode which is not yet supported in the App. - // eslint-disable-next-line react/jsx-props-no-multi-spaces - textAlign="left" - // eslint-disable-next-line {...props} /> diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js index 824d32c76596..ffc82148d6fd 100644 --- a/src/components/TextInput/BaseTextInput.js +++ b/src/components/TextInput/BaseTextInput.js @@ -285,7 +285,7 @@ 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}, + !this.props.multiline && {height: this.state.height, lineHeight: null}, ]} multiline={this.props.multiline} maxLength={this.props.maxLength} From 116f975d6db3c0e227dec5e6ec828d868393c4e5 Mon Sep 17 00:00:00 2001 From: Miroslav Stevanovic <97473779+0xmiroslav@users.noreply.github.com> Date: Fri, 13 Jan 2023 09:09:37 -0600 Subject: [PATCH 2/3] update lineHeight value to undefined Co-authored-by: Luthfi --- src/components/TextInput/BaseTextInput.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js index ffc82148d6fd..02b1af063ae4 100644 --- a/src/components/TextInput/BaseTextInput.js +++ b/src/components/TextInput/BaseTextInput.js @@ -285,7 +285,7 @@ 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, lineHeight: null}, + !this.props.multiline && {height: this.state.height, lineHeight: undefined}, ]} multiline={this.props.multiline} maxLength={this.props.maxLength} From 60901507fdd6405b687a7eca2510e8ab0eee995c Mon Sep 17 00:00:00 2001 From: miroslav Date: Fri, 13 Jan 2023 22:16:52 +0100 Subject: [PATCH 3/3] add comment for removing lineHeight --- src/components/TextInput/BaseTextInput.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js index 02b1af063ae4..1788476ed9c9 100644 --- a/src/components/TextInput/BaseTextInput.js +++ b/src/components/TextInput/BaseTextInput.js @@ -285,6 +285,9 @@ 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, + + // 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}, ]} multiline={this.props.multiline}