🍒 Cherry pick PR #93191 to staging 🍒

android/app/build.gradle

@@ -111,8 +111,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1009040204
-        versionName "9.4.2-4"
+        versionCode 1009040205
+        versionName "9.4.2-5"
         // Supported language variants must be declared here to avoid from being removed during the compilation.
         // This also helps us to not include unnecessary language variants in the APK.
         resConfigs "en", "es"

ios/NewExpensify/Info.plist

@@ -44,7 +44,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>9.4.2.4</string>
+	<string>9.4.2.5</string>
 	<key>FullStory</key>
 	<dict>
 		<key>OrgId</key>

ios/NotificationServiceExtension/Info.plist

@@ -13,7 +13,7 @@
 	<key>CFBundleShortVersionString</key>
 	<string>9.4.2</string>
 	<key>CFBundleVersion</key>
-	<string>9.4.2.4</string>
+	<string>9.4.2.5</string>
 	<key>NSExtension</key>
 	<dict>
 		<key>NSExtensionPointIdentifier</key>

ios/ShareViewController/Info.plist

@@ -13,7 +13,7 @@
 	<key>CFBundleShortVersionString</key>
 	<string>9.4.2</string>
 	<key>CFBundleVersion</key>
-	<string>9.4.2.4</string>
+	<string>9.4.2.5</string>
 	<key>NSExtension</key>
 	<dict>
 		<key>NSExtensionAttributes</key>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "9.4.2-4",
+  "version": "9.4.2-5",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

src/ROUTES.ts

@@ -821,10 +821,6 @@ const DYNAMIC_ROUTES = {
         entryScreens: [SCREENS.REPORT, SCREENS.RIGHT_MODAL.SEARCH_REPORT, SCREENS.RIGHT_MODAL.EXPENSE_REPORT, SCREENS.RIGHT_MODAL.SEARCH_MONEY_REQUEST_REPORT],
         getRoute: (reportID: string, reportActionID: string) => `flag/${reportID}/${reportActionID}`,
     },
