[$250] Migrate NetSuiteCustomListSelectorModal to @react-navigation modal screen

[mountiny]

Context

This is a sub-issue of #53493 (Replace modal screens with modals from @react-navigation).

For full background and migration approach, see the triage analysis comment and the sub-issue breakdown comment.

Problem

NetSuiteCustomListSelectorModal is currently implemented using react-native-modal, which causes animation inconsistencies on native platforms.

Migration approach (Group 3 — Write to known form draft)

Used via InputWrapper in only one place with a known formID/inputID. The new navigation page writes directly to the Onyx form draft, and FormProvider merges it reactively.

• File: src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteCustomListSelectorModal.tsx
• Used by: Only NetSuiteCustomListPicker → ChooseCustomListStep.tsx
• On select: onCustomListSelected(item) → onInputChange(item.value) + onInputChange(item.id, internalIDInputID)
• State destination: Form NETSUITE_CUSTOM_LIST_ADD_FORM, fields listName and internalID

Steps

1. Create a new @react-navigation modal route for NetSuite custom list selection.
2. Extract the modal content into a standalone screen component.
3. On selection, the screen writes directly to NETSUITE_CUSTOM_LIST_ADD_FORM form draft fields listName and internalID via Onyx, then navigates back.
4. Replace the <NetSuiteCustomListSelectorModal /> usage with a navigation call.
5. Test the NetSuite custom list import flow on iOS, Android, and web.

Reference

• Reference PR for this migration pattern: Migrate AmountSelectorModal to be nav RHP #90346
• Parent tracking issue: Replace modal screens with modals from @react-navigation #53493

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022054512672280874036
• Upwork Job ID: 2054512672280874036
• Last Price Increase: 2026-05-20

Issue Owner

Current Issue Owner: @trasnake87

[melvin-bot]

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

[melvin-bot]

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

[yuvrajangadsingh]

Proposal

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

NetSuiteCustomListSelectorModal is backed by react-native-modal (via the Modal wrapper in src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteCustomListSelectorModal.tsx), which causes animation inconsistencies on native platforms. It needs to be replaced with a proper @react-navigation modal screen.

What is the root cause of that problem?

The component renders <Modal type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}> which internally uses react-native-modal. The picker is opened via a useState flag in NetSuiteCustomListPicker.tsx:29 (isPickerVisible), and selection bubbles back through the onCustomListSelected callback, which then calls onInputChange twice (once for listName, once for internalID via internalIDInputID). All of that local state and callback plumbing goes away in the migration; the new screen writes directly to NETSUITE_CUSTOM_LIST_ADD_FORM_DRAFT via Onyx.merge and FormProvider in ChooseCustomListStep picks up the updated draft values reactively when navigation returns.

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

The fix touches about six places plus one new file.

In src/SCREENS.ts (around line 611), add a new screen constant next to NETSUITE_IMPORT_CUSTOM_LIST_ADD:

NETSUITE_IMPORT_CUSTOM_LIST_SELECTOR: 'Policy_Accounting_NetSuite_Import_Custom_List_Selector',

In src/ROUTES.ts (after the POLICY_ACCOUNTING_NETSUITE_IMPORT_CUSTOM_LIST_ADD block at line 3721), add a simple route:

POLICY_ACCOUNTING_NETSUITE_IMPORT_CUSTOM_LIST_SELECTOR: {
    route: 'workspaces/:policyID/accounting/netsuite/import/custom-list/selector',
    getRoute: (policyID: string) =>
        `workspaces/${policyID}/accounting/netsuite/import/custom-list/selector` as const,
},

In src/libs/Navigation/types.ts (near line 974), add param type [SCREENS.WORKSPACE.ACCOUNTING.NETSUITE_IMPORT_CUSTOM_LIST_SELECTOR]: { policyID: string }.

In src/libs/Navigation/linkingConfig/config.ts and src/libs/Navigation/linkingConfig/RELATIONS/WORKSPACE_TO_RHP.ts, add the new screen next to the existing NETSUITE_IMPORT_CUSTOM_LIST_ADD entries.

In src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx (near line 746), register the lazy import for the new page.

Create src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteCustomListSelectorPage.tsx. It reads policyID from useRoute params, loads policy via useOnyx, and reads the current draft listName from NETSUITE_CUSTOM_LIST_ADD_FORM_DRAFT to mark the selected item. The selection list and search filter logic can be lifted straight from NetSuiteCustomListSelectorModal.tsx. On row select, it calls:

Onyx.merge(ONYXKEYS.FORMS.NETSUITE_CUSTOM_LIST_ADD_FORM_DRAFT, {
    [INPUT_IDS.LIST_NAME]: item.value,
    [INPUT_IDS.INTERNAL_ID]: item.id,
});
Navigation.goBack();

Then wraps the content in ScreenWrapper with HeaderWithBackButton (same as the modal had).

Update NetSuiteCustomListPicker.tsx to remove the useState flag and NetSuiteCustomListSelectorModal import entirely. The onPress in MenuItemWithTopDescription (line 49) should instead call Navigation.navigate(ROUTES.POLICY_ACCOUNTING_NETSUITE_IMPORT_CUSTOM_LIST_SELECTOR.getRoute(policy?.id ?? '')). The onInputChange / internalIDInputID props can be dropped since the new page handles draft writes directly, but the value prop keeps working because FormProvider still reads from the draft.

Delete NetSuiteCustomListSelectorModal.tsx.

What alternative solutions did you explore? (Optional)

I considered keeping NetSuiteCustomListPicker as an InputComponent and wiring the returned navigation param (via Onyx or route param) back through onInputChange, but that's more plumbing than needed and is explicitly what the Group 3 pattern avoids. Writing straight to the form draft and letting FormProvider merge it reactively is cleaner and matches the existing pattern used elsewhere in the NetSuite import flow.

[MestreY0d4-Uninter]

🚫 Duplicated proposal withdrawn by 🤖 ProposalPolice.

[trasnake87]

Proposal

Migrate NetSuiteCustomListSelectorModal from react-native-modal (via the shared <Modal type={RIGHT_DOCKED}>) to a dedicated @react-navigation RHP screen so the NetSuite custom-list picker animates and stacks identically to the rest of the app.

Root cause

src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteCustomListSelectorModal.tsx:72-103 renders a RIGHT_DOCKED <Modal> whose visibility is driven by local useState in NetSuiteCustomListPicker (src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteCustomListPicker.tsx:29-63). On iOS and Android this routes through react-native-modal, which animates out of phase with @react-navigation RHPs (entering modal slides in, then a separate react-native-modal slides on top), and the modal is invisible to deep-linking and the back stack. The picker is a clean Group 3 case from the parent triage: a single InputWrapper render site (ChooseCustomListStep.tsx:49-55) writing to a known form (NETSUITE_CUSTOM_LIST_ADD_FORM) with two known fields (listName, internalID). The new page can write directly to the form draft and FormProvider in ChooseCustomListStep will pick it up reactively — no callback prop plumbing required.

Current offending code in NetSuiteCustomListSelectorModal.tsx:72-103:

return (
    <Modal
        type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
        isVisible={isVisible}
        onClose={onClose}
        onModalHide={onClose}
        onBackdropPress={onBackdropPress}
        enableEdgeToEdgeBottomSafeAreaPadding
    >
        <ScreenWrapper ... testID="NetSuiteCustomListSelectorModal">
            ...
            <SelectionList
                data={options}
                onSelectRow={onCustomListSelected}
                ...
            />
        </ScreenWrapper>
    </Modal>
);

And the picker in NetSuiteCustomListPicker.tsx:43-63 mounts the modal locally and toggles isPickerVisible, with Navigation.dismissModal wired to onBackdropPress (a no-op in the modal path because there is no nav modal in the stack).

Proposed fix

