[$250] [Due for payment 2025-10-15] Workspace - Able to create new Workspace with invalid currency

[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.2.1-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: #68526
Email or phone of affected tester (no customers): applausetester+ndk17@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: Windows 11 Home/Chrome
App Component: Workspace Settings

Action Performed:

1. Open https://staging.new.expensify.com/
2. Click on 'Workspace' tab
3. Click on 'New workspace' button
4. Click on 'Default currency'
5. Enter any invalid currency
6. Press enter on the keyboard

Expected Result:

User presses on Enter should not create new workspace

Actual Result:

A new workspace is created and user is redirected to 'Confirm Workspace' RHN page

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

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021977700103177940710
• Upwork Job ID: 1977700103177940710
• Last Price Increase: 2025-10-13

[melvin-bot]

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

[Eskalifer1]

Proposal

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

Workspace - Able to create new Workspace with invalid currency

What is the root cause of that problem?

Currency is now just a modal window, and in this case, when we press Enter, the form is submitted because this component is inside the form:

App/src/components/WorkspaceConfirmationForm.tsx

Lines 140 to 156 in 6517be6

	<FormProvider
	formID={ONYXKEYS.FORMS.WORKSPACE_CONFIRMATION_FORM}
	submitButtonText={translate('common.confirm')}
	style={[styles.flexGrow1, styles.ph5]}
	scrollContextEnabled
	validate={validate}
	onSubmit={(val) =>
	onSubmit({
	name: val[INPUT_IDS.NAME],
	currency: val[INPUT_IDS.CURRENCY],
	avatarFile,
	policyID,
	})
	}
	enabledWhenOffline
	addBottomSafeAreaPadding
	>

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

We need to add the prop disablePressOnEnter with a value of true when the modal is open. This value can be obtained, for example, using ref or some other method that can be discussed during PR stage(Maybe we already have that logic somewhere in the project).

Or we can totally disable this feature if needed

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)

We Can move this component to another page, so we get rid of all errors related to currency picker like we have it in Workspace Overview page
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.

[ganzz4]

Proposal

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

When creating a new workspace, if a user clicks on the "Default currency" field and types an invalid currency in the search input, pressing Enter incorrectly creates a new workspace with the default currency instead of doing nothing. The expected behavior is that pressing Enter with an invalid currency should not trigger workspace creation.

What is the root cause of that problem?

The root cause is in the BaseSelectionList.tsx component's Enter key handling logic. When a user types an invalid currency:

1. The currency list gets filtered and becomes empty (allOptions.length = 0)
2. However, focusedIndex doesn't update immediately and remains at its previous value (e.g., 0)
3. This creates a race condition where flattenedSections.allOptions.at(focusedIndex) returns undefined
4. The complex bubbling condition !flattenedSections.allOptions.at(focusedIndex) || focusedIndex === -1 evaluates to true because the element is undefined
5. The Enter shortcut becomes inactive due to isActive: focusedIndex >= 0 condition, but the event still bubbles due to shouldBubble: true
6. The parent workspace form receives the Enter event and triggers form submission

Current problematic code:

App/src/components/SelectionList/BaseSelectionList.tsx

Lines 928 to 935 in f20a6b8

	/** Selects row when pressing Enter */
	useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ENTER, selectFocusedOption, {
	captureOnInputs: true,
	shouldBubble: !flattenedSections.allOptions.at(focusedIndex) || focusedIndex === -1,
	shouldStopPropagation,
	shouldPreventDefault,
	isActive: !disableKeyboardShortcuts && !disableEnterShortcut && isFocused && focusedIndex >= 0,
	});

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

Option 1: Always prevent bubbling

Change the shouldBubble property to always false to prevent the race condition in the Enter key shortcut:

Fixed code:

    shouldBubble: false,

App/src/components/SelectionList/BaseSelectionList.tsx

Line 931 in f20a6b8

shouldBubble: !flattenedSections.allOptions.at(focusedIndex) || focusedIndex === -1,