-    WORKSPACE_REPORT_FIELDS_INITIAL_LIST_VALUE: {
-        path: 'initial-list-value',
-        entryScreens: [SCREENS.WORKSPACE.REPORT_FIELDS_CREATE],
-    },
 } as const satisfies DynamicRoutes;
 
 const ROUTES = {

src/SCREENS.ts

@@ -795,7 +795,6 @@ const SCREENS = {
         REPORT_FIELDS_VALUE_SETTINGS: 'Workspace_ReportFields_ValueSettings',
         REPORT_FIELDS_EDIT_VALUE: 'Workspace_ReportFields_EditValue',
         REPORT_FIELDS_EDIT_INITIAL_VALUE: 'Workspace_ReportFields_EditInitialValue',
-        DYNAMIC_REPORT_FIELDS_INITIAL_LIST_VALUE: 'Dynamic_Report_Fields_Initial_List_Value',
         TAX_EDIT: 'Workspace_Tax_Edit',
         TAX_NAME: 'Workspace_Tax_Name',
         TAX_VALUE: 'Workspace_Tax_Value',

src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx

@@ -995,8 +995,6 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     ),
     [SCREENS.SETTINGS.SUBSCRIPTION.ADD_PAYMENT_CARD]: withAgentAccessDenied(() => require<ReactComponentModule>('../../../../pages/settings/Subscription/PaymentCard').default),
     [SCREENS.WORKSPACE.REPORT_FIELDS_CREATE]: () => require<ReactComponentModule>('../../../../pages/workspace/reports/CreateReportFieldsPage').default,
-    [SCREENS.WORKSPACE.DYNAMIC_REPORT_FIELDS_INITIAL_LIST_VALUE]: () =>
-        require<ReactComponentModule>('../../../../pages/workspace/reports/InitialListValueSelector/DynamicReportFieldsInitialListValuePage').default,
     [SCREENS.WORKSPACE.REPORT_FIELDS_SETTINGS]: () => require<ReactComponentModule>('../../../../pages/workspace/reports/ReportFieldsSettingsPage').default,
     [SCREENS.WORKSPACE.REPORT_FIELDS_LIST_VALUES]: () => require<ReactComponentModule>('../../../../pages/workspace/reports/ReportFieldsListValuesPage').default,
     [SCREENS.WORKSPACE.REPORT_FIELDS_ADD_VALUE]: () => require<ReactComponentModule>('../../../../pages/workspace/reports/ReportFieldsAddListValuePage').default,

src/libs/Navigation/linkingConfig/RELATIONS/WORKSPACE_TO_RHP.ts

@@ -295,7 +295,6 @@ const WORKSPACE_TO_RHP: Partial<Record<keyof WorkspaceSplitNavigatorParamList, s
         SCREENS.WORKSPACE.REPORT_FIELDS_VALUE_SETTINGS,
         SCREENS.WORKSPACE.REPORT_FIELDS_EDIT_VALUE,
         SCREENS.WORKSPACE.REPORT_FIELDS_EDIT_INITIAL_VALUE,
-        SCREENS.WORKSPACE.DYNAMIC_REPORT_FIELDS_INITIAL_LIST_VALUE,
     ],
     [SCREENS.WORKSPACE.INVOICES]: [SCREENS.WORKSPACE.INVOICES_COMPANY_NAME, SCREENS.WORKSPACE.INVOICES_COMPANY_WEBSITE, SCREENS.WORKSPACE.INVOICES_VERIFY_ACCOUNT],
     [SCREENS.WORKSPACE.COMPANY_CARDS]: [

src/libs/Navigation/linkingConfig/config.ts

@@ -1191,7 +1191,6 @@ const config: LinkingOptions<RootNavigatorParamList>['config'] = {
                         [SCREENS.WORKSPACE.REPORT_FIELDS_CREATE]: {
                             path: ROUTES.WORKSPACE_CREATE_REPORT_FIELD.route,
                         },
-                        [SCREENS.WORKSPACE.DYNAMIC_REPORT_FIELDS_INITIAL_LIST_VALUE]: DYNAMIC_ROUTES.WORKSPACE_REPORT_FIELDS_INITIAL_LIST_VALUE.path,
                         [SCREENS.WORKSPACE.REPORT_FIELDS_LIST_VALUES]: {
                             path: ROUTES.WORKSPACE_REPORT_FIELDS_LIST_VALUES.route,
                         },

src/libs/Navigation/types.ts

@@ -644,9 +644,6 @@ type SettingsNavigatorParamList = {
     [SCREENS.WORKSPACE.REPORT_FIELDS_CREATE]: {
         policyID: string;
     };
-    [SCREENS.WORKSPACE.DYNAMIC_REPORT_FIELDS_INITIAL_LIST_VALUE]: {
-        policyID: string;
-    };
     [SCREENS.WORKSPACE.REPORT_FIELDS_LIST_VALUES]: {
         policyID: string;
         reportFieldID?: string;

src/pages/workspace/reports/InitialListValueSelector/InitialListValueSelectorModal.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import {View} from 'react-native';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import Modal from '@components/Modal';
+import ScreenWrapper from '@components/ScreenWrapper';
+import Text from '@components/Text';
+import useOnyx from '@hooks/useOnyx';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ReportFieldsInitialListValuePicker from './ReportFieldsInitialListValuePicker';
+
+type InitialListValueSelectorModalProps = {
+    /** Whether the modal is visible */
+    isVisible: boolean;
+
+    /** Selected value */
+    currentValue: string;
+
+    /** Label to display on field */
+    label: string;
+
+    /** Subtitle to display on field */
+    subtitle: string;
+
+    /** Function to call when the user selects a value */
+    onValueSelected: (value: string) => void;
+
+    /** Function to call when the user closes the value selector modal */
+    onClose: () => void;
+};
+
+function InitialListValueSelectorModal({isVisible, currentValue, label, subtitle, onValueSelected, onClose}: InitialListValueSelectorModalProps) {
+    const styles = useThemeStyles();
+
+    const [formDraft] = useOnyx(ONYXKEYS.FORMS.WORKSPACE_REPORT_FIELDS_FORM_DRAFT);
+
+    return (
+        <Modal
+            type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
+            isVisible={isVisible}
+            onClose={onClose}
+            onModalHide={onClose}
+            enableEdgeToEdgeBottomSafeAreaPadding
+        >
+            <ScreenWrapper
+                style={styles.pb0}
+                includePaddingTop={false}
+                enableEdgeToEdgeBottomSafeAreaPadding
+                testID="InitialListValueSelectorModal"
+            >
+                <HeaderWithBackButton
+                    title={label}
+                    shouldShowBackButton
+                    onBackButtonPress={onClose}
+                />
+                <View style={[styles.ph5, styles.pb4]}>
+                    <Text style={[styles.sidebarLinkText, styles.optionAlternateText]}>{subtitle}</Text>
+                </View>
+                <ReportFieldsInitialListValuePicker
+                    listValues={formDraft?.listValues ?? []}
+                    disabledOptions={formDraft?.disabledListValues ?? []}
+                    value={currentValue}
+                    onValueChange={onValueSelected}
+                />
+            </ScreenWrapper>
+        </Modal>
+    );
+}
+
+export default InitialListValueSelectorModal;

src/pages/workspace/reports/InitialListValueSelector/ReportFieldsInitialListValuePicker.tsx

@@ -39,7 +39,6 @@ function ReportFieldsInitialListValuePicker({listValues, disabledOptions, value,
             ListItem={SingleSelectListItem}
             onSelectRow={(item) => onValueChange(item.value)}
             initiallyFocusedItemKey={listValueOptions.find((listValue) => listValue.isSelected)?.keyForList}
-            shouldSingleExecuteRowSelect
             addBottomSafeAreaPadding
         />
     );

src/pages/workspace/reports/InitialListValueSelector/index.tsx

@@ -1,29 +1,47 @@
 import type {ForwardedRef} from 'react';
-import React, {useEffect} from 'react';
+import React, {useEffect, useState} from 'react';
 import {View} from 'react-native';
 import type {MenuItemBaseProps} from '@components/MenuItem';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import useOnyx from '@hooks/useOnyx';
-import createDynamicRoute from '@libs/Navigation/helpers/dynamicRoutesUtils/createDynamicRoute';
-import Navigation from '@libs/Navigation/Navigation';
+import blurActiveElement from '@libs/Accessibility/blurActiveElement';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import {DYNAMIC_ROUTES} from '@src/ROUTES';
+import InitialListValueSelectorModal from './InitialListValueSelectorModal';
 
 type InitialListValueSelectorProps = Pick<MenuItemBaseProps, 'label' | 'rightLabel' | 'errorText'> & {
     /** Currently selected value */
     value?: string;
 
+    /** Subtitle to display on field */
+    subtitle?: string;
+
     /** Function to call when the user selects a value */
     onInputChange?: (value: string) => void;
 
     /** Reference to the outer element */
     ref: ForwardedRef<View>;
 };
 
-function InitialListValueSelector({value = '', label = '', rightLabel, errorText = '', onInputChange, ref}: InitialListValueSelectorProps) {
+function InitialListValueSelector({value = '', label = '', rightLabel, subtitle = '', errorText = '', onInputChange, ref}: InitialListValueSelectorProps) {
     const [formDraft] = useOnyx(ONYXKEYS.FORMS.WORKSPACE_REPORT_FIELDS_FORM_DRAFT);
 
+    const [isPickerVisible, setIsPickerVisible] = useState(false);
+
+    const showPickerModal = () => {
+        setIsPickerVisible(true);
+    };
+
+    const hidePickerModal = () => {
+        setIsPickerVisible(false);
+        blurActiveElement();
+    };
+
+    const updateValueInput = (initialValue: string) => {
+        onInputChange?.(value === initialValue ? '' : initialValue);
+        hidePickerModal();
+    };
+
     useEffect(() => {
         const currentValueIndex = Object.values(formDraft?.listValues ?? {}).findIndex((listValue) => listValue === value);
         const isCurrentValueDisabled = formDraft?.disabledListValues?.[currentValueIndex] ?? true;
@@ -43,7 +61,15 @@ function InitialListValueSelector({value = '', label = '', rightLabel, errorText
                 rightLabel={rightLabel}
                 brickRoadIndicator={errorText ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
                 errorText={errorText}
-                onPress={() => Navigation.navigate(createDynamicRoute(DYNAMIC_ROUTES.WORKSPACE_REPORT_FIELDS_INITIAL_LIST_VALUE.path))}
+                onPress={showPickerModal}
+            />
+            <InitialListValueSelectorModal
+                isVisible={isPickerVisible}
+                currentValue={value}
+                onClose={hidePickerModal}
+                onValueSelected={updateValueInput}
+                label={label}
+                subtitle={subtitle}
             />
         </View>
     );