[$250] Can't go back in "Contact methods" if triggering "Back" button using Enter

[m-natarajan]

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.3.79-3
Reproducible in staging?: Yes
Reproducible in production?: Yes
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: @kosmydel
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1696849230849869

Action Performed:

1. Go to Settings -> Profile -> Contact method
2. Select the "Back" button using Tab.
3. Press Enter

Expected Result:

Should go back to the previous screen

Actual Result:

Opens the "New contact method" screen and immediately closes it.

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

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

bug1.mov

Tab.contact.mp4

MacOS: Desktop

.

Recording.2550.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~014d24f78857b6fbc3
• Upwork Job ID: 1711509906241732608
• Last Price Increase: 2023-10-10

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~014d24f78857b6fbc3

[saranshbalyan-1234]

Proposal

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

Can't go back in "Contact methods" if triggering "Back" button using Enter

What is the root cause of that problem?

App/src/pages/settings/Profile/Contacts/ContactMethodsPage.js

Lines 137 to 142 in b2cbd26

	onPress={() => Navigation.navigate(ROUTES.SETTINGS_NEW_CONTACT_METHOD)}
	pressOnEnter
	/>
	</FixedFooter>
	</ScrollView>
	</ScreenWrapper>

The issue is with pressOnEnter prop here so on pressing enter, New Contact Method button is triggered.

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

As the contact methods page does not contain any input elements (like text of selection) we dont need pressOnEnter functionality here.
We can just remove the prop and it will work fine.

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

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

[Krishna2323]

I believe it comes under accessibility and we closed multiple issue that are related to accessibility as we are not focusing on it right now.

cc: @thesahindia

[cead22]

This looks like a simple bug, and I imagine the solution will be simple as well, so I decreased the bounty

[melvin-bot]

Upwork job price has been updated to $250

[Victor-Nyagudi]

A pull request affecting the Enter key's behavior got merged and recently deployed to production.

It could provide some insight on why this issue occurred.

[parasharrajat]

We shouldn't be focusing on this issue ATM. We are migrating to RN-web v0.19 which will allow us to use button components instead of simple View thus this issue won't happen. This change is being tracked on some other issue.

Also, this is something that might be facing on almost all pages of the app and we have closed these in the past. I would do the same until we are ready to focus on such issues.

[FitseTLT]

Proposal

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

On Contact Methods page after focusing on the back button with the Tab key and pressing enter; it doesn't navigate back

What is the root cause of that problem?

Because there is the new contact methods button with pressOnEnter enabled, in addition to the navigate back code the create new contact methods' code is also executed. So that's why the page will navigate to the new contact page and it will get back to the contact methods page(instead of navigating back to the profiles page).

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

This problem must exist everywhere there is a Button component with pressOnEnter enabled. So the fix should be applied to our Button component.
Changes to be applied:
Here,

App/src/components/Button/index.js

Lines 181 to 185 in a6d2f3e

	(e) => {
	if (!validateSubmitShortcut(this.props.isFocused, this.props.isDisabled, this.props.isLoading, e)) {
	return;
	}
	this.props.onPress();

we need additional logic to check if the focus is not on another element (it should be on the button element or on its parent) so it should be changed to
if(document.activeElement.contains(this.ref.current)) this.props.onPress();
POC:
https://github.com/Expensify/App/assets/38649957/2a9e55d2-01be-4cdd-b2a0-faaf5000f46d

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[cead22]

Closing per #29132 (comment)