fix: android tax overlap suffix

src/components/AmountForm.tsx

@@ -9,7 +9,6 @@ import {getCurrencyDecimals} from '@libs/CurrencyUtils';
 import {canUseTouchScreen as canUseTouchScreenCheck} from '@libs/DeviceCapabilities';
 import getOperatingSystem from '@libs/getOperatingSystem';
 import {addLeadingZero, replaceAllDigits, replaceCommasWithPeriod, stripCommaFromAmount, stripDecimalsFromAmount, stripSpacesFromAmount, validateAmount} from '@libs/MoneyRequestUtils';
-import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import BigNumberPad from './BigNumberPad';
 import FormHelpMessage from './FormHelpMessage';
@@ -53,7 +52,7 @@ type AmountFormProps = {
     /** Number of decimals to display */
     fixedDecimals?: number;
 } & Pick<BaseTextInputWithCurrencySymbolProps, 'hideCurrencySymbol' | 'extraSymbol'> &
-    Pick<BaseTextInputProps, 'autoFocus'>;
+    Pick<BaseTextInputProps, 'autoFocus' | 'autoGrowExtraSpace' | 'autoGrowMarginSide' | 'style'>;
 
 /**
  * Returns the new selection object based on the updated amount's length
@@ -281,7 +280,6 @@ function AmountForm(
             >
                 <TextInputWithCurrencySymbol
                     formattedAmount={formattedAmount}
-                    autoGrowExtraSpace={variables.w80}
                     onChangeAmount={setNewAmount}
                     onCurrencyButtonPress={onCurrencyButtonPress}
                     placeholder={numberFormat(0)}

src/components/TextInput/BaseTextInput/implementation/index.native.tsx

@@ -51,6 +51,7 @@ function BaseTextInput(
         disableKeyboard = false,
         autoGrow = false,
         autoGrowExtraSpace = 0,
+        autoGrowMarginSide,
         autoGrowHeight = false,
         maxAutoGrowHeight,
         hideFocusedState = false,
@@ -253,7 +254,7 @@ function BaseTextInput(
         styles.textInputContainer,
         textInputContainerStyles,
         !!contentWidth && StyleUtils.getWidthStyle(textInputWidth),
-        isExternalAutoGrowMeasurement && StyleUtils.getAutoGrowWidthInputContainerStyles(textInputWidth, autoGrowExtraSpace),
+        isExternalAutoGrowMeasurement && StyleUtils.getAutoGrowWidthInputContainerStyles(textInputWidth, autoGrowExtraSpace, autoGrowMarginSide),
         !hideFocusedState && isFocused && styles.borderColorFocus,
         (!!hasError || !!errorText) && styles.borderColorDanger,
         autoGrowHeight && {scrollPaddingTop: typeof maxAutoGrowHeight === 'number' ? 2 * maxAutoGrowHeight : undefined},

src/components/TextInput/BaseTextInput/types.ts

@@ -59,6 +59,12 @@ type CustomBaseTextInputProps = {
     /** If autoGrow is enabled, this reserves extra space for incoming characters to prevent flickering on native platforms. */
     autoGrowExtraSpace?: number;
 
+    /**
+     * Specifies the side ('left' or 'right') where the autoGrow margin should be applied.
+     * This determines which side of the input container will expand when autoGrow is enabled.
+     */
+    autoGrowMarginSide?: 'left' | 'right';
+
     /**
      * Autogrow input container height based on the entered text
      */

src/pages/workspace/taxes/ValuePage.tsx

@@ -10,14 +10,16 @@ import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {updatePolicyTaxValue, validateTaxValue} from '@libs/actions/TaxRate';
+import getPlatform from '@libs/getPlatform';
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
-import * as PolicyUtils from '@libs/PolicyUtils';
+import {getTaxByID} from '@libs/PolicyUtils';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading';
 import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading';