Apply the exact pattern from the reference PR #90346 (AmountSelectorModal → WorkspaceCreateTaxValuePage) and PR #88915 (ExpenseLimitTypeSelectorModal → DynamicExpenseLimitTypeSelectorPage).

1 — Register a new RHP route. Add to src/ROUTES.ts next to the existing POLICY_ACCOUNTING_NETSUITE_IMPORT_CUSTOM_LIST_ADD (line 3736):

// src/ROUTES.ts
POLICY_ACCOUNTING_NETSUITE_IMPORT_CUSTOM_LIST_SELECTOR: {
    route: 'workspaces/:policyID/accounting/netsuite/import/custom-list/new/list-selector',
    getRoute: (policyID: string | undefined) => {
        if (!policyID) {
            Log.warn('Invalid policyID is used to build the POLICY_ACCOUNTING_NETSUITE_IMPORT_CUSTOM_LIST_SELECTOR route');
        }
        return `workspaces/${policyID}/accounting/netsuite/import/custom-list/new/list-selector` as const;
    },
},

2 — Add the screen constant. In src/SCREENS.ts next to NETSUITE_IMPORT_CUSTOM_LIST_ADD (line 609):

// src/SCREENS.ts
NETSUITE_IMPORT_CUSTOM_LIST_SELECTOR: 'Policy_Accounting_NetSuite_Import_Custom_List_Selector',

3 — Register the page on the Settings modal stack. In src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx right after line 731:

[SCREENS.WORKSPACE.ACCOUNTING.NETSUITE_IMPORT_CUSTOM_LIST_SELECTOR]: () =>
    require<ReactComponentModule>('../../../../pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteCustomListSelectorPage').default,

4 — Wire linking + WORKSPACE_TO_RHP + types. Append to src/libs/Navigation/linkingConfig/RELATIONS/WORKSPACE_TO_RHP.ts after line 116 (NETSUITE_IMPORT_CUSTOM_LIST_ADD), to src/libs/Navigation/linkingConfig/config.ts after line 686, and to src/libs/Navigation/types.ts after line 993:

// linkingConfig/config.ts
[SCREENS.WORKSPACE.ACCOUNTING.NETSUITE_IMPORT_CUSTOM_LIST_SELECTOR]: {
    path: ROUTES.POLICY_ACCOUNTING_NETSUITE_IMPORT_CUSTOM_LIST_SELECTOR.route,
},

// Navigation/types.ts — inside SettingsNavigatorParamList
[SCREENS.WORKSPACE.ACCOUNTING.NETSUITE_IMPORT_CUSTOM_LIST_SELECTOR]: {
    policyID: string;
};

5 — Create the new page. Add src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteCustomListSelectorPage.tsx. It reads the policy via usePolicy(policyID), reads the current listName from the form draft, and on select writes both listName and internalID to the same draft, then goBack():

// src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteCustomListSelectorPage.tsx
import {Str} from 'expensify-common';
import React, {useMemo} from 'react';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import ScreenWrapper from '@components/ScreenWrapper';
import SelectionList from '@components/SelectionList';
import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
import useDebouncedState from '@hooks/useDebouncedState';
import useLocalize from '@hooks/useLocalize';
import useOnyx from '@hooks/useOnyx';
import usePolicy from '@hooks/usePolicy';
import {setDraftValues} from '@libs/actions/FormActions';
import Navigation from '@libs/Navigation/Navigation';
import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
import type {CustomListSelectorType} from '@pages/workspace/accounting/netsuite/types';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import type SCREENS from '@src/SCREENS';
import INPUT_IDS from '@src/types/form/NetSuiteCustomFieldForm';

type NetSuiteCustomListSelectorPageProps = PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.ACCOUNTING.NETSUITE_IMPORT_CUSTOM_LIST_SELECTOR>;

