[Due for payment 2025-04-08] [$250] Tax - After a digit, entering dot moves the first digit while adding tax rate #56951

lanitochka17 · 2025-02-17T15:23:57Z

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: 9.0.99-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

Launch app
Go to workspace settings - more features - enable tax
Tap add rate - value
Enter a digit eg: 3 and enter decimal point

Expected Result:

After a digit, entering dot must not move the first digit while adding tax rate

Actual Result:

After a digit, entering dot moves the first digit while adding tax rate

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

Screenshots/Videos

Add any screenshot/video evidence

Bug6745800_1739803897453.Screenrecorder-2025-02-17-20-15-48-207.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021892375042404364604
Upwork Job ID: 1892375042404364604
Last Price Increase: 2025-03-06
Automatic offers:

huult | Contributor | 106508139

Issue Owner

Current Issue Owner: @twisterdotcom

melvin-bot · 2025-02-17T15:24:05Z

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 · 2025-02-20T00:45:45Z

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

melvin-bot · 2025-02-20T00:45:50Z

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

D-01576 · 2025-02-20T07:14:23Z

🚨 Edited by proposal-police: This proposal was edited at 2025-02-20 07:20:09 UTC.

Proposal

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

Tax - After a digit, entering dot moves the first digit while adding tax rate

What is the root cause of that problem?

The regex required a digit after ., making 3. invalid.

In src/libs/MoneyRequestUtils.ts

validateAmount used:
```
(\\.\\d{0,${decimals}})?
```
❌ This forced at least one digit after .
❌ 3. was invalid → UI reset selection

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

In src/libs/MoneyRequestUtils.ts

Update this line in validateAmount:

const regexString =
    decimals === 0
        ? `^${shouldAllowNegative ? '-?' : ''}\\d{1,${amountMaxLength}}$`
        : `^${shouldAllowNegative ? '-?' : ''}\\d{1,${amountMaxLength}}(\\.\\d{0,${decimals}})?$`;

to this:

const regexString =
    decimals === 0
        ? `^${shouldAllowNegative ? '-?' : ''}\\d{1,${amountMaxLength}}$`
        : `^${shouldAllowNegative ? '-?' : ''}\\d{1,${amountMaxLength}}(\\.?\\d{0,${decimals}})?$`;

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

Input	Expected Output	Description
`3.`	✅ Valid	Allows a number followed by a decimal.
`3.5`	✅ Valid	Allows a valid decimal number.
`3.55` (with `decimals = 2`)	✅ Valid	Allows up to 2 decimal places.
`003.5`	✅ Valid	Leading zeros are allowed.

What alternative solutions did you explore? (Optional)

github-actions · 2025-02-20T07:14:51Z

⚠️ @D-01576 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).

eh2077 · 2025-02-20T13:37:45Z

@D-01576 Thanks for your proposal. But your root cause analysis is not clear to me. Can you elaborate please?

D-01576 · 2025-02-20T14:49:30Z

@D-01576 Thanks for your proposal. But your root cause analysis is not clear to me. Can you elaborate please?

/src/pages/workspace/taxes/ValuePage.tsx at line 88 InputComponent={AmountForm}

/src/components/AmountForm.tsx at line 137

if (!MoneyRequestUtils.validateAmount(newAmountWithoutSpaces, decimals, amountMaxLength)) {
    setSelection((prevSelection) => ({...prevSelection}));
    return;
}

returning the same value for setNewAmount

/src/libs/MoneyRequestUtils.ts at function validateAmount

const regexString =
    decimals === 0
        ? `^${shouldAllowNegative ? '-?' : ''}\d{1,${amountMaxLength}}$`
        : `^${shouldAllowNegative ? '-?' : ''}\d{1,${amountMaxLength}}(\.\d{0,${decimals}})?$`;

not validating the string 3. but if we change this to:

const regexString =
    decimals === 0
        ? `^${shouldAllowNegative ? '-?' : ''}\d{1,${amountMaxLength}}$`
        : `^${shouldAllowNegative ? '-?' : ''}\d{1,${amountMaxLength}}(\.?\d{0,${decimals}})?$`;

then it might validate 3. and solve the problem. Let me know if it is ok.

eh2077 · 2025-02-20T14:58:11Z