+import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -35,10 +37,10 @@ function ValuePage({
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {inputCallbackRef} = useAutoFocusInput();
-    const currentTaxRate = PolicyUtils.getTaxByID(policy, taxID);
+    const currentTaxRate = getTaxByID(policy, taxID);
     const defaultValue = currentTaxRate?.value?.replace('%', '');
 
-    const goBack = useCallback(() => Navigation.goBack(ROUTES.WORKSPACE_TAX_EDIT.getRoute(policyID ?? '-1', taxID)), [policyID, taxID]);
+    const goBack = useCallback(() => Navigation.goBack(ROUTES.WORKSPACE_TAX_EDIT.getRoute(policyID, taxID)), [policyID, taxID]);
 
     const submit = useCallback(
         (values: FormOnyxValues<typeof ONYXKEYS.FORMS.WORKSPACE_TAX_VALUE_FORM>) => {
@@ -96,6 +98,10 @@ function ValuePage({
                         amountMaxLength={CONST.MAX_TAX_RATE_INTEGER_PLACES}
                         extraSymbol={<Text style={styles.iouAmountText}>%</Text>}
                         ref={inputCallbackRef}
+                        autoGrowExtraSpace={variables.w80}
+                        autoGrowMarginSide="left"
+                        // Currently, autoGrow is only supported on Android. Therefore, we need to check the platform before applying flex styles to avoid layout issues on other platforms.
+                        style={[styles.iouAmountTextInput, styles.textAlignRight, getPlatform() === CONST.PLATFORM.ANDROID && styles.flex1]}
                     />
                 </FormProvider>
             </ScreenWrapper>

src/pages/workspace/taxes/WorkspaceCreateTaxPage.tsx

@@ -13,13 +13,15 @@ import TextPicker from '@components/TextPicker';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {createPolicyTax, getNextTaxCode, getTaxValueWithPercentage, validateTaxName, validateTaxValue} from '@libs/actions/TaxRate';
+import getPlatform from '@libs/getPlatform';
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
 import {hasAccountingConnections} from '@libs/PolicyUtils';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading';
 import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading';
+import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
@@ -36,7 +38,7 @@ function WorkspaceCreateTaxPage({
 }: WorkspaceCreateTaxPageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const [modal] = useOnyx(ONYXKEYS.MODAL);
+    const [modal] = useOnyx(ONYXKEYS.MODAL, {canBeMissing: true});
 
     const submitForm = useCallback(
         ({value, ...values}: FormOnyxValues<typeof ONYXKEYS.FORMS.WORKSPACE_NEW_TAX_FORM>) => {
@@ -117,6 +119,10 @@ function WorkspaceCreateTaxPage({
                                     // We increase the amount max length to support the extra decimals.
                                     amountMaxLength={CONST.MAX_TAX_RATE_INTEGER_PLACES}
                                     extraSymbol={<Text style={styles.iouAmountText}>%</Text>}
+                                    autoGrowExtraSpace={variables.w80}
+                                    autoGrowMarginSide="left"
+                                    // Currently, autoGrow is only supported on Android. Therefore, we need to check the platform before applying flex styles to avoid layout issues on other platforms.
+                                    style={[styles.iouAmountTextInput, styles.textAlignRight, getPlatform() === CONST.PLATFORM.ANDROID && styles.flex1]}
                                 />
                             </View>
                         </FormProvider>

src/styles/utils/index.ts

@@ -1321,9 +1321,10 @@ 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 => {
+    getAutoGrowWidthInputContainerStyles: (width: number, extraSpace: number, marginSide?: 'left' | 'right'): ViewStyle => {
         if (!!width && !!extraSpace) {
-            return {marginRight: -extraSpace, width: width + extraSpace};
+            const marginKey = marginSide === 'left' ? 'marginLeft' : 'marginRight';
+            return {[marginKey]: -extraSpace, width: width + extraSpace};
         }
         return {width};
     },