[Due for payment 2026-02-17] [$250] Dev: The Add category page reopens after saving New Category with the Enter/Return key

[m-natarajan]

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:
Reproducible in staging?: Needs Reproduction (Unable to reproduce)
Reproducible in production?: Needs Reproduction
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @linhvovan29546
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. Open Workspace > Categories page
2. Open Add category page
3. Type a category name.
4. Press Enter(Return) on the keyboard to save.

Expected Result:

The new category is saved and the Add category page closes

Actual Result:

The new category is saved, but the Add category page reopens.

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Screenshots/Videos

Screen.Recording.2025-12-29.at.15.09.35.mov

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022005974533952142226
• Upwork Job ID: 2005974533952142226
• Last Price Increase: 2026-01-06

Issue Owner

Current Issue Owner: @garrettmknight

[melvin-bot]

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

[nkdengineer]

Proposal

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

The new category is saved, but the Add category page reopens.

What is the root cause of that problem?

The bug happens with IME languages

When pressing Enter with Simple Telex (E.g Vietnamese IME) on the Create Category page:

1. Form submission: Enter submits the form, which calls Navigation.goBack() to return to the categories page.

2. Event propagation: The Enter key event can bubble or be queued, and after navigation, the "Add Category" button receives it.

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

Line 533 in a1fa8dc

onPress={navigateToCreateCategoryPage}

So the category page is opened again

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

We already have the isEnterWhileComposition function to check the composition enter key event

App/src/libs/KeyboardShortcut/isEnterWhileComposition.ts

Line 10 in a1fa8dc

const isEnterWhileComposition = (event: KeyboardEvent | React.KeyboardEvent): boolean => {

We can use this to prevent the button from triggering the onPress callback in this case

// Prevent triggering the button when Enter is pressed during IME composition (e.g., Vietnamese input methods)
    if (event instanceof KeyboardEvent && isEnterWhileComposition(event)) {
        return false;
    }

App/src/components/Button/validateSubmitShortcut/index.ts

Line 13 in a1fa8dc

const validateSubmitShortcut: ValidateSubmitShortcut = (isDisabled, isLoading, event) => {

What alternative solutions did you explore? (Optional)

NA

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.

[melvin-bot]

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

[melvin-bot]

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

[yatin-italy]

Proposal

Problem Statement

When adding a new category using an Input Method Editor (IME) such as Vietnamese Telex, the Add Category page unexpectedly reopens (or fails to close properly) after saving.

Specifically, pressing Enter to confirm the IME text composition also triggers a form submission. As a result, the category is saved, but the Add Category page is reopened immediately afterward instead of returning the user to the Categories list.

---

Root Cause

The issue occurs because the Enter key used to confirm IME composition is treated as a submit shortcut:

• Form submission:
  The Enter key triggers form submission via the KeyboardShortcut listener in the Button component, which is used by FormWrapper.

• Event propagation:
  The Enter key event can bubble or be queued. Since the form submits and navigates back immediately, the same event (or a subsequent one) is handled by the Add Category button on WorkspaceCategoriesPage, causing the page to reopen.

---

Proposed Changes

Update the validateSubmitShortcut utility to ignore submit shortcuts triggered during IME composition. This prevents the “composition confirmation Enter” from submitting the form.

Modify

src/components/Button/validateSubmitShortcut/index.ts

Changes

• Import isEnterWhileComposition from @libs/KeyboardShortcut/isEnterWhileComposition.
• If the event is a KeyboardEvent and isEnterWhileComposition(event) returns true, return false to prevent the shortcut from triggering.

import isEnterWhileComposition from '@libs/KeyboardShortcut/isEnterWhileComposition';
// ... other imports

const validateSubmitShortcut: ValidateSubmitShortcut = (isDisabled, isLoading, event) => {
    const eventTarget = event?.target as HTMLInputElement;

    // Prevent triggering submit when Enter is pressed during IME composition
    if (event instanceof KeyboardEvent && isEnterWhileComposition(event)) {
        return false;
    }

    if (
        isDisabled ||
        // ... existing checks
    ) {
        return false;
    }

    event?.preventDefault();
    return true;
};

[Uzaifm127]

@m-natarajan I'm not able to reproduce this issue on staging, production and dev. I think it isn't reproducible.