[Due for payment 2025-05-28] [$250] Android - When entering tax rate, digit overlap with percentage symbol

[nlemma]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: V9.1.23-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team
Device used: Redmi note 19s androud 13
App Component: Workspace Settings

Action Performed:

1. Launch app
2. Go to workspace settings - more features - enable taxes
3. Tap taxes
4. Tap value
5. Enter 8 digit repeatedly

Expected Result:

When entering tax rate, digit must not overlap with percentage symbol.

Bug not reproducible in v9.1.20-0

Actual Result:

When entering tax rate, digit overlap with percentage symbol.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6791384_1743699201844.az_recorder_20250403_221706.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021907928733770489004
• Upwork Job ID: 1907928733770489004
• Last Price Increase: 2025-04-17
• Automatic offers:
• linhvovan29546 | Contributor | 107019925

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @twisterdotcom

[melvin-bot]

Triggered auto assignment to @twisterdotcom (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021907928733770489004

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @hungvu193 (External)

[nkdengineer]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When entering tax rate, digit overlap with percentage symbol.

What is the root cause of that problem?

We are using autoGrow for AmountTextInput

App/src/components/AmountTextInput.tsx

Line 63 in c91bf20

autoGrow

that means the input has the flexible width, and it will be updated in onLayout, so if users add numbers, the width is longer than the container and it can be updated only when onLayout is triggered

What changes do you think we should make in order to solve the problem?

We should add styles.overflowHidden for containerStyles below this line

containerStyles={styles.overflowHidden}

We also can add styles.overflowHidden to TextInput if autoGrow is true

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

Style issue

What alternative solutions did you explore? (Optional)

NA

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

Result

Screen.Recording.2025-04-04.at.11.44.36.mov

[github-actions]

⚠️ @nkdengineer Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

[dangrous]

I can handle internal review on this one when it's ready!

[linhvovan29546]

🚨 Edited by proposal-police: This proposal was edited at 2025-04-06 04:51:03 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Android - When entering tax rate, digit overlap with percentage symbol

What is the root cause of that problem?

After this PR #58380, we introduced the autoGrowExtraSpace to fix the issue where text dots were shifting. However, this extra space is currently added to the right side of the input, which causes it to overlap with the percentage symbol shown on the right side.

App/src/styles/utils/index.ts

Lines 1325 to 1330 in 9168f58

	getAutoGrowWidthInputContainerStyles: (width: number, extraSpace: number): ViewStyle => {
	if (!!width && !!extraSpace) {
	return {marginRight: -extraSpace, width: width + extraSpace};
	}
	return {width};
	},

What changes do you think we should make in order to solve the problem?

We should update getAutoGrowWidthInputContainerStyles to accept an additional prop that lets us specify whether the extra space should be added to the left instead of theright. This allows us to avoid overlapping the symbol on the right and also fix the old issue.

1. Modify the utility function

getAutoGrowWidthInputContainerStyles: (
    width: number,
    extraSpace: number,
    position?: 'left' | 'right'
): ViewStyle => {
        if (!!width && !!extraSpace) {
            const marginKey = position === 'left' ? 'marginLeft' : 'marginRight';
            return {[marginKey]: -extraSpace, width: width + extraSpace};
        }
        return {width};
};

2. Update the BaseTextInput component. Introduce a new prop autoGrowPosition and pass it to the utility:
   

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

   Line 259 in 9168f58

   autoGrow && StyleUtils.getAutoGrowWidthInputContainerStyles(textInputWidth, autoGrowExtraSpace),

    const newTextInputContainerStyles: StyleProp<ViewStyle> = StyleSheet.flatten([
        styles.textInputContainer,
        textInputContainerStyles,
        !!contentWidth && StyleUtils.getWidthStyle(textInputWidth),
        autoGrow && StyleUtils.getAutoGrowWidthInputContainerStyles(textInputWidth, autoGrowExtraSpace, autoGrowPosition),
        !hideFocusedState && isFocused && styles.borderColorFocus,
        (!!hasError || !!errorText) && styles.borderColorDanger,
        autoGrowHeight && {scrollPaddingTop: typeof maxAutoGrowHeight === 'number' ? 2 * maxAutoGrowHeight : undefined},
        isAutoGrowHeightMarkdown && styles.pb2,
    ]);

3. Update AmountForm component
   Only apply left-side autoGrow spacing if extraSymbol is used, reduce the space from w80 to w40 as the previous value was unnecessarily large. Also update the input style to align the text to the right.

const shouldAutoGrow=!!rest.extraSymbol && rest.hideCurrencySymbol

   <TextInputWithCurrencySymbol
                    formattedAmount={formattedAmount}
                    autoGrowExtraSpace={shouldAutoGrow?variables.w40:undefined} //new
                    onChangeAmount={setNewAmount}
                    autoGrowPosition={shouldAutoGrow?'left':undefined} //new
                    style={[styles.iouAmountTextInput,{textAlign:'right'}]} //update
...

Screen.Recording.2025-04-06.at.10.52.24.mov

Note: I've checked and extraSymbol is only used for the tax page.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None, this is purely a UI bug fix

What alternative solutions did you explore? (Optional)

For safety, instead of modifying it directly inside the AmountForm component, we can pass the props from ValuePage and WorkspaceCreateTaxPage, and remove the autoGrowExtraSpace logic from AmountForm.

                                <InputWrapper
                                    InputComponent={AmountPicker}
                                    inputID={INPUT_IDS.VALUE}
                                    title={(v) => (v ? getTaxValueWithPercentage(v) : '')}
                                    description={translate('workspace.taxes.value')}
                                    rightLabel={translate('common.required')}
                                    hideCurrencySymbol
                                    // The default currency uses 2 decimal places, so we substract it
                                    extraDecimals={CONST.MAX_TAX_RATE_DECIMAL_PLACES - 2}
                                    // 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.iouAmountTextSize} // new
                                    autoGrowPosition={'left'} // new
                                    style={[styles.iouAmountTextInput,{textAlign:'right'}]} // new
                                />

[hungvu193]

Still under reviewing

[twisterdotcom]

Seems this might be a regression from #56951 (comment) @dangrous.

[hungvu193]

Yes. I can confirm this is regression from #56951

[linhvovan29546]

@twisterdotcom @dangrous @hungvu193 We have two valid proposals here. For fairness to all contributors, should we still continue with the current step here? 🤔

[dangrous]

So I think process wise we should assign to @huult / @eh2077 as the assignees of the original PR - let me know if that makes sense

[twisterdotcom]

Yes, we technically should. If @huult is happy sharing, we could do $125 each for them and whoever might have the best solution here.

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[dangrous]

Yes, we technically should. If @huult is happy sharing, we could do $125 each for them and whoever might have the best solution here.

That works for me if it works for you @huult!

Or actually edit - no payment would be required for @huult since it's a regression; so maybe just a $125 thank you to the contributor with the best solution?

[huult]

@twisterdotcom @dangrous This issue is a regression from my previous PR. However, the solution in that PR was correct and addressed the original issue: #56951.

The current problem only occurs when the autoGrowExtraSpace prop is used, which already existed in the codebase.

I think this issue is a deeper regression introduced by the autoGrowExtraSpace prop, because it doesn't cover the specific case presented here. This issue occurred when I used that prop.

Anyway, would it be okay if I create a new PR to fix this issue?

[twisterdotcom]

Okay, so we have fixed the regression in #56951, but we're saying this is a new issue. If so, I am more inclined to:

1. Pay out @huult for [Due for payment 2025-04-08] [$250] Tax - After a digit, entering dot moves the first digit while adding tax rate #56951 at $125 for the initial fix + fixing the regression
2. Choose an assignee here (defer to @hungvu193 and @dangrous on who to choose) to fix this issue.

Does that sound good?

[huult]

@twisterdotcom If possible, please do not penalize my ticket as a regression, because this issue has existed for 4 months.

[hungvu193]

@huult Was this prop autoGrowExtraSpace used elsewhere before you used it to fix the issue? If it was used before, and you can reproduce this issue at the place where autoGrowExtraSpace was used. I think we can treat this issue as a new issue.

[melvin-bot]

Current assignee @dangrous is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[nkdengineer]

@hungvu193 What if we have 2 symbols at the end and beginning? In this case I believe we should use overFlowHidden

[linhvovan29546]

@hungvu193 What if we have 2 symbols at the end and beginning? In this case I believe we should use overFlowHidden

@nkdengineer I don’t see the symbol appearing at both the beginning and end in that case. Could you share a screenshot of what you’re referring to?

[hungvu193]

I also don't think that we have both suffix and prefix at the same time

[hungvu193]

All yours @dangrous

[dangrous]

Yep I think you're right, I can't think of a situation where we'd have both prefix and suffix.

Let's also add a test for getAutoGrowWidthInputContainerStyles or update the existing one.

Thanks!

[melvin-bot]

📣 @linhvovan29546 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[hungvu193]

Being held for #60842

[melvin-bot]

This issue has not been updated in over 15 days. @dangrous, @twisterdotcom, @hungvu193, @linhvovan29546 eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[hungvu193]

All yours @dangrous. PR is approved

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.1.47-6 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: android tax overlap suffix #60693

If no regressions arise, payment will be issued on 2025-05-28. 🎊

For reference, here are some details about the assignees on this issue:

• @hungvu193 requires payment through NewDot Manual Requests
• @linhvovan29546 requires payment automatic offer (Contributor)

[melvin-bot]

@hungvu193 @twisterdotcom @hungvu193 The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]