[Awaiting checklist] [$250] Tax - App crashes on replacing tax code with emoji

[jponikarchuk]

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: V9.1.78-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/6451630
Email or phone of affected tester (no customers): Slottwo1 csm@gmail.com
Issue reported by: Applause Internal Team
Device used: Redminote 10s android 13 phone
App Component: Workspace Settings

Action Performed:

1. Go to https://staging.new.expensify.com/home
2. Go to workspace settings - more features - enable tax
3. Tap tax - tax rate 1% - tax code
4. Tap Upgrade and complete the flow
5. Tap tax code and replace it with an emoji

Expected Result:

App must not crashes on replacing tax code with emoji.

Actual Result:

App crashes on replacing tax code with emoji.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

1.mp4

Logs.txt

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021942974140675296489
• Upwork Job ID: 1942974140675296489
• Last Price Increase: 2025-07-09

Issue Owner

Current Issue Owner: @rushatgabhane

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

[ryntgh]

Proposal

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

Tax - App crashes on replacing tax code with emoji

What is the root cause of that problem?

validateTaxCode doesn't validate against emoji characters, allowing emojis to be used as tax codes. When setPolicyTaxCode is called with an emoji, it creates Onyx data structures using the emoji as an object key, which causes crashes

App/src/libs/actions/TaxRate.ts

Lines 65 to 79 in 58229fe

	const validateTaxCode = (policy: Policy, values: FormOnyxValues<typeof ONYXKEYS.FORMS.WORKSPACE_TAX_CODE_FORM>) => {
	const errors = ValidationUtils.getFieldRequiredErrors(values, [INPUT_IDS_TAX_CODE.TAX_CODE]);
	const taxCode = values[INPUT_IDS_TAX_CODE.TAX_CODE];
	if (taxCode.length > CONST.TAX_RATES.NAME_MAX_LENGTH) {
	errors[INPUT_IDS_TAX_CODE.TAX_CODE] = translateLocal('common.error.characterLimitExceedCounter', {
	length: taxCode.length,
	limit: CONST.TAX_RATES.NAME_MAX_LENGTH,
	});
	} else if (policy?.taxRates?.taxes && ValidationUtils.isExistingTaxCode(taxCode, policy.taxRates.taxes)) {
	errors[INPUT_IDS_TAX_CODE.TAX_CODE] = translateLocal('workspace.taxes.error.taxCodeAlreadyExists');
	}
	return errors;
	};

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

We can add emoji validation to the validateTaxCode function using the existing CONST.REGEX.ALL_EMOJIS to prevent tax code with emoji

const validateTaxCode = (policy: Policy, values: FormOnyxValues<typeof ONYXKEYS.FORMS.WORKSPACE_TAX_CODE_FORM>) => {
    const errors = ValidationUtils.getFieldRequiredErrors(values, [INPUT_IDS_TAX_CODE.TAX_CODE]);

    const taxCode = values[INPUT_IDS_TAX_CODE.TAX_CODE];
    if (taxCode.length > CONST.TAX_RATES.NAME_MAX_LENGTH) {
        errors[INPUT_IDS_TAX_CODE.TAX_CODE] = translateLocal('common.error.characterLimitExceedCounter', {
            length: taxCode.length,
            limit: CONST.TAX_RATES.NAME_MAX_LENGTH,
        });
    } else if (taxCode.match(CONST.REGEX.ALL_EMOJIS)) {
        errors[INPUT_IDS_TAX_CODE.TAX_CODE] = translateLocal('workspace.taxes.error.invalidTaxCode');
    } else if (policy?.taxRates?.taxes && ValidationUtils.isExistingTaxCode(taxCode, policy.taxRates.taxes)) {
        errors[INPUT_IDS_TAX_CODE.TAX_CODE] = translateLocal('workspace.taxes.error.taxCodeAlreadyExists');
    }

    return errors;
};

We should create a new translation for the error as well

invalidTaxCode: 'Tax code cannot contain emojis',

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

N/A

What alternative solutions did you explore? (Optional)

N/A

[Burhan-Rashid]

Proposal

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

Tax - App crashes on replacing tax code with emoji

What is the root cause of that problem?

Currently we are not having any validation for emojis for the tax code field. When user inputs emoji in the tax code field, we update the route with the emoji value and that breaks the application.

App/src/pages/workspace/taxes/WorkspaceTaxCodePage.tsx

