[Due for payment 2026-03-30] [$250] Tags - Inconsistent validation for special characters in category and tag names

[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.3.4-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/test-runs/TR-3028/folder/13176676/41237285/1131712344?p=2
Email or phone of affected tester (no customers): dreamnitethedragon+yydyd373@gmail.com
Issue reported by: Applause Internal Team
Bug source: Regression TC Execution
Device used: Redminote 10S Android 13
App Component: Workspace Settings

Action Performed:

Pre-condition: Keep tags and category features enabled

1. Launch app
2. Go to workspace settings
3. Tap categories
4. Add a category - <{search}> & save
5. Note no error is shown
6. Go to tags
7. Add a tag - <{search}>
8. Note 2 errors are shown
   An error occurred while updating tag, please try again
   Below empty toggle another error- oops, format of tag invalid please don't use special characters.
9. Try to close both the error tapping cross button
   Note first error is closed & second error cannot be dismissed
10. Go back and reopen tags page
    Note all errors are cleared now

Expected Result:

Special character validation should be consistent for both category and tag names.

If <{search}> is considered invalid:
An appropriate validation error should be shown for both.

All error messages should be dismissible using the close (✕) button.

Actual Result:

Category name <{search}> is saved successfully without any error.

Tag name <{search}> shows two errors:
“An error occurred while updating tag, please try again”

“Oops, format of tag invalid please don't use special characters”

The first error can be dismissed, but the second error cannot be closed using the cross (✕) button.
Errors are cleared only after navigating away from the Tags page and reopening it.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022016328956138377474
• Upwork Job ID: 2016328956138377474
• Last Price Increase: 2026-03-09

Issue Owner

Current Issue Owner: @daledah

[melvin-bot]

Triggered auto assignment to @johncschuster (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.

[daledah]

Proposal

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

There are two separate issues:

Inconsistent validation between category and tag names: Category name <{search}> is saved successfully, but the same name for tags shows errors.

The second error can only be cleared by navigating away and reopening the Tags page.

What is the root cause of that problem?

Inconsistent validation

Looking at the client-side validation:

Category validation (CategoryForm.tsx):

App/src/pages/workspace/categories/CategoryForm.tsx

Lines 40 to 57 in e94f05d

	const validate = useCallback(
	(values: FormOnyxValues<typeof ONYXKEYS.FORMS.WORKSPACE_CATEGORY_FORM>) => {
	const errors: FormInputErrors<typeof ONYXKEYS.FORMS.WORKSPACE_CATEGORY_FORM> = {};
	const newCategoryName = values.categoryName.trim();
	if (!isRequiredFulfilled(newCategoryName)) {
	errors.categoryName = translate('workspace.categories.categoryRequiredError');
	} else if (policyCategories?.[newCategoryName]) {
	errors.categoryName = translate('workspace.categories.existingCategoryError');
	} else if (newCategoryName === CONST.INVALID_CATEGORY_NAME) {
	errors.categoryName = translate('workspace.categories.invalidCategoryName');
	} else if ([...newCategoryName].length > CONST.API_TRANSACTION_CATEGORY_MAX_LENGTH) {
	// Uses the spread syntax to count the number of Unicode code points instead of the number of UTF-16 code units.
	addErrorMessage(errors, 'categoryName', translate('common.error.characterLimitExceedCounter', [...newCategoryName].length, CONST.API_TRANSACTION_CATEGORY_MAX_LENGTH));
	}
	return errors;
	},

• Validates: empty name, duplicate name, invalid name constant, character limit
• Does NOT validate special characters

Tag validation (WorkspaceCreateTagPage.tsx):

App/src/pages/workspace/tags/WorkspaceCreateTagPage.tsx

Lines 40 to 59 in e94f05d

	const validate = useCallback(
	(values: FormOnyxValues<typeof ONYXKEYS.FORMS.WORKSPACE_TAG_FORM>) => {
	const errors: FormInputErrors<typeof ONYXKEYS.FORMS.WORKSPACE_TAG_FORM> = {};
	const tagName = escapeTagName(values.tagName.trim());
	const {tags} = getTagList(policyTags, 0);
	if (!isRequiredFulfilled(tagName)) {
	errors.tagName = translate('workspace.tags.tagRequiredError');
	} else if (tagName === '0') {
	errors.tagName = translate('workspace.tags.invalidTagNameError');
	} else if (tags?.[tagName]) {
	errors.tagName = translate('workspace.tags.existingTagError');
	} else if ([...tagName].length > CONST.API_TRANSACTION_TAG_MAX_LENGTH) {
	// Uses the spread syntax to count the number of Unicode code points instead of the number of UTF-16 code units.
	addErrorMessage(errors, 'tagName', translate('common.error.characterLimitExceedCounter', [...tagName].length, CONST.API_TRANSACTION_TAG_MAX_LENGTH));
	}
	return errors;
	},
	[policyTags, translate],

• Validates: empty name, name equals "0", duplicate name, character limit
• Does NOT validate special characters

Neither validates special characters on the client side. However, the backend validates and rejects special characters for tags but NOT for categories. This inconsistency causes the discrepancy.

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

For Issue (Validation consistency):

The fix is simple - enable this prop in WorkspaceCreateTagPage.tsx:

--- a/src/pages/workspace/tags/WorkspaceCreateTagPage.tsx
+++ b/src/pages/workspace/tags/WorkspaceCreateTagPage.tsx
@@ -87,6 +87,7 @@ function WorkspaceCreateTagPage({route}: WorkspaceCreateTagPageProps) {
                 <FormProvider
                     ...
+                    shouldUseStrictHtmlTagValidation
                     addBottomSafeAreaPadding
                 >

App/src/components/Form/FormProvider.tsx

Lines 97 to 98 in d95d24d

	/** Use stricter HTML-like tag validation (e.g. blocks <✓>, <123>). */
	shouldUseStrictHtmlTagValidation?: boolean;

Or add validation in WorkspaceCreateTagPage.tsx:

// Add this validation check in the validate function
const invalidCharactersRegex = CONST.REGEX.SPECIAL_CHAR;
if (invalidCharactersRegex.test(tagName)) {
    errors.tagName = translate('common.error.invalidCharacter');
}

Note: we should do the same with other places that have the same problem

Optional: we can add the fallback value for the tag name as "" here to fix the non-dismissible error

App/src/pages/workspace/tags/WorkspaceTagsPage.tsx

Lines 266 to 269 in d95d24d

	return Object.values(policyTagLists?.at(0)?.tags ?? {}).map((tag) => ({
	value: tag.name,
	text: getCleanedTagName(tag.name),
	keyForList: tag.name,

What alternative solutions did you explore? (Optional)

[annaweber830]

Proposal

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

Category and tag names handle “special character”/HTML-like inputs inconsistently. A value like <{search}> can be saved as a category with no warning, but is rejected as a tag with multiple errors—one of which can’t be dismissed via the ✕ button.

What is the root cause of that problem?

• Missing strict “HTML-like” input validation on these forms: Tags and categories both allow values like <{search}> to be submitted because the forms don’t enable the stricter <...> detection.
• Backend behavior differs once the invalid value is submitted: The tags flow rejects the value and returns errors, while the categories flow allows it (or doesn’t error in the same way). That’s why users see “category saved” but “tag failed.”
• The undismissible message comes from an error state that isn’t being cleared by the ✕ handler: dismiss clears one error source, but the “invalid format” message is stored/displayed from a different error field, so it persists until leaving and reopening the page.

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

• Standardize validation by applying the same strict HTML-like tag validation to both tag and category name forms so <{search}> (and similar) is blocked consistently before submission.
• Make all tag errors dismissible by ensuring the tag-row error dismiss handler always clears the underlying error state when ✕ is pressed (so it doesn’t depend on unrelated conditions).
  

  App/src/pages/workspace/categories/CategoryForm.tsx

  Lines 70 to 80 in eafbcff

  	<FormProvider
  	formID={ONYXKEYS.FORMS.WORKSPACE_CATEGORY_FORM}
  	onSubmit={submit}
  	submitButtonText={translate('common.save')}
  	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
  	validate={validateEdit || validate}
  	style={[styles.mh5, styles.flex1]}
  	enabledWhenOffline
  	shouldHideFixErrorsAlert
  	addBottomSafeAreaPadding
  	>

<FormProvider
            formID={ONYXKEYS.FORMS.WORKSPACE_CATEGORY_FORM}
            onSubmit={submit}
            submitButtonText={translate('common.save')}
            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
            validate={validateEdit || validate}
            style={[styles.mh5, styles.flex1]}
            enabledWhenOffline
            shouldHideFixErrorsAlert
            shouldUseStrictHtmlTagValidation
            addBottomSafeAreaPadding
        >

App/src/pages/workspace/tags/EditTagPage.tsx

Lines 101 to 110 in eafbcff

	<FormProvider
	formID={ONYXKEYS.FORMS.WORKSPACE_TAG_FORM}
	onSubmit={editTag}
	submitButtonText={translate('common.save')}
	validate={validate}
	style={[styles.mh5, styles.flex1]}
	enabledWhenOffline
	shouldHideFixErrorsAlert
	addBottomSafeAreaPadding
	>

<FormProvider
                    formID={ONYXKEYS.FORMS.WORKSPACE_TAG_FORM}
                    onSubmit={editTag}
                    submitButtonText={translate('common.save')}
                    validate={validate}
                    style={[styles.mh5, styles.flex1]}
                    enabledWhenOffline
                    shouldHideFixErrorsAlert
                    shouldUseStrictHtmlTagValidation
                    addBottomSafeAreaPadding
                >

App/src/pages/workspace/tags/WorkspaceCreateTagPage.tsx

Lines 87 to 96 in eafbcff

	<FormProvider
	formID={ONYXKEYS.FORMS.WORKSPACE_TAG_FORM}
	onSubmit={createTag}
	submitButtonText={translate('common.save')}
	validate={validate}
	style={[styles.mh5, styles.flex1]}
	enabledWhenOffline
	shouldHideFixErrorsAlert
	addBottomSafeAreaPadding
	>

<FormProvider
                    formID={ONYXKEYS.FORMS.WORKSPACE_TAG_FORM}
                    onSubmit={createTag}
                    submitButtonText={translate('common.save')}
                    validate={validate}
                    style={[styles.mh5, styles.flex1]}
                    enabledWhenOffline
                    shouldHideFixErrorsAlert
                    shouldUseStrictHtmlTagValidation
                    addBottomSafeAreaPadding
                >

App/src/pages/workspace/tags/WorkspaceEditTagsPage.tsx

Lines 93 to 102 in eafbcff

	<FormProvider
	style={[styles.flexGrow1, styles.ph5]}
	formID={ONYXKEYS.FORMS.POLICY_TAG_NAME_FORM}
	onSubmit={updateTagListName}
	validate={validateTagName}
	submitButtonText={translate('common.save')}
	enabledWhenOffline
	shouldHideFixErrorsAlert
	addBottomSafeAreaPadding
	>

<FormProvider
                    style={[styles.flexGrow1, styles.ph5]}
                    formID={ONYXKEYS.FORMS.POLICY_TAG_NAME_FORM}
                    onSubmit={updateTagListName}
                    validate={validateTagName}
                    submitButtonText={translate('common.save')}
                    enabledWhenOffline
                    shouldHideFixErrorsAlert
                    shouldUseStrictHtmlTagValidation
                    addBottomSafeAreaPadding
                >

App/src/pages/workspace/tags/WorkspaceTagsPage.tsx

Lines 770 to 792 in eafbcff

	<SelectionListWithModal
	data={filteredTagList}
	ListItem={TableListItem}
	selectedItems={selectedTags}
	onSelectRow={navigateToTagSettings}
	canSelectMultiple={canSelectMultiple}
	onSelectAll={filteredTagList.length > 0 ? toggleAllTags : undefined}
	customListHeader={filteredTagList.length > 0 ? getCustomListHeader() : undefined}
	onDismissError={(item) => !hasDependentTags && clearPolicyTagErrors({policyID, tagName: item.value, tagListIndex: 0, policyTags})}
	style={{listHeaderWrapperStyle: [styles.ph9, styles.pv3, styles.pb5]}}
	shouldPreventDefaultFocusOnSelectRow={!canUseTouchScreen()}
	onTurnOnSelectionMode={(item) => item && toggleTag(item)}
	turnOnSelectionModeOnLongPress={!hasDependentTags}
	shouldSingleExecuteRowSelect={!canSelectMultiple}
	shouldUseDefaultRightHandSideCheckmark={false}
	customListHeaderContent={headerContent}
	showListEmptyContent={false}
	showScrollIndicator={false}
	onCheckboxPress={toggleTag}
	isSelected={isTagSelected}
	shouldHeaderBeInsideList
	shouldShowRightCaret
	/>

<SelectionListWithModal
                            data={filteredTagList}
                            ListItem={TableListItem}
                            selectedItems={selectedTags}
                            onSelectRow={navigateToTagSettings}
                            canSelectMultiple={canSelectMultiple}
                            onSelectAll={filteredTagList.length > 0 ? toggleAllTags : undefined}
                            customListHeader={filteredTagList.length > 0 ? getCustomListHeader() : undefined}
                            onDismissError={(item) => clearPolicyTagErrors({policyID, tagName: item.value, tagListIndex: 0, policyTags})}
                            style={{listHeaderWrapperStyle: [styles.ph9, styles.pv3, styles.pb5]}}
                            shouldPreventDefaultFocusOnSelectRow={!canUseTouchScreen()}
                            onTurnOnSelectionMode={(item) => item && toggleTag(item)}
                            turnOnSelectionModeOnLongPress={!hasDependentTags}
                            shouldSingleExecuteRowSelect={!canSelectMultiple}
                            shouldUseDefaultRightHandSideCheckmark={false}
                            customListHeaderContent={headerContent}
                            showListEmptyContent={false}
                            showScrollIndicator={false}
                            onCheckboxPress={toggleTag}
                            isSelected={isTagSelected}
                            shouldHeaderBeInsideList
                            shouldShowRightCaret
                        />

What alternative solutions did you explore? (Optional)

[yatin-italy]

Proposal

Restate the problem this issue is trying to solve.
Category creation accepts <{search}> while tag creation rejects it with non-dismissible errors; validation is inconsistent and stale tag errors persist unless navigating away.

What is the root cause of that problem?
The policy creation actions send names with special characters to the API without shared-layer validation; tags are rejected server-side leaving Onyx errors that aren’t cleared, and categories pass through unvalidated.

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

File: src/libs/actions/Policy/Tag.ts
Workspace category and tag creation must reject names containing CONST.REGEX.SPECIAL_CHAR before any optimistic write and must clear related tag errors when blocked.

Fix in action owners added a preflight guard in createPolicyTag and createPolicyCategory; when the tag guard trips, also clear existing tag errors for that name to avoid non-dismissible banners; reuse existing regex and Onyx error helpers.

@@ createPolicyTag(policyID, tagName, policyTags = {})
+    const normalizedTagName = tagName.trim();
+    if (CONST.REGEX.SPECIAL_CHAR.test(normalizedTagName)) {
+        clearPolicyTagErrors({policyID, tagName: normalizedTagName, tagListIndex: 0, policyTags});
+        FormActions.setErrors(ONYXKEYS.FORMS.WORKSPACE_TAG_FORM, {tagName: translateLocal('workspace.tags.invalidTagNameError')});
+        return;
+    }
-    const newTagName = PolicyUtils.escapeTagName(tagName);
+    const newTagName = PolicyUtils.escapeTagName(normalizedTagName);

@@ imports
+import * as FormActions from '@libs/actions/FormActions';
+import {translateLocal} from '@libs/Localize';

File: src/libs/actions/Policy/Category.ts

@@ createPolicyCategory(policyID, categoryName, ...)
+    const normalizedCategoryName = categoryName.trim();
+    if (CONST.REGEX.SPECIAL_CHAR.test(normalizedCategoryName)) {
+        FormActions.setErrors(ONYXKEYS.FORMS.WORKSPACE_CATEGORY_FORM, {categoryName: translateLocal('workspace.categories.invalidCategoryName')});
+        return;
+    }
-    const onyxData = buildOptimisticPolicyCategories(policyID, [categoryName]);
+    const onyxData = buildOptimisticPolicyCategories(policyID, [normalizedCategoryName]);

@@ request payload
-        categories: JSON.stringify([{name: categoryName}]),
+        categories: JSON.stringify([{name: normalizedCategoryName}]),

@@ imports
+import * as FormActions from '@libs/actions/FormActions';
+import {translateLocal}from '@libs/Localize';

What alternative solutions did you explore? (Optional)
None

[melvin-bot]

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

[melvin-bot]

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