[$500] [Held requests] - Pressing 'Enter' key doesn't serve as clicking on 'Got it' button

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 1.4.43-0
Reproducible in staging?: y
Reproducible in production?: new feature
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. Sign up with a new account
2. Create an IOU with a user
3. Navigate to IOU reports details page
4. Click on three dot > Hold request > enter reason > press enter
5. Hitting enter key the first time navigates to Expense header RHP.
6. Press enter again.

Expected Result:

Pressing enter after entering the reason should close the RHP. And pressing enter should behave as clicking on 'Got it' button

Actual Result:

Nothin happens

Workaround:

unknown

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

Bug6385200_1708391360465.Screen_Recording_2024-02-20_at_3.06.17_at_night.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~017589b7378e34e844
• Upwork Job ID: 1759789310076301312
• Last Price Increase: 2024-08-20
• Automatic offers:
• abdulrahuman5196 | Reviewer | 0
• dukenv0307 | Contributor | 103623715

Issue Owner

Current Issue Owner: @

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @techievivek (Engineering), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[kavimuru]

We think this bug might be related to [#vip-bills]
cc @davidcardoza

[dukenv0307]

Edited by proposal-police: This proposal was edited at 2023-10-04T12:00:00Z.

Proposal

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

Nothin happens

What is the root cause of that problem?

We implemented the focus trap so when ProcessMoneyRequestHoldPage the first element is focused that is the back button
Then if we press on the enter key we call goBack here

If we blur the focused element and press the enter key again, nothing happens because we don't pass pressOnEnter for got it button here

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

1. We should pass pressOnEnter to the confirm button here

2. We can use the same way here to blur the default focused element of focus trap.

const focusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
useFocusEffect(
    useCallback(() => {
        focusTimeoutRef.current = setTimeout(() => {
            InteractionManager.runAfterInteractions(() => {
                blurActiveElement();
            });
        }, CONST.ANIMATED_TRANSITION);
        return () => focusTimeoutRef.current && clearTimeout(focusTimeoutRef.current);
    }, []),
);

App/src/components/MoneyRequestConfirmationList.tsx

Lines 808 to 819 in 0e4f02e

	useFocusEffect(
	useCallback(() => {
	focusTimeoutRef.current = setTimeout(() => {
	InteractionManager.runAfterInteractions(() => {
	blurActiveElement();
	});
	}, CONST.ANIMATED_TRANSITION);
	return () => focusTimeoutRef.current && clearTimeout(focusTimeoutRef.current);
	}, []),
	);
	const footerContent = useMemo(() => {

What alternative solutions did you explore? (Optional)

NA

[brandonhenry]

Proposal

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

Pressing the 'Enter' key doesn't behave as clicking on the 'Got it' button in the Hold Request flow.

What is the root cause of that problem?

The root cause of the problem is that there is no event listener set up to handle the 'Enter' key press event in the HoldReasonPage component. As a result, pressing the 'Enter' key does not trigger the form submission.

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

Enable disablePressOnEnter (that's a mouthful..) for the FormProvider on the HoldReasonPage

 <FormProvider
        formID="moneyHoldReasonForm"
        submitButtonText={translate('iou.holdRequest')}
        style={[styles.flexGrow1, styles.ph5]}
        onSubmit={onSubmit}
        validate={validate}
        enabledWhenOffline
        disablePressOnEnter={false}
>

Original / Culprit

App/src/pages/iou/HoldReasonPage.js

Line 73 in eb332d6

<FormProvider

[shubham1206agra]

Offending PR #33897

[shubham1206agra]

@BartoszGrajdek Please look into this

[BartoszGrajdek]

I'll create a follow-up PR to fix this regression @shubham1206agra

[dragnoir]

Proposal

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

The Git it button is not focused

What is the root cause of that problem?

On the 1st screen, "Hold Request", when the button "Hold Request" is clicked, there's an actiopn to turn back to the main request report screen, wish bring back focus to the "Write anything..' input

App/src/pages/iou/HoldReasonPage.tsx

Lines 42 to 49 in 0f372c2

	const navigateBack = () => {
	Navigation.navigate(backTo);
	};
	const onSubmit = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.MONEY_REQUEST_HOLD_FORM>) => {
	IOU.putOnHold(transactionID, values.comment, reportID);
	navigateBack();
	};

The navigate back function turn to the main report screen and does not open the next "This request is on Hold" screen.

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

Adding pressOnEnter prop for the confirm button on ProcessMoneyRequestHoldPage does not solve the issue (tested).

When the screen "This request is on Hold" is opened we need to set the focus on the "Got it" button on src/pages/ProcessMoneyRequestHoldPage.tsx

const  submitBtn  =  useRef<View>(null);

useFocusEffect(
  React.useCallback(() => {
    if (!submitBtn.current) {
      return;
    }
    submitBtn.current.focus();
  }, []),
);

<Button
  ref={submitBtn}

POC:

20240220_101333.mp4

[melvin-bot]

Upwork job price has been updated to $500

[dukenv0307]

Updated proposal.

[dukenv0307]

@abdulrahuman5196 I've had a proposal cc @techievivek

[techievivek]

@abdulrahuman5196, can we review the proposal above? We're trying to wrap up the HELD requests project, so I'd appreciate it if you could prioritize this. Thanks.

[abdulrahuman5196]

Hi, Checking now.

[abdulrahuman5196]

@dukenv0307 's Is it possible to directly focus 'Got it' button without issues instead of unfocusing the current focused element? I tried out the proposal here #36825 (comment) , it worked but I am seeing an blue border over the got it button? What do you think?

[dukenv0307]

Is it possible to directly focus 'Got it' button without issues instead of unfocusing the current focused element

@abdulrahuman5196 Directly focus Got it button will make it has a blue border

I tried out the proposal here #36825 (comment) , it worked but I am seeing an blue border over the got it button? What do you think?

I tested my proposal and I don't see the blue border over the got it button

Screen.Recording.2024-08-21.at.10.21.14.mov

We also used this solution in some other places of the App like here and here

[abdulrahuman5196]

@dukenv0307 's proposal here #36825 (comment) looks good and works well.

🎀 👀 🎀
C+ Reviewed

[melvin-bot]

Current assignee @techievivek is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[robertjchen]

perfect! thanks for taking this on 👍

[melvin-bot]

📣 @dukenv0307 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[dukenv0307]

@abdulrahuman5196 The PR is ready for review.

[techievivek]

I think we can move with the payment here now since it's been more than 2 weeks since PR has been deployed to PROD. CC @muttmuure

[abdulrahuman5196]

The PR that introduced the bug has been identified. Link to the PR:
The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:

Doesn't seem to be a regression.

Determine if we should create a regression test for this bug.

Yes.

If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

1. Login with an account that doesn't hold any request
2. Submit an expense
3. Open the hold reason page
4. Enter the reason and go to the next page
5. Press enter key and verify that RHP is closed

@muttmuure

[techievivek]

Regression test looks good to me, @muttmuure can we please get that added to testRail? Thanks

[muttmuure]

$500 - @dukenv0307
$500 - @abdulrahuman5196

[robertjchen]

I think we're all set here? Please comment if there are any other remaining steps

[JmillsExpensify]

$500 approved for @abdulrahuman5196

[dukenv0307]

$500 - @dukenv0307

@muttmuure Could you please release the payment on Upwork for my job?

Thank you 🙏

[muttmuure]

Paid