function NetSuiteCustomListSelectorPage({route: {params: {policyID}}}: NetSuiteCustomListSelectorPageProps) {
    const {translate} = useLocalize();
    const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState('');
    const policy = usePolicy(policyID);
    const [formDraft] = useOnyx(ONYXKEYS.FORMS.NETSUITE_CUSTOM_LIST_ADD_FORM_DRAFT);
    const currentCustomListValue = formDraft?.[INPUT_IDS.LIST_NAME] ?? '';

    const rawCustomLists = policy?.connections?.netsuite?.options?.data?.customLists;

    const {options, showTextInput} = useMemo(() => {
        const customLists = rawCustomLists ?? [];
        const customListData = customLists.map((customListRecord) => ({
            text: customListRecord.name,
            value: customListRecord.name,
            isSelected: customListRecord.name === currentCustomListValue,
            keyForList: customListRecord.name,
            id: customListRecord.id,
        }));
        const searchRegex = new RegExp(Str.escapeForRegExp(debouncedSearchValue.trim()), 'i');
        const filteredCustomLists = customListData.filter((customListRecord) => searchRegex.test(customListRecord.text ?? ''));
        const isEmpty = debouncedSearchValue.trim() && !filteredCustomLists.length;
        return {
            options: isEmpty ? [] : filteredCustomLists,
            showTextInput: customListData.length > CONST.STANDARD_LIST_ITEM_LIMIT,
        };
    }, [debouncedSearchValue, rawCustomLists, currentCustomListValue]);

    const textInputOptions = useMemo(
        () => ({
            value: searchValue,
            label: showTextInput ? translate('common.search') : undefined,
            onChangeText: setSearchValue,
            headerMessage: debouncedSearchValue.trim() && options.length === 0 ? translate('common.noResultsFound') : '',
        }),
        [searchValue, showTextInput, translate, setSearchValue, debouncedSearchValue, options.length],
    );

    const label = translate('workspace.netsuite.import.importCustomFields.customLists.fields.listName');

    const onSelectRow = (item: CustomListSelectorType) => {
        setDraftValues(ONYXKEYS.FORMS.NETSUITE_CUSTOM_LIST_ADD_FORM, {
            [INPUT_IDS.LIST_NAME]: item.value,
            [INPUT_IDS.INTERNAL_ID]: item.id,
        });
        Navigation.goBack();
    };

    return (
        <AccessOrNotFoundWrapper
            accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.CONTROL]}
            policyID={policyID}
            featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED}
        >
            <ScreenWrapper
                includePaddingTop={false}
                enableEdgeToEdgeBottomSafeAreaPadding
                testID={NetSuiteCustomListSelectorPage.displayName}
            >
                <HeaderWithBackButton
                    title={label}
                    shouldShowBackButton
                    onBackButtonPress={() => Navigation.goBack()}
                />
                <SelectionList
                    data={options}
                    textInputOptions={textInputOptions}
                    onSelectRow={onSelectRow}
                    ListItem={RadioListItem}
                    initiallyFocusedItemKey={currentCustomListValue}
                    shouldSingleExecuteRowSelect
                    shouldStopPropagation
                    addBottomSafeAreaPadding
                />
            </ScreenWrapper>
        </AccessOrNotFoundWrapper>
    );
}

NetSuiteCustomListSelectorPage.displayName = 'NetSuiteCustomListSelectorPage';

export default NetSuiteCustomListSelectorPage;

6 — Replace the picker body. Replace the entire content of src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteCustomListPicker.tsx with a stateless picker that navigates. The policy prop is retained only to derive policyID for the route; the value/internalIDInputID/onInputChange props become unused because FormProvider already merges the draft fields written by the new page:

// src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteCustomListPicker.tsx
import React from 'react';
import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
import useLocalize from '@hooks/useLocalize';
import Navigation from '@libs/Navigation/Navigation';
import CONST from '@src/CONST';
import ROUTES from '@src/ROUTES';
import type {Policy} from '@src/types/onyx';

type NetSuiteCustomListPickerProps = {
    value?: string;
    policy?: Policy;
    errorText?: string;
};