Shouldn't the original regex match 3.0? Sorry, I can't follow you.

D-01576 · 2025-02-20T15:10:02Z

Let me find any acceptable solution

…

On Thu, Feb 20, 2025, 7:58 PM Eric Han ***@***.***> wrote: Shouldn't the original regex match 3.0? Sorry, I can't follow you. — Reply to this email directly, view it on GitHub <#56951 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BAVOODYPSOE2IM27X3LMJNT2QXURVAVCNFSM6AAAAABXJTNSJKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNZRG42TAOBUGU> . You are receiving this because you were mentioned.Message ID: ***@***.***> [image: eh2077]*eh2077* left a comment (Expensify/App#56951) <#56951 (comment)> Shouldn't the original regex match 3.0? Sorry, I can't follow you. — Reply to this email directly, view it on GitHub <#56951 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BAVOODYPSOE2IM27X3LMJNT2QXURVAVCNFSM6AAAAABXJTNSJKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNZRG42TAOBUGU> . You are receiving this because you were mentioned.Message ID: ***@***.***>

huult · 2025-02-21T04:25:09Z

🚨 Edited by proposal-police: This proposal was edited at 2025-03-03 15:42:08 UTC.

Proposal

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

After a digit, entering dot moves the first digit while adding tax rate

What is the root cause of that problem?

We are using a text input with currency symbol to enter the rate value.

App/src/components/AmountForm.tsx

Line 280 in cc232a0

<TextInputWithCurrencySymbol

The width of the input, including the currency symbol, depends on the value of the text input, meaning the width is determined by the value. When we input a dot (".") and the width of the text input is not sufficient, the dot pushes the current value to the left because the width of the text input is not updated immediately upon input; it only updates after the input is complete. As shown in the video below, we can see that the onLayout update occurs only after the value is input (late a bit).

Screen.Recording.2025-02-24.at.12.55.17.mov

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

We should create space for amountTextInput to fix this issue. For example, we can set a minimum width or width to ensure the text input has enough space before entering a new amount. Steps to implement this solution for the steps below:

Detect the LTR case without a symbol button, and note that this issue occurs only on native.

    const isLTRWithoutButtonOnNonWeb = isCurrencySymbolLTR && !currencySymbolButton && getPlatform() !== CONST.PLATFORM.WEB;

Create space for amount before input new amount

App/src/components/TextInputWithCurrencySymbol/BaseTextInputWithCurrencySymbol.tsx

Line 64 in 5e98efc

style={[styles.pr1, style]}

update to:

style={[styles.pr1, style, isLTRWithoutButtonOnNonWeb ? {width: '100%', textAlign: 'center'} : undefined]}

We use a mask on amountTextInput and extraSymbol to maintain a consistent position.

App/src/components/TextInputWithCurrencySymbol/BaseTextInputWithCurrencySymbol.tsx

Line 69 in 5e98efc

add:

    if (isLTRWithoutButtonOnNonWeb) {
        return (
            <>
                <>
                    {amountTextInput}
                    <View style={{opacity: 0}}>{extraSymbol}</View>
                </>

                <View
                    style={{
                        position: 'absolute',
                        left: 0,
                        right: 0,
                        flexDirection: 'row',
                        alignItems: 'center',
                        justifyContent: 'center',
                        width: '100%',
                    }}
                >
                    <Text style={[style, {opacity: 0}]}>{formattedAmount || 0}</Text>
                    {extraSymbol}
                </View>
            </>
        );
    }

Screen.Recording.2025-02-26.at.21.54.57.mp4

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

None

What alternative solutions did you explore? (Optional)

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.

We update autoGrowExtraSpace for AmountTextInput

App/src/components/TextInputWithCurrencySymbol/BaseTextInputWithCurrencySymbol.tsx

Line 54 in 5e98efc

<AmountTextInput

add:

    <AmountTextInput
            ...
            autoGrowExtraSpace={variables.w80} // add this
            {...rest}
        />

Note:
We update autoGrowExtraSpace in BaseTextInputWithCurrencySymbol, AmountForm, or TextInputWithCurrencySymbol... I will double-check in the PR phase to determine which one is more suitable

eh2077 · 2025-02-21T15:51:26Z

@huult Thank you for your proposal!