This change aligns with the existing pattern used in similar components. For example, SearchList already follows this approach:

App/src/components/Search/SearchList/BaseSearchList/index.tsx

Lines 89 to 95 in f20a6b8

	useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ENTER, selectFocusedOption, {
	captureOnInputs: true,
	shouldBubble: false,
	shouldPreventDefault: false,
	isActive: isFocused && focusedIndex >= 0,
	shouldStopPropagation: true,
	});

Option 2 (Alternative): Fix the conditional logic

Alternatively, we could fix the existing conditional bubbling logic to avoid the race condition:

Fixed code:

    shouldBubble: focusedIndex < 0,

OR we can keep only the second part of the original condition:

Fixed code:

    shouldBubble: focusedIndex === -1,

App/src/components/SelectionList/BaseSelectionList.tsx

Line 931 in f20a6b8

shouldBubble: !flattenedSections.allOptions.at(focusedIndex) || focusedIndex === -1,

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

N/A, UI issue

What alternative solutions did you explore? (Optional)

We can apply same fix to CTRL+Enter: The CTRL+Enter shortcut has the same complex condition that could be simplified to shouldBubble: false or shouldBubble: focusedIndex < 0 or shouldBubble: focusedIndex === -1 for consistency.

App/src/components/SelectionList/BaseSelectionList.tsx

Line 950 in f20a6b8

shouldBubble: !flattenedSections.allOptions.at(focusedIndex) || focusedIndex === -1,

Result:

fix.mp4

[melvin-bot]

Unable to auto-create job on Upwork. The BZ team member should create it manually for this issue.

[melvin-bot]

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

[abzokhattab]

🚨 Edited by proposal-police: This proposal was edited at 2025-09-10 05:28:25 UTC.

Copied proposal from #69963

Proposal

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

Workspace - Workspace is created when tapping enter on currency selector page

What is the root cause of that problem?

The issue is in the BaseSelectionList component's Enter key handling. When there are no search results (empty flattenedSections.allOptions), the shouldBubble condition in the useKeyboardShortcut hook evaluates to true, causing the Enter key event to bubble up to the parent form and trigger workspace creation.

The problematic condition:

App/src/components/SelectionList/BaseSelectionList.tsx

Line 924 in c32d58d

shouldBubble: !flattenedSections.allOptions.at(focusedIndex) || focusedIndex === -1,

App/src/components/SelectionList/BaseSelectionList.tsx

Line 943 in c32d58d

shouldBubble: !flattenedSections.allOptions.at(focusedIndex) || focusedIndex === -1,

When flattenedSections.allOptions is empty, flattenedSections.allOptions.at(focusedIndex) returns undefined, making the condition true and allowing the event to bubble up.

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

Modify the shouldBubble condition in both Enter key shortcuts in BaseSelectionList to prevent bubbling when there are no options available:

shouldBubble: (!flattenedSections.allOptions.at(focusedIndex) || focusedIndex === -1) && flattenedSections.allOptions.length > 0

or

shouldBubble: (flattenedSections.allOptions.length > 0 && !flattenedSections.allOptions.at(focusedIndex)) || focusedIndex === -1,

This ensures that when there are no search results, the Enter key event is captured and doesn't bubble up to trigger form submission.

Optional we can enable this behavior only if the canSelectMultiple is false .. so that its only enabled with a single selection.

Result:

Screen.Recording.2025-09-05.at.18.18.22.mov

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

NA

What alternative solutions did you explore? (Optional)

• Create a standalone currency selection page inspired by the existing OnboardingWorkspaceCurrency page pattern
• Create CurrencySelectionPage component modeled after BaseOnboardingWorkspaceCurrency.tsx
• Add setWorkspaceConfirmationCurrency action similar to setWorkspaceCurrency in onboarding
• Update WorkspaceConfirmationForm to use the new page-based picker instead of modal
• Add proper routes and navigation configuration
• Uses useIsFocused to detect when user returns from currency selection
• Uses useOnyx to store for draft form changes and update input

