[HOLD for payment 2024-04-03] [$500] IOU - CMD+ENTER command takes you to the IOU confirmation page without selecting members

[kavimuru]

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: 1.4.33-0
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause internal team
Slack conversation:

Action Performed:

1. Open https://staging.new.expensify.com/
2. Log in under your HT account
3. Tap on the green plus button (FAB)
4. Select Request money/Manual
5. Select any currency and amount
6. Press the CMD + ENTER key combination

Expected Result:

The CMD + ENTER command should not work in the member selection menu without selected members.

Actual Result:

The CMD + ENTER command takes you to the IOU confirmation page without selecting members.

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6360685_1706608112809.Recording__1215.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01072c9895579ae1ce
• Upwork Job ID: 1752285003381895168
• Last Price Increase: 2024-02-20
• Automatic offers:
• mollfpr | Reviewer | 0
• Krishna2323 | Contributor | 0

[melvin-bot]

Triggered auto assignment to @muttmuure (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

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

[melvin-bot]

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

[ZhenjaHorbach]

Proposal

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

IOU - CMD+ENTER command takes you to the IOU confirmation page without selecting members

What is the root cause of that problem?

The main problem with issue is that we don't have any condition for confirm selection
And when we press CMD + ENTER we just call the function regardless of the number of participants

App/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js

Lines 274 to 280 in 8c0eee2

	const handleConfirmSelection = useCallback(() => {
	if (shouldShowSplitBillErrorMessage) {
	return;
	}
	navigateToSplit();
	}, [shouldShowSplitBillErrorMessage, navigateToSplit]);

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

To fix this issue we can add new condition

        if (!participants.length) {
            return;
        }

App/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js

Lines 274 to 280 in 8c0eee2

	const handleConfirmSelection = useCallback(() => {
	if (shouldShowSplitBillErrorMessage) {
	return;
	}
	navigateToSplit();
	}, [shouldShowSplitBillErrorMessage, navigateToSplit]);

And here

App/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js

Lines 262 to 268 in c53276d

	const handleConfirmSelection = useCallback(() => {
	if (shouldShowSplitBillErrorMessage) {
	return;
	}
	onFinish();
	}, [shouldShowSplitBillErrorMessage, onFinish]);

What alternative solutions did you explore? (Optional)

As an alternative, we can select a current participant and use logic during selecting an element when we have selectedOptions === 0

In order to preserve the old logic and make these changes for all lists for uniformity (Which is logical for me, but we can always add a param if we want to disable new logic)
We can update the code like:

    useKeyboardShortcut(
        CONST.KEYBOARD_SHORTCUTS.CTRL_ENTER,
        (e) => {
            if (!flattenedSections.selectedOptions.length) {
                selectFocusedOption();
                return;
            }

												
            onConfirm ? onConfirm(e) : selectFocusedOption();
        },
        {
            captureOnInputs: true,
            shouldBubble: !flattenedSections.allOptions[focusedIndex],
            isActive: !disableKeyboardShortcuts && isFocused,
        },
    );

App/src/components/SelectionList/BaseSelectionList.tsx

Lines 372 to 376 in 82ae62f

	useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.CTRL_ENTER, onConfirm ?? selectFocusedOption, {
	captureOnInputs: true,
	shouldBubble: !flattenedSections.allOptions[focusedIndex],
	isActive: !disableKeyboardShortcuts && isFocused,
	});

[Krishna2323]

Proposal

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

IOU - CMD+ENTER command takes you to the IOU confirmation page without selecting members

What is the root cause of that problem?

We check for onConfirm prop before passing the callback. if it is a falsy value we don't pass the selectFocusedOption callback.

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

Remove the onConfirm check, or we could do same as we do in BaseOptionsSelector.

                if (props.canSelectMultipleOptions) {
                    props.onConfirm();
                    return;
                }

Result

[Krishna2323]

Proposal

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

IOU - CMD+ENTER command takes you to the IOU confirmation page without selecting members

What is the root cause of that problem?

We return from onConfirm when the participants length is not greater than one.

App/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js

Lines 274 to 280 in 8c0eee2

	const handleConfirmSelection = useCallback(() => {
	if (shouldShowSplitBillErrorMessage) {
	return;
	}
	navigateToSplit();
	}, [shouldShowSplitBillErrorMessage, navigateToSplit]);

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

We should check the length of the participants, if there is only one participant we will call addSingleParticipant.

Steps:

1. Update callback for CTRL_ENTER keypress to pass the focusedOption to onConfirm callback.

App/src/components/SelectionList/BaseSelectionList.tsx

Line 372 in 82ae62f

useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.CTRL_ENTER, onConfirm ?? selectFocusedOption, {

Update second parameter to:

        () => {
            if (onConfirm && flattenedSections.selectedOptions.length) {
                onConfirm();
                return;
            }

            selectFocusedOption();
        },

2. In MoneyTemporaryForRefactorRequestParticipantsSelector update handleConfirmSelection function to call addSingleParticipant(lastfocusedOption); if the participants list is empty.

App/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js

Line 262 in 82ae62f

const handleConfirmSelection = useCallback(() => {

Add a if check here and use the parameter passed from SelcetionList:

    const handleConfirmSelection = useCallback(
        (lastfocusedOption) => {
            
            if (participants.length === 0 && lastfocusedOption) {
                addSingleParticipant(lastfocusedOption);
            }

3. Update the types file for BaseSelectionListProps, to also TItem as onConfirm callback parameter.
   

   App/src/components/SelectionList/types.ts

   Line 187 in 82ae62f

   onConfirm?: (e?: GestureResponderEvent | KeyboardEvent | undefined) => void;

Add TItem here as a optional parameter:

onConfirm?: (e?: GestureResponderEvent | KeyboardEvent | TItem | undefined) => void;

We pass onConfirm callback in from multiple components, we should also update there if needed, we use in RoomInvitePage, RoomMembersPage, MoneyTemporaryForRefactorRequestParticipantsSelector, MoneyRequestParticipantsSelector, WorkspaceInvitePage & WorkspaceMembersPage.

Result

access.mp4

Alternative

We can call selectFocusedOption directly from BaseSelectionList, if the selected options length is 0 and we pressed CMD+Enter. Or if we have selected options and onConfirm callback then we will call onConfirm callback

Add a if check here and use the parameter passed from SelcetionList:

        () => {
            if (onConfirm && flattenedSections.selectedOptions.length) {
                onConfirm();
                return;
            }

            selectFocusedOption();
        },

[Krishna2323]

@ZhenjaHorbach, your proposal was updated with alternative after mine initial solution.
cc: @mollfpr

[ZhenjaHorbach]

@ZhenjaHorbach, your proposal was updated with alternative after mine initial solution. cc: @mollfpr

Oh, sorry
I thought that you closed your proposition ))