function NetSuiteCustomListPicker({value, policy, errorText}: NetSuiteCustomListPickerProps) {
    const {translate} = useLocalize();
    const policyID = policy?.id;

    return (
        <MenuItemWithTopDescription
            shouldShowRightIcon
            title={value}
            description={translate('workspace.netsuite.import.importCustomFields.customLists.fields.listName')}
            onPress={() => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_NETSUITE_IMPORT_CUSTOM_LIST_SELECTOR.getRoute(policyID))}
            brickRoadIndicator={errorText ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
            errorText={errorText}
        />
    );
}

export default NetSuiteCustomListPicker;

7 — Drop the unused internalIDInputID prop from the InputWrapper. In src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/subPages/ChooseCustomListStep.tsx:49-55, remove the internalIDInputID={INPUT_IDS.INTERNAL_ID} prop since internalID is now written directly to the draft by the new page (FormProvider reads both fields back from NETSUITE_CUSTOM_LIST_ADD_FORM_DRAFT):

// src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/subPages/ChooseCustomListStep.tsx
<InputWrapper
    InputComponent={NetSuiteCustomListPicker}
    inputID={INPUT_IDS.LIST_NAME}
    policy={policy}
    defaultValue={netSuiteCustomFieldFormValues[INPUT_IDS.LIST_NAME]}
/>

8 — Delete NetSuiteCustomListSelectorModal.tsx entirely. The file is the only consumer of react-native-modal for this flow and has no other importers (verified via grep — only NetSuiteCustomListPicker.tsx:8 imports it).

Why this approach

This is the exact pattern Jan Musiał used for AmountSelectorModal → WorkspaceCreateTaxValuePage in #90346 (the reference PR called out in the issue) and ExpenseLimitTypeSelectorModal → DynamicExpenseLimitTypeSelectorPage in #88915, both merged. Group 3 specifically prescribes a draft-write rather than callback plumbing because FormProvider already merges NETSUITE_CUSTOM_LIST_ADD_FORM_DRAFT reactively — there is no need for state lifting (Group 2) or a dynamic route (the picker is reached from exactly one parent route, POLICY_ACCOUNTING_NETSUITE_IMPORT_CUSTOM_LIST_ADD, so a fixed sibling path with :policyID is cleaner than createDynamicRoute). The existing draft-clearing logic in NetSuiteImportAddCustomListContent.tsx:71,95 continues to handle teardown on submit/back, so no new useEffect cleanup is required on the selector page. The migration is fully reversible per-file: no shared component changes outside the picker and step, and no API or Onyx-key changes.

[github-actions]

⚠️ @MestreY0d4-Uninter Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.

[dilshodmackbook-sketch]

Proposal

What is the root cause of that problem?

NetSuiteCustomListSelectorModal is rendered through react-native-modal via the generic <Modal type={RIGHT_DOCKED}> wrapper, which is the source of the animation inconsistencies on native platforms tracked by parent issue #53493. The modal's visibility is owned locally by NetSuiteCustomListPicker (useState), and on selection it calls onInputChange twice through InputWrapper to update both listName and internalID in the same render — fine for state, but it keeps the picker bound to the modal lifecycle instead of the navigation stack.

Relevant code on main:

• Modal wrapper: https://github.com/Expensify/App/blob/main/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteCustomListSelectorModal.tsx#L72-L103
• Local visibility state + modal usage in the picker: https://github.com/Expensify/App/blob/main/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteCustomListPicker.tsx#L29-L61
• Consumer (single call site through InputWrapper): https://github.com/Expensify/App/blob/main/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/subPages/ChooseCustomListStep.tsx#L49-L55

The picker is used in exactly one place and writes to a known form (NETSUITE_CUSTOM_LIST_ADD_FORM, fields listName + internalID), so this falls cleanly under Group 3 — Write to known form draft from the parent breakdown.

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

I'd follow the same pattern as the AmountSelectorModal migration in #90346:

1. Register a new RHP route + screen for the selector:

