Create Channel: selected members are not visually distinguishable

[nextgendev2029]

Reproduction Steps

1.	Open the Create Channel modal.
2.	Click on Add Members.
3.	The members dropdown opens.
4.	Select one or more members from the list.

Actual Behavior

    •	Selected members are neither visually highlighted nor removed from the dropdown list.
    •	There is no clear indication of which members have already been added.
    •	With a long list of users, this becomes confusing and error-prone.

Expected Behavior

One of the following behaviors would improve the UX:
• Option A: Highlight selected members in the dropdown list.
• Option B: Remove already selected members from the dropdown list.
• Option C: Disable selected members to prevent re-selection.

Any of the above would make the selection state clear and improve usability.

Debug Info

•	Version: 7.13.0-develop
•	Deployment ID: d678315d-d5a0-47b6-9d71-df1137ba3c98
•	Apps Engine Version: 1.57.0
•	Node Version: v22.18.0
•	Database Migration: 318 (December 15, 2025 3:21 PM)
•	MongoDB: 7.0.16 / wiredTiger (oplog enabled)
•	Branch: develop
•	HEAD Commit: e1c634a
•	PID: 37215

I’m open to discussion on the expected behaviour.
Once this issue is approved, I would like to work on implementing a fix.

[Anuragsharma15-dell]

hey please assign it to me

[compiler041]

Hi maintainers I understand the issue and would like to work on it.
Proposed approach:
Disable already selected members in the dropdown to prevent re-selection and improve UX. Please let me know if this sounds good. I can start working on it right away.

[Anuragsharma15-dell]

Problem Analysis
The dropdown doesn't provide visual feedback when members are selected, making it confusing especially with long user lists.
Recommended Solution
I'd recommend Option A: Highlight selected members as the best approach because:

It maintains visibility of all members (useful for reviewing selections)
Provides clear visual feedback
Doesn't change the list structure (less disruptive)
Common pattern in multi-select interfaces

Implementation Steps

1. Locate the Component
   Find the Add Members dropdown component in the codebase:
   bash# Search for the component
   grep -r "Add Members" --include=".tsx" --include=".jsx"
   grep -r "CreateChannel" --include=".tsx" --include=".jsx"
2. Track Selected State
   Ensure the component maintains a list of selected member IDs:
   typescriptconst [selectedMembers, setSelectedMembers] = useState<string[]>([]);
3. Add Visual Feedback
   Modify the dropdown item rendering to show selected state:
   typescript// In the member list item component
   <DropdownItem
   key={member.id}
   onClick={() => handleMemberSelect(member)}
   className={selectedMembers.includes(member.id) ? 'selected' : ''}

{member.name} {selectedMembers.includes(member.id) && } 4. Add Styling Create clear visual distinction for selected items: css.dropdown-item.selected { background-color: #e8f4fd; border-left: 3px solid #1d74f5; }

.dropdown-item.selected .checkbox {
color: #1d74f5;
}

### 5. **Optional Enhancement**
Add a "Selected members" section at the top of the dropdown showing chips/tags of selected users with remove option.

## Alternative Implementations

**Option B (Remove from list):**
- Filter out selected members: `availableMembers = allMembers.filter(m => !selectedMembers.includes(m.id))`
- Pros: Cleaner list
- Cons: Can't review selections easily

this is my way  to proceed for the solution hey maintainer please assign  it to me i will make a pr with fixed screenshot

[compiler041]

Thanks for the detailed analysis.
Highlighting selected members is definitely helpful. From a UX perspective, I was leaning towards disabling already selected members in the dropdown to fully prevent re-selection and reduce accidental clicks, especially for long user lists.
If that approach sounds acceptable, I can work on implementing it and follow Rocket.Chat’s existing select component patterns. Happy to adjust based on feedback.

[nextgendev2029]

Thanks everyone for the discussion and suggestions.

I’m open to different approaches for improving the UX here.
It would be great to get maintainer input on the preferred behavior
(highlighting, disabling, or removing selected members).

Once the approach is confirmed, I’d be happy to work on a PR
following Rocket.Chat’s existing patterns. Others are also welcome
to contribute.

[compiler041]

Thank you for your response.
My approach would be to disable already chosen members in the list, as it prevents them from being selected again and scales better for long user lists.
The suggested strategy is to use the currently chosen members as the single source of truth, pass the selected list to the autocomplete component, and disable the corresponding options at render time.As a precaution, ensure that no duplicate members can enter the form state.I'm happy to move forward with a PR if this strategy meets maintainer expectations.