From e052a02f65675d2a98e1632aa923fa44802194f9 Mon Sep 17 00:00:00 2001 From: Dustin Stringer Date: Fri, 15 Sep 2023 10:34:55 -0400 Subject: [PATCH 1/5] Fix: portion of text shown when changing IOU value --- src/components/TextInput/BaseTextInput.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js index 9d122fb7ccf1..7487efe4c3eb 100644 --- a/src/components/TextInput/BaseTextInput.js +++ b/src/components/TextInput/BaseTextInput.js @@ -398,11 +398,10 @@ function BaseTextInput(props) { This Text component is intentionally positioned out of the screen. */} {(props.autoGrow || props.autoGrowHeight) && ( - // Add +2 to width so that the first digit of amount do not cut off on mWeb - https://github.com/Expensify/App/issues/8158. { - setTextInputWidth(e.nativeEvent.layout.width + 2); + setTextInputWidth(e.nativeEvent.layout.width); setTextInputHeight(e.nativeEvent.layout.height); }} > From f5eb8354061e49631d21d2f5266f65ae44cb7507 Mon Sep 17 00:00:00 2001 From: Dustin Stringer Date: Tue, 19 Sep 2023 00:35:39 -0400 Subject: [PATCH 2/5] Fixed rendering of BaseTextInput using autoGrow --- src/components/TextInput/BaseTextInput.js | 5 ++++- src/styles/styles.js | 3 +++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js index 0fd2ad935f4c..cce8bda03591 100644 --- a/src/components/TextInput/BaseTextInput.js +++ b/src/components/TextInput/BaseTextInput.js @@ -399,10 +399,13 @@ function BaseTextInput(props) { This Text component is intentionally positioned out of the screen. */} {(props.autoGrow || props.autoGrowHeight) && ( + // Add +32 to width so that text is not cut off due to the cursor or when changing the value + // https://github.com/Expensify/App/issues/8158 + // https://github.com/Expensify/App/issues/26628 { - setTextInputWidth(e.nativeEvent.layout.width); + setTextInputWidth(e.nativeEvent.layout.width + 32); setTextInputHeight(e.nativeEvent.layout.height); }} > diff --git a/src/styles/styles.js b/src/styles/styles.js index 8ff1731945b2..46240542cede 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2680,6 +2680,9 @@ const styles = (theme) => ({ fontSize: variables.iouAmountTextSize, color: theme.heading, lineHeight: variables.inputHeight, + // This margin counteracts the additional size given to the autoGrow text in BaseTextInput.js + // It fixes issue https://github.com/Expensify/App/issues/26628 + marginLeft: 32 }, iouAmountTextInput: addOutlineWidth( From 665740f0f828a3c319103d8ac8bcd4032a551c63 Mon Sep 17 00:00:00 2001 From: Dustin Stringer Date: Wed, 20 Sep 2023 23:10:34 -0400 Subject: [PATCH 3/5] Removed 32 pixel margin on iouAmountText --- src/styles/styles.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/styles/styles.js b/src/styles/styles.js index 46240542cede..8ff1731945b2 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2680,9 +2680,6 @@ const styles = (theme) => ({ fontSize: variables.iouAmountTextSize, color: theme.heading, lineHeight: variables.inputHeight, - // This margin counteracts the additional size given to the autoGrow text in BaseTextInput.js - // It fixes issue https://github.com/Expensify/App/issues/26628 - marginLeft: 32 }, iouAmountTextInput: addOutlineWidth( From f8550327c3ed20c47a68f8dccc3f1429b0cac665 Mon Sep 17 00:00:00 2001 From: Dustin Stringer Date: Wed, 20 Sep 2023 23:11:15 -0400 Subject: [PATCH 4/5] Added additional autoGrow width for Safari browser --- src/components/TextInput/BaseTextInput.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js index cce8bda03591..3fae15a99ee1 100644 --- a/src/components/TextInput/BaseTextInput.js +++ b/src/components/TextInput/BaseTextInput.js @@ -21,6 +21,7 @@ import isInputAutoFilled from '../../libs/isInputAutoFilled'; import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback'; import withLocalize from '../withLocalize'; import useNativeDriver from '../../libs/useNativeDriver'; +import * as Browser from '../../libs/Browser'; function BaseTextInput(props) { const inputValue = props.value || props.defaultValue || ''; @@ -399,13 +400,17 @@ function BaseTextInput(props) { This Text component is intentionally positioned out of the screen. */} {(props.autoGrow || props.autoGrowHeight) && ( - // Add +32 to width so that text is not cut off due to the cursor or when changing the value + // Add +2 to width on Safari browsers so that text is not cut off due to the cursor or when changing the value // https://github.com/Expensify/App/issues/8158 // https://github.com/Expensify/App/issues/26628 { - setTextInputWidth(e.nativeEvent.layout.width + 32); + let additionalWidth = 0 + if (Browser.isMobileSafari() || Browser.isSafari()) { + additionalWidth = 2; + } + setTextInputWidth(e.nativeEvent.layout.width + additionalWidth); setTextInputHeight(e.nativeEvent.layout.height); }} > From ccc817564a0f52524c7cc2530afc85bbee1504ea Mon Sep 17 00:00:00 2001 From: Dustin Stringer Date: Fri, 22 Sep 2023 09:26:42 -0400 Subject: [PATCH 5/5] Fixed file linting --- 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 3fae15a99ee1..efe7266a3f30 100644 --- a/src/components/TextInput/BaseTextInput.js +++ b/src/components/TextInput/BaseTextInput.js @@ -406,7 +406,7 @@ function BaseTextInput(props) { { - let additionalWidth = 0 + let additionalWidth = 0; if (Browser.isMobileSafari() || Browser.isSafari()) { additionalWidth = 2; }