• ROUTES.WORKSPACE_ACCOUNTING_NETSUITE_CUSTOM_LIST_SELECTOR → workspaces/:policyID/accounting/netsuite/import/custom-list/list-selector
• SCREENS.WORKSPACE.NETSUITE_CUSTOM_LIST_SELECTOR
• Wire it up in ModalStackNavigators/index.tsx, WORKSPACE_TO_RHP.ts, and linkingConfig/config.ts.

2. Create NetSuiteCustomListSelectorPage.tsx — the standalone screen. It reads the policy via useOnyx(ONYXKEYS.COLLECTION.POLICY, policyID), renders the same SelectionList + search that the modal had, and on row select writes both fields to the draft and goes back:

- const updateInput = (item: CustomListSelectorType) => {
-     onInputChange?.(item.value);
-     if (internalIDInputID) {
-         onInputChange(item.id, internalIDInputID);
-     }
-     hidePickerModal();
- };
+ const onSelectRow = (item: CustomListSelectorType) => {
+     setDraftValues(ONYXKEYS.FORMS.NETSUITE_CUSTOM_LIST_ADD_FORM, {
+         [INPUT_IDS.LIST_NAME]: item.value,
+         [INPUT_IDS.INTERNAL_ID]: item.id,
+     });
+     Navigation.goBack();
+ };

FormProvider is already subscribed to NETSUITE_CUSTOM_LIST_ADD_FORM_DRAFT, so the picker's displayed value updates reactively the moment we write the draft — no onInputChange plumbing required.

3. Slim down NetSuiteCustomListPicker.tsx — drop the local useState, the modal JSX, and the internalIDInputID/onInputChange props; it becomes just a navigator:

- function NetSuiteCustomListPicker({value, policy, internalIDInputID, errorText, onInputChange = () => {}}: NetSuiteCustomListPickerProps) {
-     const {translate} = useLocalize();
-     const [isPickerVisible, setIsPickerVisible] = useState(false);
-     ...
-     return (
-         <>
-             <MenuItemWithTopDescription ... onPress={() => setIsPickerVisible(true)} ... />
-             <NetSuiteCustomListSelectorModal isVisible={isPickerVisible} ... />
-         </>
-     );
- }
+ function NetSuiteCustomListPicker({value, policyID, errorText}: NetSuiteCustomListPickerProps) {
+     const {translate} = useLocalize();
+     return (
+         <MenuItemWithTopDescription
+             shouldShowRightIcon
+             title={value}
+             description={translate('workspace.netsuite.import.importCustomFields.customLists.fields.listName')}
+             onPress={() => Navigation.navigate(ROUTES.WORKSPACE_ACCOUNTING_NETSUITE_CUSTOM_LIST_SELECTOR.getRoute(policyID))}
+             brickRoadIndicator={errorText ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
+             errorText={errorText}
+         />
+     );
+ }

4. Update ChooseCustomListStep.tsx — pass policyID instead of policy/internalIDInputID to the picker (<InputWrapper InputComponent={NetSuiteCustomListPicker} inputID={INPUT_IDS.LIST_NAME} policyID={policyID} />). The form still owns LIST_NAME and INTERNAL_ID in STEP_FIELDS, so submission is unchanged.

5. Delete NetSuiteCustomListSelectorModal.tsx — the new page replaces it entirely.

The new page mirrors the modal's existing rendering (header, SelectionList, useDebouncedState search, STANDARD_LIST_ITEM_LIMIT threshold for textInputOptions, initiallyFocusedItemKey from the current draft value) — I'm just moving that JSX out of <Modal> and into a ScreenWrapper-rooted route.

What alternative solutions did you explore?

I considered keeping onInputChange plumbing and having the new screen call back into the picker via a useNavigationState hack, but that defeats the purpose of the migration — the whole point of Group 3 is to skip the callback chain and let FormProvider's draft subscription do the work. Writing directly to the draft is also consistent with the reference PR (#90346) and the other Group-3 siblings (e.g. #90472 for InitialListValueSelectorModal).](#90470)

[github-actions]

⚠️ @dilshodmackbook-sketch Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).