[$500] IOU - User cannot enter an amount like 0.XX, starting with separator [ . ] without 0

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Launch the app
2. Log n with any account
3. Tap on "Green plus button"
4. Start entering an amount like 0.XX without entering 0, as in all calculators, starting with the separator [ . ]

Expected Result:

You can enter an amount like 0.XX without entering 0 - .XX

Actual Result:

User cannot enter an amount like 0.XX without entering 0. In this case, you will enter XX instead of .XX

Workaround:

Uknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.75.1

Reproducible in staging?: Yes

Reproducible in production?: Yes

Email or phone of affected tester (no customers): any

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Bug5603190_0-separator-numbers.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @alex-mechler (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[alex-mechler]

Looks god to go external!

[melvin-bot]

Triggered auto assignment to @stephanieelliott (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[sobitneupane]

Is it expected to show .12 or 0.12 when user enters .12?

Proposal:

To achieve .12, we need to update regex as

App/src/pages/iou/steps/IOUAmountPage.js

Lines 121 to 124 in 1997b1c

	validateAmount(amount) {
	const decimalNumberRegex = new RegExp(/^\d+(,\d+)*(\.\d{0,2})?$/, 'i');
	return amount === '' || (decimalNumberRegex.test(amount) && this.calculateAmountLength(amount) <= CONST.IOU.AMOUNT_MAX_LENGTH);
	}

    validateAmount(amount) {
-        const decimalNumberRegex = new RegExp(/^\d+(,\d+)*(\.\d{0,2})?$/, 'i');
+        const decimalNumberRegex = new RegExp(/^(\.\d{0,2})$|^\d+(,\d+)*(\.\d{0,2})?$/, 'i');
        return amount === '' || (decimalNumberRegex.test(amount) && this.calculateAmountLength(amount) <= CONST.IOU.AMOUNT_MAX_LENGTH);
    }

Also, we need to add isNaN(parseFloat(this.state.amount) condition in isDisabled prop in Next Button

TO achieve 0.12, we need to update text in updateAmount()

App/src/pages/iou/steps/IOUAmountPage.js

Lines 165 to 172 in 1997b1c

	updateAmount(text) {
	this.setState((prevState) => {
	const amount = this.replaceAllDigits(text, this.props.fromLocaleDigit);
	return this.validateAmount(amount)
	? {amount: this.stripCommaFromAmount(amount)}
	: prevState;
	});
	}

    updateAmount(text) {
+        text = text === "." ? "0." : text
        this.setState((prevState) => {
            const amount = this.replaceAllDigits(text, this.props.fromLocaleDigit);
            return this.validateAmount(amount)
                ? {amount: this.stripCommaFromAmount(amount)}
                : prevState;
        });
    }

[thesahindia]

I don't think it's a bug. It's a feature request and it should be raised on slack so that we can decide if it's really needed.

[parasharrajat]

Good point @thesahindia. I agree.

[melvin-bot]

@stephanieelliott Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

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