The first digit shifts when entering a dot (.) because the TextInput width does not dynamically adjust before updating the amount. This causes a layout shift, moving the first digit unexpectedly.

Can you elaborate? It'll be easier to follow if you can explain the root cause according to the source code.

huult · 2025-02-22T07:58:42Z

@eh2077 Sure. I will update the RCA and mention the code next Monday.

huult · 2025-02-24T05:59:22Z

Proposal updated

Updated RCA
Added a short description of the solution

@eh2077, could you review this again? Thank you.

eh2077 · 2025-02-24T10:27:38Z

@huult Thanks for the update. I think your RCA is correct but I have concerns about your solution. Can we fix it with style and avoid adding states?

huult · 2025-02-24T12:27:28Z

@eh2077 I will try this

D-01576 · 2025-02-24T12:54:50Z

@huult Thanks for the update. I think your RCA is correct but I have concerns about your solution. Can we fix it with style and avoid adding states?

Can we change the input's min-width from the style?

huult · 2025-02-24T16:05:28Z

Proposal updated

Add alternative solutions using styles to fix this issue.

@eh2077 Could you check my alternative solutions?

App/src/components/AmountForm.tsx

Line 278 in cc232a0

    
           style={[styles.moneyRequestAmountContainer, styles.flex1, styles.flexRow, styles.w100, styles.alignItemsCenter, styles.justifyContentCenter]}

In my opinion, we should use my main solution because it works well and is easier to approach than the style-based solution. Because:

We need to set min-width and text-align: right to fix the issue. The value of min-width cannot be hardcoded because it is dynamic, and setting it too large would cause the amount and percentage to shift too far to the right.

If we calculate the min-width value dynamically, we don't have an exact value to use. minWidth: ${formattedAmount.length * 25 + 10}, where 25 and 10 are buffer values. The value 25 represents the width of the amount, and 10 is the buffer for the dot. Additionally, the function will become more complex when handling more cases, such as ensuring the buffer is added only once, similar to the solution that checks whether a dot has been added or not. With this approach, it is not 100% accurate because the text may be slightly too far to the right due to calculating the exact width of the amount.

So, let me know what you think?

eh2077 · 2025-02-25T14:41:36Z

Screen.Recording.2025-02-25.at.10.38.35.PM.mov

@huult I found that, after a digit, entering 1 also has the issue.

eh2077 · 2025-02-25T14:41:58Z

Still looking for better proposals!

melvin-bot · 2025-04-01T15:09:22Z

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

melvin-bot · 2025-04-01T15:09:28Z

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

56951 tax input dot move #58380

If no regressions arise, payment will be issued on 2025-04-08. 🎊

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

@huult requires payment automatic offer (Contributor)
@eh2077 requires payment through NewDot Manual Requests

melvin-bot · 2025-04-01T15:09:30Z

@eh2077 @twisterdotcom @eh2077 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]

bernhardoj · 2025-04-05T03:44:27Z

Adding the extra spaces causes the input to overlap with the %. #59607

After:

Before:

twisterdotcom · 2025-04-08T21:52:22Z

Okay, are we saying this has basically caused another bug? If so, could we get @huult to fix it and hold #59607?

huult · 2025-04-09T13:13:34Z

@twisterdotcom I will get back you soon

huult · 2025-04-11T04:48:35Z

@twisterdotcom commented

twisterdotcom · 2025-04-11T10:50:33Z

Proposed plan here: #59607 (comment)

twisterdotcom · 2025-04-14T23:12:25Z

Waiting on resolution of the convo here. Looking like this will still be $250 though.

twisterdotcom · 2025-04-15T22:20:01Z

All good. Let's get this payment sorted now.

twisterdotcom · 2025-04-15T22:20:35Z

Payment Summary:

@huult paid $250 here (Contributor)
@eh2077 paid $250 via NewDot Manual Request

JmillsExpensify · 2025-04-22T15:51:48Z

$250 approved for @eh2077

lanitochka17 added Bug Something is broken. Auto assigns a BugZero manager. Daily KSv2 labels Feb 17, 2025

melvin-bot bot assigned twisterdotcom Feb 17, 2025

twisterdotcom added the External Added to denote the issue can be worked on by a contributor label Feb 20, 2025

