Refocus search input every time a person is selected/unselected

[TomatoToaster]

@MonilBhavsar, please review when you get the chance!
CC: @marcaaron, I wasn't sure whether it was fine to reference the ref of a child component like I do here. Wondering if you had ideas about a cleaner approach.

Details

In the Group Chat creator, selecting a user to add will refocus the search bar. This will make it so you don't have to click the search bar again before you search for the next user.

Fixed Issues

Fixes #2452

Tests

Followed the QA steps on a local environment.

QA Steps

1. Log into E.Cash and try to create a new Group by clicking on the bottom left.
2. When the side panel opens up, select one of the people or search for someone to add to the group chat.
3. Verify that each time you add a person by clicking/tapping on them, the serach bar gets refocused and you can search for the next person.

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

Mobile Web

Desktop

iOS

Android

[TomatoToaster]

Not technically part of this PR but related; I think something is causing this line: https://github.com/Expensify/Expensify.cash/blob/75c554970f89b926e45f26b15acd2ea10da93ef3/src/components/OptionsSelector.js#L89-L91

to not do anything because when the New Group Page is opened, it doesn't actually focus the text input in the beginning.

It's probably because TextInputWithFocusStyles isn't properly passing down the focus function from the forwarded ref?

• try adding a focus function in there (can you do that with React Native components?)
• use the autoFocus prop of TextArea and pulling it up to TextInputWithFocusStyles and seeing if it does anything.

[TomatoToaster]

Ok Ignore that earlier comment. I couldn't figure out a good solution to fix that problem and it isn't relevant to the original issue anyways. It'll be fine to manually click the search bar when the group chat option selector first opens up. This PR still makes it easy to continue adding people.

[marcaaron]

While this works, it is pretty unusual and we should try to make this call in the direct parent of that text input.

One option could be to use ref forwarding. But in this case, I'd actually suggest we just move this logic closer to the text input. Here's what I'd suggest:

1. Create a new method in OptionsSelector called this.selectRow()
2. In that method, do something like this

selectRow() {
    this.textInput.focus();
    this.props.onSelectRow(...)
}

3. Update all usages in OptionsSelector to pass this.selectRow instead of this.props.onSelectRow
4. If you only need this behavior sometimes (since I see we are only adding it to NewGroupPage and not other pages) maybe pass a boolean prop like shouldFocusOnSelectRow to the OptionsSelector ?

[TomatoToaster]

Alrighty, this is ready for a re-review.

[MonilBhavsar]

Looks good

[OSBotify]

🚀 Deployed to staging in version: 1.0.38-1🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[OSBotify]

🚀 Deployed to production in version: 1.0.39-5🚀

platform	result
🤖 android 🤖	failure ❌
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