[$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 contributors@expensify.com 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: @eh2077

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!

huult · 2025-03-04T05:05:43Z

@eh2077 How about this position?

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

eh2077 · 2025-03-04T14:37:45Z

@huult This still looks like a hack to me.

<Text style={[style, {opacity: 0, paddingLeft: 35}]}>{formattedAmount || 0}</Text>

huult · 2025-03-04T15:40:32Z

@eh2077 I have a new solution using measure. I will update the proposal tomorrow.

huult · 2025-03-05T07:46:50Z

Proposal updated

Added alternative solution

@eh2077 could you check it again? thanks

eh2077 · 2025-03-06T14:14:24Z

But the video of the alternative solution still shows jumping digit

Screen.Recording.2025-03-06.at.10.09.14.PM.mov

melvin-bot · 2025-03-06T16:00:15Z

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

huult · 2025-03-07T16:26:48Z

But the video of the alternative solution still shows jumping digit

@eh2077 This only jumps digits the first time, and the issue with input dots is resolved.

melvin-bot · 2025-03-10T10:08:48Z

@eh2077 Whoops! This issue is 2 days overdue. Let's get this updated quick!

eh2077 · 2025-03-10T23:31:16Z

But the video of the alternative solution still shows jumping digit

@eh2077 This only jumps digits the first time, and the issue with input dots is resolved.

@huult I see but I think we should also fix that.

eh2077 · 2025-03-10T23:46:23Z

Update

@huult 's main solution fixes the effect but it's a little hacky, which is not preferred according to general practice of the App. The styling seems tricky than expected. Posted on slack for more eyes, still looking for better solution!

cc @twisterdotcom

huult · 2025-03-11T16:04:57Z

@eh2077 @twisterdotcom My main solution is working well and resolves this ticket smoothly, but it is a bit hacky. However, this solution is clear and effective. Can we apply it? I will write a comment to explain why we used it and how it works.

QichenZhu · 2025-03-12T06:24:08Z

We resolved a similar issue with the IOU amount input before. Not the most elegant approach, but just linking it here in case it helps: #54189. @huult cc @eh2077

huult · 2025-03-12T06:54:50Z

thank you, @QichenZhu . I will try this

huult · 2025-03-12T07:31:38Z

thanks, @QichenZhu for recommend. I tested it that work.

Proposal updated

@eh2077 could you check my new solution?

eh2077 · 2025-03-12T17:00:40Z

@QichenZhu Thank you for your input!

@huult Thanks for the update! I'll take a look tmr.

eh2077 · 2025-03-13T00:08:32Z

The solution to use autoGrowExtraSpace looks good to me! I think we can go with @huult 's proposal

🎀👀🎀 C+ reviewed

melvin-bot · 2025-03-13T00:08:46Z

Triggered auto assignment to @lakchote, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

lakchote · 2025-03-13T09:02:15Z

@huult's proposal with autoGrowExtraSpace LGTM with the caveat that you'll need to check that it doesn't produce unwanted side effects on the other components using the base component that'll be modified.

melvin-bot · 2025-03-13T09:02:36Z

📣 @huult 🎉 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 📖

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

twisterdotcom added this to [#whatsnext] #expense Mar 4, 2025

twisterdotcom moved this to Bugs and Follow Up Issues in [#whatsnext] #expense Mar 4, 2025

melvin-bot bot added the Overdue label Mar 10, 2025

melvin-bot bot removed the Overdue label Mar 10, 2025

melvin-bot bot assigned lakchote Mar 13, 2025

lakchote assigned huult Mar 13, 2025

melvin-bot bot removed the Help Wanted Apply this label when an issue is open to proposals by contributors label Mar 13, 2025

huult mentioned this issue Mar 13, 2025

56951 tax input dot move #58380

Open

50 tasks

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

[$250] Tax - After a digit, entering dot moves the first digit while adding tax rate #56951

[$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

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

melvin-bot bot commented Feb 17, 2025

melvin-bot bot commented Feb 20, 2025

melvin-bot bot commented Feb 20, 2025

D-01576 commented Feb 20, 2025 • edited Loading

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)

github-actions bot commented Feb 20, 2025

eh2077 commented Feb 20, 2025

D-01576 commented Feb 20, 2025

eh2077 commented Feb 20, 2025

D-01576 commented Feb 20, 2025 via email

huult commented Feb 21, 2025 • edited Loading

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)

eh2077 commented Feb 21, 2025

huult commented Feb 22, 2025

huult commented Feb 24, 2025

Proposal updated

eh2077 commented Feb 24, 2025

huult commented Feb 24, 2025

D-01576 commented Feb 24, 2025

huult commented Feb 24, 2025

Proposal updated

eh2077 commented Feb 25, 2025

eh2077 commented Feb 25, 2025

huult commented Mar 4, 2025

eh2077 commented Mar 4, 2025

huult commented Mar 4, 2025

huult commented Mar 5, 2025

Proposal updated

eh2077 commented Mar 6, 2025

melvin-bot bot commented Mar 6, 2025

huult commented Mar 7, 2025

melvin-bot bot commented Mar 10, 2025

eh2077 commented Mar 10, 2025

eh2077 commented Mar 10, 2025

huult commented Mar 11, 2025

QichenZhu commented Mar 12, 2025

huult commented Mar 12, 2025

huult commented Mar 12, 2025

Proposal updated

eh2077 commented Mar 12, 2025

eh2077 commented Mar 13, 2025

melvin-bot bot commented Mar 13, 2025

lakchote commented Mar 13, 2025

melvin-bot bot commented Mar 13, 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