melvin-bot bot changed the title ~~Tax - After a digit, entering dot moves the first digit while adding tax rate~~ [$250] Tax - After a digit, entering dot moves the first digit while adding tax rate Feb 20, 2025

melvin-bot bot added Overdue Help Wanted Apply this label when an issue is open to proposals by contributors labels Feb 20, 2025

melvin-bot bot assigned eh2077 Feb 20, 2025

melvin-bot bot removed the Overdue label Feb 20, 2025

melvin-bot bot added the Overdue label Feb 24, 2025

melvin-bot bot removed the Overdue label Feb 24, 2025

huult mentioned this issue Mar 13, 2025

56951 tax input dot move #58380

Merged

50 tasks

melvin-bot bot added Reviewing Has a PR in review Weekly KSv2 and removed Daily KSv2 labels Mar 13, 2025

melvin-bot bot added Weekly KSv2 Awaiting Payment Auto-added when associated PR is deployed to production and removed Weekly KSv2 labels Apr 1, 2025

melvin-bot bot changed the title ~~[$250] Tax - After a digit, entering dot moves the first digit while adding tax rate~~ [Due for payment 2025-04-08] [$250] Tax - After a digit, entering dot moves the first digit while adding tax rate Apr 1, 2025

melvin-bot bot removed the Reviewing Has a PR in review label Apr 1, 2025

melvin-bot bot added Daily KSv2 and removed Weekly KSv2 labels Apr 8, 2025

twisterdotcom mentioned this issue Apr 8, 2025

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

Open

8 tasks

melvin-bot bot added the Overdue label Apr 11, 2025

melvin-bot bot added Overdue and removed Overdue labels Apr 11, 2025

melvin-bot bot removed the Overdue label Apr 14, 2025

twisterdotcom closed this as completed Apr 15, 2025

github-project-automation bot moved this from Bugs and Follow Up Issues to Done in #expensify-bugs Apr 15, 2025

[Due for payment 2025-04-08] [$250] Tax - After a digit, entering dot moves the first digit while adding tax rate #56951

[Due for payment 2025-04-08] [$250] Tax - After a digit, entering dot moves the first digit while adding tax rate #56951

Comments

lanitochka17 commented Feb 17, 2025 • edited by melvin-bot bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

melvin-bot bot commented Feb 17, 2025

Uh oh!

melvin-bot bot commented Feb 20, 2025

Uh oh!

melvin-bot bot commented Feb 20, 2025

Uh oh!

D-01576 commented Feb 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposal

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

What is the root cause of that problem?

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

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

What alternative solutions did you explore? (Optional)

Uh oh!

github-actions bot commented Feb 20, 2025

Uh oh!

eh2077 commented Feb 20, 2025

Uh oh!

D-01576 commented Feb 20, 2025

Uh oh!

eh2077 commented Feb 20, 2025

Uh oh!

D-01576 commented Feb 20, 2025 via email

Uh oh!

huult commented Feb 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposal

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

What is the root cause of that problem?

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

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

What alternative solutions did you explore? (Optional)

Uh oh!

eh2077 commented Feb 21, 2025

Uh oh!

huult commented Feb 22, 2025

Uh oh!

huult commented Feb 24, 2025

Proposal updated

Uh oh!

eh2077 commented Feb 24, 2025

Uh oh!

huult commented Feb 24, 2025

Uh oh!

D-01576 commented Feb 24, 2025

Uh oh!

huult commented Feb 24, 2025

Proposal updated

Uh oh!

eh2077 commented Feb 25, 2025

Uh oh!

eh2077 commented Feb 25, 2025

Uh oh!

melvin-bot bot commented Apr 1, 2025

Uh oh!

melvin-bot bot commented Apr 1, 2025

Uh oh!

melvin-bot bot commented Apr 1, 2025

Uh oh!

bernhardoj commented Apr 5, 2025

Uh oh!

twisterdotcom commented Apr 8, 2025

Uh oh!

huult commented Apr 9, 2025

Uh oh!

huult commented Apr 11, 2025

Uh oh!

twisterdotcom commented Apr 11, 2025

lanitochka17 commented Feb 17, 2025 •

edited by melvin-bot bot

Loading

D-01576 commented Feb 20, 2025 •

edited

Loading

huult commented Feb 21, 2025 •

edited

Loading