Merge pull request #37460 from Krishna2323/krishna2323/issue/35377

fix: IOU - CMD+ENTER command takes you to the IOU confirmation page without selecting members
Expensify · Mar 20, 2024 · 4aecfcb · 4aecfcb
2 parents 873b8d0 + 4272054
commit 4aecfcb
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 46 deletions.
diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx
@@ -455,11 +455,22 @@ function BaseSelectionList<TItem extends ListItem>(
     });
 
     /** Calls confirm action when pressing CTRL (CMD) + Enter */
-    useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.CTRL_ENTER, onConfirm ?? selectFocusedOption, {
-        captureOnInputs: true,
-        shouldBubble: !flattenedSections.allOptions[focusedIndex],
-        isActive: !disableKeyboardShortcuts && isFocused,
-    });
+    useKeyboardShortcut(
+        CONST.KEYBOARD_SHORTCUTS.CTRL_ENTER,
+        (e) => {
+            const focusedOption = flattenedSections.allOptions[focusedIndex];
+            if (onConfirm) {
+                onConfirm(e, focusedOption);
+                return;
+            }
+            selectFocusedOption();
+        },
+        {
+            captureOnInputs: true,
+            shouldBubble: !flattenedSections.allOptions[focusedIndex],
+            isActive: !disableKeyboardShortcuts && isFocused,
+        },
+    );
 
     return (
         <ArrowKeyFocusManager

diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
@@ -227,7 +227,7 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
     confirmButtonText?: string;
 
     /** Callback to fire when the confirm button is pressed */
-    onConfirm?: (e?: GestureResponderEvent | KeyboardEvent | undefined) => void;
+    onConfirm?: (e?: GestureResponderEvent | KeyboardEvent | undefined, option?: TItem) => void;
 
     /** Whether to show the vertical scroll indicator */
     showScrollIndicator?: boolean;

diff --git a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js
@@ -187,15 +187,18 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({
      *
      * @param {Object} option
      */
-    const addSingleParticipant = (option) => {
-        onParticipantsAdded([
-            {
-                ..._.pick(option, 'accountID', 'login', 'isPolicyExpenseChat', 'reportID', 'searchText'),
-                selected: true,
-            },
-        ]);
-        onFinish();
-    };
+    const addSingleParticipant = useCallback(
+        (option) => {
+            onParticipantsAdded([
+                {
+                    ..._.pick(option, 'accountID', 'login', 'isPolicyExpenseChat', 'reportID', 'searchText'),
+                    selected: true,
+                },
+            ]);
+            onFinish();
+        },
+        [onFinish, onParticipantsAdded],
+    );
 
     /**
      * Removes a selected option from list if already selected. If not already selected add this option to the list.
@@ -257,13 +260,22 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({
     const shouldShowSplitBillErrorMessage = participants.length > 1 && hasPolicyExpenseChatParticipant;
     const isAllowedToSplit = (canUseP2PDistanceRequests || iouRequestType !== CONST.IOU.REQUEST_TYPE.DISTANCE) && iouType !== CONST.IOU.TYPE.SEND;
 
-    const handleConfirmSelection = useCallback(() => {
-        if (shouldShowSplitBillErrorMessage) {
-            return;
-        }
+    const handleConfirmSelection = useCallback(
+        (keyEvent, option) => {
+            const shouldAddSingleParticipant = option && !participants.length;
+            if (shouldShowSplitBillErrorMessage || (!participants.length && !option)) {
+                return;
+            }
 
-        onFinish(CONST.IOU.TYPE.SPLIT);
-    }, [shouldShowSplitBillErrorMessage, onFinish]);
+            if (shouldAddSingleParticipant) {
+                addSingleParticipant(option);
+                return;
+            }
+
+            onFinish(CONST.IOU.TYPE.SPLIT);
+        },
+        [shouldShowSplitBillErrorMessage, onFinish, addSingleParticipant, participants],
+    );
 
     const footerContent = useMemo(
         () => (

diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
@@ -196,25 +196,28 @@ function MoneyRequestParticipantsSelector({
      *
      * @param {Object} option
      */
-    const addSingleParticipant = (option) => {
-        if (participants.length) {
-            return;
-        }
-        onAddParticipants(
-            [
-                {
-                    accountID: option.accountID,
-                    login: option.login,
-                    isPolicyExpenseChat: option.isPolicyExpenseChat,
-                    reportID: option.reportID,
-                    selected: true,
-                    searchText: option.searchText,
-                },
-            ],
-            false,
-        );
-        navigateToRequest();
-    };
+    const addSingleParticipant = useCallback(
+        (option) => {
+            if (participants.length) {
+                return;
+            }
+            onAddParticipants(
+                [
+                    {
+                        accountID: option.accountID,
+                        login: option.login,
+                        isPolicyExpenseChat: option.isPolicyExpenseChat,
+                        reportID: option.reportID,
+                        selected: true,
+                        searchText: option.searchText,
+                    },
+                ],
+                false,
+            );
+            navigateToRequest();
+        },
+        [navigateToRequest, onAddParticipants, participants.length],
+    );
 
     /**
      * Removes a selected option from list if already selected. If not already selected add this option to the list.
@@ -275,13 +278,23 @@ function MoneyRequestParticipantsSelector({
     const shouldShowSplitBillErrorMessage = participants.length > 1 && hasPolicyExpenseChatParticipant;
     const isAllowedToSplit = (canUseP2PDistanceRequests || !isDistanceRequest) && iouType !== CONST.IOU.TYPE.SEND;
 
-    const handleConfirmSelection = useCallback(() => {
-        if (shouldShowSplitBillErrorMessage) {
-            return;
-        }
+    const handleConfirmSelection = useCallback(
+        (keyEvent, option) => {
+            const shouldAddSingleParticipant = option && !participants.length;
 
-        navigateToSplit();
-    }, [shouldShowSplitBillErrorMessage, navigateToSplit]);
+            if (shouldShowSplitBillErrorMessage || (!participants.length && !option)) {
+                return;
+            }
+
+            if (shouldAddSingleParticipant) {
+                addSingleParticipant(option);
+                return;
+            }
+
+            navigateToSplit();
+        },
+        [shouldShowSplitBillErrorMessage, navigateToSplit, addSingleParticipant, participants.length],
+    );
 
     const footerContent = useMemo(
         () => (