[HOLD for payment 2022-02-16] Group creation - Search box is not cleared after selecting a user

[isagoico]

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. Shift+cmd+k or :green-plus-button: to start new group chat
2. Start typing name of user
3. Press enter to select user or click on user's name with cursor
4. Observe text from search for user is still in search box.

Expected Result:

Search box should clear after selecting a user.

Actual Result:

Search box is not cleared after selecting a user

Workaround:

User can delete the content in the search box.

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.23-0

Reproducible in staging?: Yes
Reproducible in production?: Yes

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

Notes/Photos/Videos: Any additional supporting documentation

2021-12-21_15-51-55.mp4

Expensify/Expensify Issue URL:

Issue reported by: @mallenexpensify
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1640130861454000

View all open jobs on GitHub

[MelvinBot]

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

[MelvinBot]

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

[sobitneupane]

Proposal

Here, on selecting a row the searchValue is changed(change of state) to ' ' and on deselecting a row(i.e, removing selected member) searchValue remains as it is, i.e,
searchValue: isOptionInList ? prevState.searchValue : ' '

But, the changed searcheValue is not reflected from BaseExpensiTextInput as instead of using this.props.value or this.state.value while calling TextInputWithName Component, this.value is being used.

So, storing value as state and changing

<TextInputWithName
         ----
         value={this.value}
         ---          
/>

to

<TextInputWithName  
         ----  
         value={this.state.value}  
         ---            
/>

in BaseExpensiTextInput will solve the issue.

And addition of shouldFocusOnSelectRow in OptionsSelector in NewChatPage.js will return focus on searchbox with cursor in the box.

<OptionsSelector
                                         ---
                                        shouldFocusOnSelectRow
                                         ---
                                    />