[$250] Web/Desktop - Chat - Unable to go to search bar using arrow keys

[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!

---

Action Performed:

1. Navigate to https://staging.new.expensify.com/
2. Log in with valid account
3. Сlick on the plus button on the left side of the screen
4. Choose an option "New chat" or "New group"
5. Remove cursor from "Search bar"
6. And using arrow keys

Expected Result:

Able to go to search bar using arrow keys

Actual Result:

Unable to go to search bar using arrow keys

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Web
• Desktop

Version Number: 1.1.96.5

Reproducible in staging?: Yes

Reproducible in production?: Yes

Email or phone of affected tester (no customers): any

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Bug5711188_Bandicam_2022-08-30_21-28-44-002.mp4

Upwork job URL: https://www.upwork.com/jobs/~01dc046bd601c8a48a

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @tgolen (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[stephanieelliott]

Hey @kbecciv, I'm unable to reproduce. Can you confirm which browsers this is happening on?

[varshamb]

Proposal

TextInput should be focused. It is at allOption.length not at 0th index.

We need to set focus to textInput when index is equals to this.state.allOptions.length when the component updates in componentDidUpdate().

This works fine when there is no multiple options like in New Group page.

In case of Search page, we don't have multiple options so maxIndex should be this.state.allOptions.length.

App/src/components/OptionsSelector/BaseOptionsSelector.js

Line 269 in 27b7f65

maxIndex={this.props.canSelectMultipleOptions ? this.state.allOptions.length : this.state.allOptions.length - 1}

[kbecciv]

@stephanieelliott Checking with QA team

[melvin-bot]

@tgolen Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

Triggered auto assignment to @trjExpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[tgolen]

@kbecciv did you have any luck trying to reproduce this?

[trjExpensify]

I can reproduce this on Desktop v1.1.96-3.

When you're on the first result and press the up arrow key it loops to the last participant in the search list.
If you're on the last result and press the down arrow key it loops to the first participant in the search list.

[trjExpensify]

Confirmed the reproduction on Web v1.1.96-5 as well.

[melvin-bot]

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

[melvin-bot]

Current assignee @tgolen is eligible for the Exported assigner, not assigning anyone new.

[trjExpensify]

Upwork job here: https://www.upwork.com/jobs/~01dc046bd601c8a48a

[mananjadhav]

We have a conflicting issue. In the current issue we're saying it should go to the search bar using arrow keys, but in this issue #10127, we're saying it should rotate back to the first/last item in the list?

[0xmiros]

We have a conflicting issue. In the current issue we're saying it should go to the search bar using arrow keys, but in this issue #10127, we're saying it should rotate back to the first/last item in the list?

I don't think this GH is issue.
To reproduce it, user manually needs to blur input by clicking somewhere.
By default, input is focused. And pressing arrow up/down keys doesn't affect input focused status.
While pressing arrows and middle item is highlighted, input is still focused and user is still able to type keyword.

This is how it looks after #10127 is fixed by this PR

demo.mov

If this GH is issue and should be fixed:
If user press down arrow while input is focused, input should be blurred and first item should be highlighted.
And input should be focused again when user press up arrow while first item is highlighted.

But current app doesn't blur focused input while keep pressing arrow keys. So I don't think this GH issue suits our app.

[mananjadhav]

We have a conflicting issue. In the current issue we're saying it should go to the search bar using arrow keys, but in this issue #10127, we're saying it should rotate back to the first/last item in the list?

@tgolen @trjExpensify Did you get a chance to look my and @vladnobenladen's comment?

I don't think anything needs to be done here, unless there's some other issue such as input not being able to focus.

[tgolen]

Yeah, I think taking a more critical look at the behavior that is "expected" in the issue description:

Able to go to search bar using arrow keys

I don't actually think that's something that we want. I think that's a strange UX that I wouldn't expect as a user. I expect that the tab key would get me to the next input (or shift+tab for the previous). I don't think the arrow keys should do that.

I'll go ahead and close this out, but if anyone has a strong desire to reopen it, feel free!

[melvin-bot]

⚠️ Looks like this issue was linked to a possible regression on PRODUCTION 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 production regression has occurred a Root Cause Analysis is required. Please follow the instructions here.

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.