From 2eb73a369a8450552a1b71565818abe7dc72756c Mon Sep 17 00:00:00 2001 From: QichenZhu <57348009+QichenZhu@users.noreply.github.com> Date: Sun, 8 Dec 2024 01:07:38 +1300 Subject: [PATCH 1/7] Fix IOU amount input flicking --- src/components/MoneyRequestAmountInput.tsx | 2 ++ src/components/TextInput/BaseTextInput/index.native.tsx | 4 +++- src/components/TextInput/BaseTextInput/types.ts | 5 +++++ src/components/TextInputWithCurrencySymbol/types.ts | 2 +- 4 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/components/MoneyRequestAmountInput.tsx b/src/components/MoneyRequestAmountInput.tsx index 9ef33900bb00..ac44568bbe42 100644 --- a/src/components/MoneyRequestAmountInput.tsx +++ b/src/components/MoneyRequestAmountInput.tsx @@ -8,6 +8,7 @@ import * as CurrencyUtils from '@libs/CurrencyUtils'; import getOperatingSystem from '@libs/getOperatingSystem'; import * as MoneyRequestUtils from '@libs/MoneyRequestUtils'; import shouldIgnoreSelectionWhenUpdatedManually from '@libs/shouldIgnoreSelectionWhenUpdatedManually'; +import variables from '@styles/variables'; import CONST from '@src/CONST'; import isTextInputFocused from './TextInput/BaseTextInput/isTextInputFocused'; import type {BaseTextInputRef} from './TextInput/BaseTextInput/types'; @@ -289,6 +290,7 @@ function MoneyRequestAmountInput( return ( = StyleSheet.flatten([ styles.textInputContainer, textInputContainerStyles, - (autoGrow || !!contentWidth) && StyleUtils.getWidthStyle(textInputWidth), + autoGrow && [StyleUtils.getWidthStyle(textInputWidth + autoGrowExtraSpace), {marginRight: -autoGrowExtraSpace}], + !!contentWidth && StyleUtils.getWidthStyle(textInputWidth), !hideFocusedState && isFocused && styles.borderColorFocus, (!!hasError || !!errorText) && styles.borderColorDanger, autoGrowHeight && {scrollPaddingTop: typeof maxAutoGrowHeight === 'number' ? 2 * maxAutoGrowHeight : undefined}, diff --git a/src/components/TextInput/BaseTextInput/types.ts b/src/components/TextInput/BaseTextInput/types.ts index c9844e33d594..6fe2a7db49ce 100644 --- a/src/components/TextInput/BaseTextInput/types.ts +++ b/src/components/TextInput/BaseTextInput/types.ts @@ -54,6 +54,11 @@ type CustomBaseTextInputProps = { */ autoGrow?: boolean; + /** + * If autoGrow is enabled, this reserves extra space for incoming characters to prevent flickering on native platforms. + */ + autoGrowExtraSpace?: number; + /** * Autogrow input container height based on the entered text */ diff --git a/src/components/TextInputWithCurrencySymbol/types.ts b/src/components/TextInputWithCurrencySymbol/types.ts index 401af75b16cd..3988654584d0 100644 --- a/src/components/TextInputWithCurrencySymbol/types.ts +++ b/src/components/TextInputWithCurrencySymbol/types.ts @@ -77,7 +77,7 @@ type BaseTextInputWithCurrencySymbolProps = { /** Hide the focus styles on TextInput */ hideFocusedState?: boolean; -} & Pick; +} & Pick; type TextInputWithCurrencySymbolProps = Omit & { onSelectionChange?: (start: number, end: number) => void; From 3ffff5dfacc5df63b381f6f965ffec4d46408a5c Mon Sep 17 00:00:00 2001 From: QichenZhu <57348009+QichenZhu@users.noreply.github.com> Date: Sun, 8 Dec 2024 02:03:08 +1300 Subject: [PATCH 2/7] Use StyleUtils --- src/components/TextInput/BaseTextInput/index.native.tsx | 2 +- src/styles/utils/index.ts | 7 +++++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/TextInput/BaseTextInput/index.native.tsx b/src/components/TextInput/BaseTextInput/index.native.tsx index a5818493f687..6617a2d8d5fa 100644 --- a/src/components/TextInput/BaseTextInput/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/index.native.tsx @@ -259,8 +259,8 @@ function BaseTextInput( const newTextInputContainerStyles: StyleProp = StyleSheet.flatten([ styles.textInputContainer, textInputContainerStyles, - autoGrow && [StyleUtils.getWidthStyle(textInputWidth + autoGrowExtraSpace), {marginRight: -autoGrowExtraSpace}], !!contentWidth && StyleUtils.getWidthStyle(textInputWidth), + autoGrow && StyleUtils.getAutoGrowWidthInputContainerStyles(textInputWidth, autoGrowExtraSpace), !hideFocusedState && isFocused && styles.borderColorFocus, (!!hasError || !!errorText) && styles.borderColorDanger, autoGrowHeight && {scrollPaddingTop: typeof maxAutoGrowHeight === 'number' ? 2 * maxAutoGrowHeight : undefined}, diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 88c20abf62cf..b5b4b3ff2e81 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1290,6 +1290,13 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ }; }, + getAutoGrowWidthInputContainerStyles: (width: number, extraSpace: number): ViewStyle => { + if (!!width && !!extraSpace) { + return {marginRight: -extraSpace, width: width + extraSpace} + } + return {width}; + }, + /* * Returns the actual maxHeight of the auto-growing markdown text input. */ From 267eb391d1204647684e86b8230b4e84f9f9846f Mon Sep 17 00:00:00 2001 From: QichenZhu <57348009+QichenZhu@users.noreply.github.com> Date: Sun, 8 Dec 2024 02:20:34 +1300 Subject: [PATCH 3/7] Increase spacing --- src/components/MoneyRequestAmountInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MoneyRequestAmountInput.tsx b/src/components/MoneyRequestAmountInput.tsx index ac44568bbe42..d52fba219bcb 100644 --- a/src/components/MoneyRequestAmountInput.tsx +++ b/src/components/MoneyRequestAmountInput.tsx @@ -290,7 +290,7 @@ function MoneyRequestAmountInput( return ( Date: Mon, 9 Dec 2024 12:54:12 +1300 Subject: [PATCH 4/7] Lift prop to a parent component to limit its scope --- src/components/AmountTextInput.tsx | 2 +- src/components/MoneyRequestAmountInput.tsx | 7 ++++--- src/pages/iou/MoneyRequestAmountForm.tsx | 2 ++ src/styles/utils/index.ts | 2 +- 4 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/components/AmountTextInput.tsx b/src/components/AmountTextInput.tsx index 52c32ce1f584..aa332cfb6990 100644 --- a/src/components/AmountTextInput.tsx +++ b/src/components/AmountTextInput.tsx @@ -39,7 +39,7 @@ type AmountTextInputProps = { /** Hide the focus styles on TextInput */ hideFocusedState?: boolean; -} & Pick; +} & Pick; function AmountTextInput( { diff --git a/src/components/MoneyRequestAmountInput.tsx b/src/components/MoneyRequestAmountInput.tsx index d52fba219bcb..717659c16fd3 100644 --- a/src/components/MoneyRequestAmountInput.tsx +++ b/src/components/MoneyRequestAmountInput.tsx @@ -8,11 +8,11 @@ import * as CurrencyUtils from '@libs/CurrencyUtils'; import getOperatingSystem from '@libs/getOperatingSystem'; import * as MoneyRequestUtils from '@libs/MoneyRequestUtils'; import shouldIgnoreSelectionWhenUpdatedManually from '@libs/shouldIgnoreSelectionWhenUpdatedManually'; -import variables from '@styles/variables'; import CONST from '@src/CONST'; import isTextInputFocused from './TextInput/BaseTextInput/isTextInputFocused'; import type {BaseTextInputRef} from './TextInput/BaseTextInput/types'; import TextInputWithCurrencySymbol from './TextInputWithCurrencySymbol'; +import type {TextInputWithCurrencySymbolProps} from './TextInputWithCurrencySymbol/types'; type CurrentMoney = {amount: string; currency: string}; @@ -92,7 +92,7 @@ type MoneyRequestAmountInputProps = { /** The width of inner content */ contentWidth?: number; -}; +} & Pick; type Selection = { start: number; @@ -127,6 +127,7 @@ function MoneyRequestAmountInput( hideFocusedState = true, shouldKeepUserInput = false, autoGrow = true, + autoGrowExtraSpace, contentWidth, ...props }: MoneyRequestAmountInputProps, @@ -290,7 +291,7 @@ function MoneyRequestAmountInput( return ( ({ getAutoGrowWidthInputContainerStyles: (width: number, extraSpace: number): ViewStyle => { if (!!width && !!extraSpace) { - return {marginRight: -extraSpace, width: width + extraSpace} + return {marginRight: -extraSpace, width: width + extraSpace}; } return {width}; }, From b8fdae85195777ee2e5cf324bd5641ae74946495 Mon Sep 17 00:00:00 2001 From: QichenZhu <57348009+QichenZhu@users.noreply.github.com> Date: Mon, 9 Dec 2024 12:55:12 +1300 Subject: [PATCH 5/7] Remove outdated comments --- src/components/TextInput/BaseTextInput/index.native.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/TextInput/BaseTextInput/index.native.tsx b/src/components/TextInput/BaseTextInput/index.native.tsx index 6617a2d8d5fa..31e3fd1c682e 100644 --- a/src/components/TextInput/BaseTextInput/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/index.native.tsx @@ -451,14 +451,10 @@ function BaseTextInput( )} {/* Text input component doesn't support auto grow by default. - We're using a hidden text input to achieve that. This text view is used to calculate width or height of the input value given textStyle in this component. This Text component is intentionally positioned out of the screen. */} {(!!autoGrow || autoGrowHeight) && !isAutoGrowHeightMarkdown && ( - // 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 Date: Mon, 9 Dec 2024 13:59:31 +1300 Subject: [PATCH 6/7] Apply the same approach to web platforms --- src/components/TextInput/BaseTextInput/index.tsx | 5 +++-- src/components/TextInput/BaseTextInput/types.ts | 4 +--- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/TextInput/BaseTextInput/index.tsx b/src/components/TextInput/BaseTextInput/index.tsx index e36ae60255fc..c03c47dd5fc8 100644 --- a/src/components/TextInput/BaseTextInput/index.tsx +++ b/src/components/TextInput/BaseTextInput/index.tsx @@ -50,6 +50,7 @@ function BaseTextInput( autoFocus = false, disableKeyboard = false, autoGrow = false, + autoGrowExtraSpace = 0, autoGrowHeight = false, maxAutoGrowHeight, hideFocusedState = false, @@ -257,7 +258,8 @@ function BaseTextInput( const newTextInputContainerStyles: StyleProp = StyleSheet.flatten([ styles.textInputContainer, textInputContainerStyles, - (autoGrow || !!contentWidth) && StyleUtils.getWidthStyle(textInputWidth), + !!contentWidth && StyleUtils.getWidthStyle(textInputWidth), + autoGrow && StyleUtils.getAutoGrowWidthInputContainerStyles(textInputWidth, autoGrowExtraSpace), !hideFocusedState && isFocused && styles.borderColorFocus, (!!hasError || !!errorText) && styles.borderColorDanger, autoGrowHeight && {scrollPaddingTop: typeof maxAutoGrowHeight === 'number' ? 2 * maxAutoGrowHeight : undefined}, @@ -493,7 +495,6 @@ function BaseTextInput( )} {/* Text input component doesn't support auto grow by default. - We're using a hidden text input to achieve that. This text view is used to calculate width or height of the input value given textStyle in this component. This Text component is intentionally positioned out of the screen. */} diff --git a/src/components/TextInput/BaseTextInput/types.ts b/src/components/TextInput/BaseTextInput/types.ts index 6fe2a7db49ce..70cfb028cef4 100644 --- a/src/components/TextInput/BaseTextInput/types.ts +++ b/src/components/TextInput/BaseTextInput/types.ts @@ -54,9 +54,7 @@ type CustomBaseTextInputProps = { */ autoGrow?: boolean; - /** - * If autoGrow is enabled, this reserves extra space for incoming characters to prevent flickering on native platforms. - */ + /** If autoGrow is enabled, this reserves extra space for incoming characters to prevent flickering. */ autoGrowExtraSpace?: number; /** From 04b8db11faa46b31f3dd798ea6e7fac5f74206ff Mon Sep 17 00:00:00 2001 From: Qichen Zhu <57348009+QichenZhu@users.noreply.github.com> Date: Wed, 11 Dec 2024 13:01:06 +1300 Subject: [PATCH 7/7] Add comment --- src/styles/utils/index.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index c0ad7e8694c9..cbd466638d27 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1290,6 +1290,9 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ }; }, + /* + * Returns styles for the text input container, with extraSpace allowing overflow without affecting the layout. + */ getAutoGrowWidthInputContainerStyles: (width: number, extraSpace: number): ViewStyle => { if (!!width && !!extraSpace) { return {marginRight: -extraSpace, width: width + extraSpace};