Lines 35 to 48 in 9b9f059

	const setTaxCode = useCallback(
	(values: FormOnyxValues<typeof ONYXKEYS.FORMS.WORKSPACE_TAX_CODE_FORM>) => {
	const newTaxCode = values.taxCode.trim();
	if (currentTaxCode === newTaxCode) {
	Navigation.goBack(ROUTES.WORKSPACE_TAX_EDIT.getRoute(policyID, currentTaxCode));
	return;
	}
	setPolicyTaxCode(policyID, currentTaxCode, newTaxCode);
	Navigation.goBack(ROUTES.WORKSPACE_TAX_EDIT.getRoute(policyID, currentTaxCode));
	},
	[currentTaxCode, policyID],
	);

App/src/libs/actions/TaxRate.ts

Lines 65 to 79 in 58229fe

	const validateTaxCode = (policy: Policy, values: FormOnyxValues<typeof ONYXKEYS.FORMS.WORKSPACE_TAX_CODE_FORM>) => {
	const errors = ValidationUtils.getFieldRequiredErrors(values, [INPUT_IDS_TAX_CODE.TAX_CODE]);
	const taxCode = values[INPUT_IDS_TAX_CODE.TAX_CODE];
	if (taxCode.length > CONST.TAX_RATES.NAME_MAX_LENGTH) {
	errors[INPUT_IDS_TAX_CODE.TAX_CODE] = translateLocal('common.error.characterLimitExceedCounter', {
	length: taxCode.length,
	limit: CONST.TAX_RATES.NAME_MAX_LENGTH,
	});
	} else if (policy?.taxRates?.taxes && ValidationUtils.isExistingTaxCode(taxCode, policy.taxRates.taxes)) {
	errors[INPUT_IDS_TAX_CODE.TAX_CODE] = translateLocal('workspace.taxes.error.taxCodeAlreadyExists');
	}
	return errors;
	};

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

We need to add the validation for the emojis as well. When user inputs emoji, we should set error for the tax code field so that user won't be able to submit emoji in tax code field.
For that we can update the function here

const validateTaxCode = (policy: Policy, values: FormOnyxValues<typeof ONYXKEYS.FORMS.WORKSPACE_TAX_CODE_FORM>) => {
    const errors = ValidationUtils.getFieldRequiredErrors(values, [INPUT_IDS_TAX_CODE.TAX_CODE]);

    const taxCode = values[INPUT_IDS_TAX_CODE.TAX_CODE];
    const emojiRegex = /[\p{Emoji_Presentation}\uFE0F]/gu;

    if (taxCode.length > CONST.TAX_RATES.NAME_MAX_LENGTH) {
        errors[INPUT_IDS_TAX_CODE.TAX_CODE] = translateLocal('common.error.characterLimitExceedCounter', {
            length: taxCode.length,
            limit: CONST.TAX_RATES.NAME_MAX_LENGTH,
        });
    } else if (emojiRegex.test(taxCode)) {
        errors[INPUT_IDS_TAX_CODE.TAX_CODE] = translateLocal('invalidTaxCode'); // we will use proper transalation in actual // code i have just added this as a sample string here for now.
    } else if (policy?.taxRates?.taxes && ValidationUtils.isExistingTaxCode(taxCode, policy.taxRates.taxes)) {
        errors[INPUT_IDS_TAX_CODE.TAX_CODE] = translateLocal('workspace.taxes.error.taxCodeAlreadyExists');
    }

    return errors;
};

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

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.

[bernhardoj]

Proposal

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

App crashes when replace tax code name with emoji.

This issue happens to other forms too that allow emoji, such as categories, tags, etc.

What is the root cause of that problem?

The issue stems from the react-navigation code. Using emoji as the route path works fine because we encode it, but it crashes after this upstream PR.

In that PR, we only want to encode non-valid characters by splitting the characters that matches the non-valid set and then being encoded.

However, since emojis could contain multiple Unicode, it's being split into a single Unicode and encodeURIComponent can't handle it. For example, 😁 becomes ['\uD83D', '\uDE01']

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

We can split the characters into an array first by using Array.form, iterate over each character, and only encode the ones that are non-valid.

return Array.from(value).map(char => /[^A-Za-z0-9\-._~!$&'()*+,;=:@]/g.test(char) ? char : encodeURIComponent(char)).join('');

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

Update the test in upstream repo

What alternative solutions did you explore? (Optional)

Revert the upstream PR.

[twisterdotcom]

Wow. I guess when you're making a new app in 2025, you have to support the millennials and gen Zers who now put emoji in their tax codes.

[melvin-bot]

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

[melvin-bot]

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

[rushatgabhane]

this is too funny 🤣