POC:

type CurrencySelectionPageProps = {
    route: {
        params: {
            excludeCurrencies?: string[];
            headerContent?: string;
            selectedCurrency?: string;
        };
    };
};

function CurrencySelectionPage({route}: CurrencySelectionPageProps) {
    const styles = useThemeStyles();
    const {translate} = useLocalize();
    const {excludeCurrencies = [], selectedCurrency} = route.params;

    const goBack = useCallback(() => {
        Navigation.goBack();
    }, []);

    const updateInput = useCallback(
        (item: CurrencyListItem) => {
            // Set the selected currency in the draft form
            setWorkspaceConfirmationCurrency(item.currencyCode);
            goBack();
        },
        [goBack],
    );

    return (
        <ScreenWrapper
            enableEdgeToEdgeBottomSafeAreaPadding
            shouldEnableMaxHeight
            testID={CurrencySelectionPage.displayName}
        >
            <HeaderWithBackButton
                title={translate('common.currency')}
                onBackButtonPress={goBack}
            />
            <View style={[styles.mh5, styles.mb5]}>
                <Text style={styles.textHeadlineH1}>{translate('common.currency')}</Text>
            </View>
            <CurrencySelectionList
                initiallySelectedCurrencyCode={selectedCurrency}
                onSelect={updateInput}
                searchInputLabel={translate('common.search')}
                excludedCurrencies={excludeCurrencies}
                addBottomSafeAreaPadding
            />
        </ScreenWrapper>
    );
}

CurrencySelectionPage.displayName = 'CurrencySelectionPage';
export default CurrencySelectionPage;

also create this compoennt

type WorkspaceCurrencyPickerProps = {
    /** Label for the input */
    label: string;

    /** Current value of the selected item */
    value?: string;

    /** Form Error description */
    errorText?: string;

    /** Callback when the list item is selected */
    onInputChange?: (value: string, key?: string) => void;

    /** Callback to call when the picker modal is dismissed */
    onBlur?: () => void;

    /** Any additional styles to apply on the outer element */
    style?: StyleProp<ViewStyle>;
};

function WorkspaceCurrencyPicker({label, value, errorText, style, onInputChange, onBlur}: WorkspaceCurrencyPickerProps) {
    const didOpenCurrencySelector = useRef(false);
    const isFocused = useIsFocused();
    const [draftValues] = useOnyx(ONYXKEYS.FORMS.WORKSPACE_CONFIRMATION_FORM_DRAFT, {canBeMissing: true});

    // eslint-disable-next-line rulesdir/prefer-early-return
    useEffect(() => {
        if (draftValues?.currency) {
            onInputChange?.(draftValues.currency);
        }
        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
    }, [draftValues?.currency]);

    useEffect(() => {
        if (!isFocused || !didOpenCurrencySelector.current) {
            return;
        }
        didOpenCurrencySelector.current = false;
        onBlur?.();
    }, [isFocused, onBlur]);

    return (
        <MenuItemWithTopDescription
            shouldShowRightIcon
            title={value ? `${value} - ${getCurrencySymbol(value)}` : undefined}
            description={label}
            brickRoadIndicator={errorText ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
            errorText={errorText}
            style={style}
            onPress={() => {
                didOpenCurrencySelector.current = true;
                Navigation.navigate(
                    ROUTES.CURRENCY_SELECTION.getRoute({
                        selectedCurrency: value,
                    }),
                );
            }}
        />
    );
}

WorkspaceCurrencyPicker.displayName = 'WorkspaceCurrencyPicker';
export default WorkspaceCurrencyPicker;

• Then update the input component in the confirmation here to use the new picker
• other minor updates in the routes file and the function that sets the currency in the onyx values

[truph01]

@abzokhattab's proposal to prevent bubbling when there are no available options looks good to me!

I suggest we introduce a new flag to ensure this change doesn’t unintentionally break other features, since this component is used in many places throughout the app.

🎀 👀 🎀 C+ reviewed