[$500] Expense - Unable to save Merchant by hitting Enter in confirmation page

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: v1.4.44-0
Reproducible in staging?: y
Reproducible in production?: n
Issue reported by: Applause - Internal Team

Action Performed:

Go to staging.new.expensify.com.
Go to FAB > Request money > Manual.
Enter amount and select participant.
Proceed to confirmation page.
Click Show more > Merchant.
Enter a merchant and hit Enter.

Expected Result:

The Merchant will be saved when hitting Enter.

Actual Result:

The Merchant is not saved when hitting Enter.
This issue also occurs with Description.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6393850_1709032184834.20240227_133522.1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~0173bf7e04af9fbaa2
Upwork Job ID: 1762479426479763456
Last Price Increase: 2024-02-27

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

@Pujan92

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

👋 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:

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

@grgia

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

@dylanexpensify

We think that this bug might be related to #wave5-free-submitters
CC @dylanexpensify

Please link the offended PR as it is not reproducible on production.

I don't think this needs to block deploy

@Piotrfj

It is from #31606 where BaseOptionsSelector enter callback triggered, same is happening for the description step form too. cc: @Piotrfj

Proposal

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

Expense - Unable to save Merchant by hitting Enter in confirmation page

What is the root cause of that problem?

The pr is - #31606
The root cause of problem is we have subscribed to enter shortcut on BaseOptionsSelector, that prevents the form from submitting, and that avoid bubbling of that event.

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

We shall unsubscribe to Enter shortcut key event.
When we go to different pages (ex - Description, Merchant)
To Do this, we need to make following changes -

For use effect here -

App/src/components/OptionsSelector/BaseOptionsSelector.js

Lines 370 to 377 in 04644d8

    
           useEffect(() => { 
        
               // Unregister the shortcut before registering a new one to avoid lingering shortcut listener 
        
               enterSubscription.current(); 
        
               if (!disableEnterShortCut) { 
        
                   subscribeToEnterShortcut(); 
        
               } 
        
               // eslint-disable-next-line react-hooks/exhaustive-deps 
        
           }, [disableEnterShortCut]);

we shall also check if isFocused (not from prop) is true. This means we are only subscribing if we are on the page that has BaseOptionsSelector, not the inside. Because then it will act as we press enter it's on the confirmation list.

Changes

useEffect(() => {
    // Unregister the shortcut before registering a new one to avoid lingering shortcut listener
    enterSubscription.current();
    if (!disableEnterShortCut && isFocused) {
        subscribeToEnterShortcut();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, [disableEnterShortCut]);

2. While subscribing to events, we shall also check if the window is focused (the value we using `useIsFocused()`) for this use effect

App/src/components/OptionsSelector/BaseOptionsSelector.js

Lines 379 to 387 in 04644d8

    
           useEffect(() => { 
        
               if (props.isFocused) { 
        
                   subscribeToEnterShortcut(); 
        
                   subscribeToCtrlEnterShortcut(); 
        
               } else { 
        
                   unSubscribeFromKeyboardShortcut(); 
        
               } 
        
               // eslint-disable-next-line react-hooks/exhaustive-deps 
        
           }, [props.isFocused]);

Changes

useEffect(() => {
    if (isFocused) {
        subscribeToEnterShortcut();
        subscribeToCtrlEnterShortcut();
    } else {
        unSubscribeFromKeyboardShortcut();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, [isFocused]);

We need to remove the subscriptions done by the hooks cause they kind of pollute the events (spent alot of time in this )

App/src/components/OptionsSelector/BaseOptionsSelector.js

Lines 305 to 309 in 069efef

    
           useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ENTER, selectFocusedOption, { 
        
               shouldBubble: !allOptions[focusedIndex], 
        
               captureOnInputs: true, 
        
           }); 
        
           useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.CTRL_ENTER, selectOptions, {captureOnInputs: true});

result -

Screen.Recording.2024-02-28.at.2.32.24.AM.mov

What alternative solutions did you explore? (Optional)

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

@roryabraham

Update: re-refactoring is ready to be tested, it fixes all the regression issues I was aware of. Please test it (especially the tags, because I could not yet replicate the scenario on my site).
The fix is based on the @roryabraham solution, so special thanks for him!
Link to PR: #37494

@Pujan92

@Pujan92, @grgia Eep! 4 days overdue now. Issues have feelings too...

@Pujan92

I take it we can close this one out @Pujan92 ?

Offending PR was reverted - #31606 (comment)
Fine to close

Navigation Menu

Repository navigation

[$500] Expense - Unable to save Merchant by hitting Enter in confirmation page #37294

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

2 remaining items

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	useEffect(() => {
	// Unregister the shortcut before registering a new one to avoid lingering shortcut listener
	enterSubscription.current();
	if (!disableEnterShortCut) {
	subscribeToEnterShortcut();
	}
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [disableEnterShortCut]);

	useEffect(() => {
	if (props.isFocused) {
	subscribeToEnterShortcut();
	subscribeToCtrlEnterShortcut();
	} else {
	unSubscribeFromKeyboardShortcut();
	}
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [props.isFocused]);

	useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ENTER, selectFocusedOption, {
	shouldBubble: !allOptions[focusedIndex],
	captureOnInputs: true,
	});
	useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.CTRL_ENTER, selectOptions, {captureOnInputs: true});

[$500] Expense - Unable to save Merchant by hitting Enter in confirmation page #37294

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Feb 27, 2024

melvin-bot commented on Feb 27, 2024

github-actions commented on Feb 27, 2024

melvin-bot commented on Feb 27, 2024

kbecciv commented on Feb 27, 2024

2 remaining items

Pujan92 commented on Feb 27, 2024

grgia commented on Feb 27, 2024

Pujan92 commented on Feb 27, 2024

BhuvaneshPatil commented on Feb 27, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

melvin-bot commented on Feb 28, 2024

Piotrfj commented on Feb 29, 2024

melvin-bot commented on Mar 4, 2024

grgia commented on Mar 4, 2024

situchan commented on Mar 4, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions