mWeb - Group chat - Search is not blocked when user reached max participants

[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. Go to https://staging.new.expensify.com and sign in
2. Tap the green plus button
3. Select New group option
4. Start the group creation flow and add 8 participants
5. Verify you're showed a message that you reached the max participants
6. Enter a new user in the search field and tap Return button on the keyboard

Expected Result:

The search is blocked. The user is unable to add another user to the group.

Actual Result:

The user is able to search for a new user. The search is not blocked after reaching max of participants for group chat. The first added user in the participants list disappears from the list of participants and new searched user can be added to the group.

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Mobile Web

Version Number: 1.1.38.1

Reproducible in staging?: Yes

Reproducible in production?: Yes

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

Notes/Photos/Videos: Any additional supporting documentation

Bug5447628_0-02-05-defd673bf7b5b056556a0bf71b7e59cc101b76c4ce36a7dba386607e31b403df_6c2337c7d65e23f3.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause

Slack conversation:

View all open jobs on GitHub

[MelvinBot]

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

[MelvinBot]

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

[sobitneupane]

This issue exists in all platforms.
Proposal
Pass maxParticipantsReached from NewChatPage.js to OptionSelectors as a prop.

In OptionSelectors, Use maxParticipantsReached prop to deactivate the text input.

App/src/components/OptionsSelector.js

Lines 206 to 213 in 3590200

	<TextInput
	ref={el => this.textInput = el}
	value={this.props.value}
	onChangeText={this.props.onChangeText}
	onKeyPress={this.handleKeyPress}
	placeholder={this.props.placeholderText
	|| this.props.translate('optionsSelector.nameEmailOrPhoneNumber')}
	/>

<TextInput
    ref={el => this.textInput = el}
    value={this.props.value}
    onChangeText={this.props.onChangeText}
    onKeyPress={this.handleKeyPress}
    placeholder={this.props.placeholderText
        || this.props.translate('optionsSelector.nameEmailOrPhoneNumber')}
+   editable = {!this.props.maxParticipantsReached}
/>

We should also add following lines of codes in handleKeyPress().

App/src/components/OptionsSelector.js

Lines 124 to 129 in 3590200

	handleKeyPress(e) {
	// We are mapping over all the options to combine them into a single array and also saving the section index
	// index within that section so we can navigate
	const allOptions = _.reduce(this.props.sections, (options, section, sectionIndex) => (
	[...options, ..._.map(section.data, (option, index) => ({
	...option,

        if (this.props.maxParticipantsReached) {
            return;
        }

[bfitzexpensify]

Upwork job here

[MelvinBot]

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

[MelvinBot]

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

[parasharrajat]

@sobitneupane
No disabling the search does not sound like a good option. And if we disable the handleKeyPress Then the user won't be able to deselect the user and navigate via arrow keys.

[thesahindia]

Here's what I found. When we enable the user to navigate using arrow keys (we haven't on new group right now) The first user is always highlighted so let's say someone reached the max participants limit and searches for a new user, now if the user pressed the enter/return key the first user that is highlighted will get removed(as on enter we select/unselect the user).
Here's a vid

Screen.Recording.2022-02-11.at.11.59.36.PM.mov

cc: @parasharrajat

[Yoel-amri]

Hello,
I think I solved this,
You basically add maxParticipantsReached prop to OptionsSelector and then check on it in the case of 'Enter' in handleKeyPress

<OptionsSelector
maxParticipantsReached={maxParticipantsReached}
canSelectMultipleOptions={this.props.isGroupChat}
sections={sections} .....

and inside OptionsSelector

switch (e.nativeEvent.key) {
case 'Enter': {
if (this.props.maxParticipantsReached)
break;
this.selectRow(allOptions[this.state.focusedIndex]);
e.preventDefault();
break;
}

thats is

[mdneyazahmad]

Proposal

Do not search when max participant is reached. In this case user can enter text but it will not search.

App/src/pages/NewChatPage.js

Lines 235 to 246 in 8431ed4

	<OptionsSelector
	canSelectMultipleOptions={this.props.isGroupChat}
	sections={sections}
	selectedOptions={this.state.selectedOptions}
	value={this.state.searchValue}
	onSelectRow={this.toggleGroupOptionOrCreateChat}
	onChangeText={(searchValue = '') => {
	const {
	recentReports,
	personalDetails,
	userToInvite,
	} = OptionsListUtils.getNewChatOptions(

                                        onChangeText={(searchValue = '') => {

+                                           if(maxParticipantsReached) {
+                                               return;
+                                          }

                                            const {
                                                recentReports,
                                                personalDetails,
                                                userToInvite,
                                            } = OptionsListUtils.getNewChatOptions(

Result

Screen.Recording.2022-02-13.at.9.19.24.AM.mov

[parasharrajat]

It does not seem like a valid issue. For more, you can look at Sahil's comment.

I would discuss this on slack to understand the required change before accepting proposals. I will do this on Monday. Thanks, everyone for the proposal. There are a couple of PRs affecting this behavior indirectly. So, I would prefer to wait before we handle this issue.

[parasharrajat]

No update...I haven't discussed this. I don't understand the issue here. It seems to work fine from the video. And I don't know what should be discussed for this on slack. cc: @bfitzexpensify

When we deselect a user from the list and there is some search text in the input. you should see the search results. Right?

[parasharrajat]

Question ⬆️

[bfitzexpensify]

Yes, I also can't quite see the issue here. Tested on iOS and desktop, and the behaviour looks correct to me:

• you can search and add participants until you hit the max number of participants
• when you hit the limit, search doesn't return any results
• if you remove one of the participants, search and adding works again

That runs counter to the original post — the behaviour right now is as expected. So, I think we are fine to close this one out.