[HOLD for payment 2024-01-05][$500] Search - Nothing happens when hitting Enter key on the selected user

[kbecciv]

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.18-2
Reproducible in staging?: y
Reproducible in production?: n
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. Go to Search.
2. Hit Enter.

Expected Result:

The user in the list is selected.

Actual Result:

Nothing happens when hitting Enter key.

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

Bug6326899_1703696940505.20231228_002617__1_.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~012d7fac1fa0422658
• Upwork Job ID: 1740463680635154432
• Last Price Increase: 2023-12-28
• Automatic offers:
• situchan | Reviewer | 28071858
• Pujan92 | Contributor | 28071859

[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 @Beamanator (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[Pujan92]

Proposal

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

Row isn't selected on pressing enter for the option selector

What is the root cause of that problem?

• In this PR we have added testID for the input and on pressing an enter it will fetch testID of the focused element here.
  

  App/src/components/OptionsSelector/BaseOptionsSelector.js

  Lines 305 to 307 in 9e81447

  	selectFocusedOption(e) {
  	const focusedItemKey = lodashGet(e, ['target', 'attributes', 'data-testid', 'value']);
  	const focusedOption = focusedItemKey ? _.find(this.state.allOptions, (option) => option.keyForList === focusedItemKey) : this.state.allOptions[this.state.focusedIndex];

Due to that focusedItemKey will be options-selector-input and focusedOption will be undefined and it will return early. Earlier we weren't provided the testId for the option selector input and on enter it provides focusedItemKey undefined and we follow the else condition in ternary where we considers focusedIndex of the list.

App/src/components/OptionRow.js

Lines 167 to 168 in 9e81447

	<PressableWithFeedback
	testID={props.keyForList}

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

We should avoid comparing the keyForList when the focusedItemKey is options-selector-input here.

(focusedItemKey && !_.isEqual(focusedItemKey, 'options-selector-input'))

App/src/components/OptionsSelector/BaseOptionsSelector.js

Line 307 in 9e81447

const focusedOption = focusedItemKey ? _.find(this.state.allOptions, (option) => option.keyForList === focusedItemKey) : this.state.allOptions[this.state.focusedIndex];

[Beamanator]

Hmm @Pujan92 it looks like #33491 was merged 3 hours ago and is not on staging yet, but the bug is reproducible in staging

[situchan]

@Beamanator it's automation bug. Already deployed to staging. As you see, it's in deploy checklist

[Pujan92]

Yes, I am seeing that change with the inspect element in the staging.

[Beamanator]

Ooh good catch!

While I like your solution @Pujan92 , I don't really like that we started using testID OptionRow in https://github.com/Expensify/App/pull/33265/files for a non-test-related fix 🤔 do y'all think we should update that to just id? Or am I crazy?