From 3d5fe983d2a986ada9d9c436157b16db1765238e Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Thu, 12 Dec 2024 12:30:39 -0700 Subject: [PATCH] Revert "Fix IOU amount input flicking" --- src/components/AmountTextInput.tsx | 2 +- src/components/MoneyRequestAmountInput.tsx | 5 +---- .../TextInput/BaseTextInput/index.native.tsx | 8 +++++--- src/components/TextInput/BaseTextInput/index.tsx | 5 ++--- src/components/TextInput/BaseTextInput/types.ts | 3 --- src/components/TextInputWithCurrencySymbol/types.ts | 2 +- src/pages/iou/MoneyRequestAmountForm.tsx | 2 -- src/styles/utils/index.ts | 10 ---------- 8 files changed, 10 insertions(+), 27 deletions(-) diff --git a/src/components/AmountTextInput.tsx b/src/components/AmountTextInput.tsx index 12189d22dba0..6be2b43c09d7 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 717659c16fd3..9ef33900bb00 100644 --- a/src/components/MoneyRequestAmountInput.tsx +++ b/src/components/MoneyRequestAmountInput.tsx @@ -12,7 +12,6 @@ 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 +91,7 @@ type MoneyRequestAmountInputProps = { /** The width of inner content */ contentWidth?: number; -} & Pick; +}; type Selection = { start: number; @@ -127,7 +126,6 @@ function MoneyRequestAmountInput( hideFocusedState = true, shouldKeepUserInput = false, autoGrow = true, - autoGrowExtraSpace, contentWidth, ...props }: MoneyRequestAmountInputProps, @@ -291,7 +289,6 @@ function MoneyRequestAmountInput( return ( = StyleSheet.flatten([ styles.textInputContainer, textInputContainerStyles, - !!contentWidth && StyleUtils.getWidthStyle(textInputWidth), - autoGrow && StyleUtils.getAutoGrowWidthInputContainerStyles(textInputWidth, autoGrowExtraSpace), + (autoGrow || !!contentWidth) && StyleUtils.getWidthStyle(textInputWidth), !hideFocusedState && isFocused && styles.borderColorFocus, (!!hasError || !!errorText) && styles.borderColorDanger, autoGrowHeight && {scrollPaddingTop: typeof maxAutoGrowHeight === 'number' ? 2 * maxAutoGrowHeight : undefined}, @@ -443,10 +441,14 @@ 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 = StyleSheet.flatten([ styles.textInputContainer, textInputContainerStyles, - !!contentWidth && StyleUtils.getWidthStyle(textInputWidth), - autoGrow && StyleUtils.getAutoGrowWidthInputContainerStyles(textInputWidth, autoGrowExtraSpace), + (autoGrow || !!contentWidth) && StyleUtils.getWidthStyle(textInputWidth), !hideFocusedState && isFocused && styles.borderColorFocus, (!!hasError || !!errorText) && styles.borderColorDanger, autoGrowHeight && {scrollPaddingTop: typeof maxAutoGrowHeight === 'number' ? 2 * maxAutoGrowHeight : undefined}, @@ -488,6 +486,7 @@ 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 70cfb028cef4..c9844e33d594 100644 --- a/src/components/TextInput/BaseTextInput/types.ts +++ b/src/components/TextInput/BaseTextInput/types.ts @@ -54,9 +54,6 @@ type CustomBaseTextInputProps = { */ autoGrow?: boolean; - /** If autoGrow is enabled, this reserves extra space for incoming characters to prevent flickering. */ - 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 3988654584d0..401af75b16cd 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; diff --git a/src/pages/iou/MoneyRequestAmountForm.tsx b/src/pages/iou/MoneyRequestAmountForm.tsx index 3b4f66c32738..ba406c3ddef6 100644 --- a/src/pages/iou/MoneyRequestAmountForm.tsx +++ b/src/pages/iou/MoneyRequestAmountForm.tsx @@ -19,7 +19,6 @@ import * as CurrencyUtils from '@libs/CurrencyUtils'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import * as MoneyRequestUtils from '@libs/MoneyRequestUtils'; import Navigation from '@libs/Navigation/Navigation'; -import variables from '@styles/variables'; import type {BaseTextInputRef} from '@src/components/TextInput/BaseTextInput/types'; import CONST from '@src/CONST'; import type {Route} from '@src/ROUTES'; @@ -260,7 +259,6 @@ function MoneyRequestAmountForm( > ({ }; }, - /* - * 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}; - } - return {width}; - }, - /* * Returns the actual maxHeight of the auto-growing markdown text input. */