fix: Dropdown not closing when clicking outside and obstructing 'Create' button in Direct Message modal (#35375)

[schourasia750]

Closes #35375
Type: Bug

Description

This pull request fixes the issue where the dropdown in the 'Create Direct Message' modal does not close when clicking outside, and when there are many suggested users, it obstructs the 'Create' button.

Changes Made

• Implemented click-outside detection: The dropdown now closes when the user clicks outside of it.
• Added drop-up functionality: The dropdown opens upwards when there is insufficient space below, preventing it from covering the 'Create' button.
• Ensured full-width input box: The user input field now maintains full width for better usability.

Testing

• Manually tested the dropdown behavior in the 'Create Direct Message' modal.
• Confirmed that clicking outside the dropdown closes it.
• Verified that the dropdown adjusts its position based on available space (drop-up functionality).
• Ensured that selecting and removing users works as expected.
• Checked that the input box stretches to fill the available space.

Before

Watch the video preview: Google Drive Video

After

Watch the video preview: Google Drive Video

---

This pull request addresses an issue in the UserAutoCompleteMultipleFederated component within the Rocket.Chat repository. The changes include enhancements to the dropdown functionality, specifically adding dynamic positioning to open upwards when there is limited space below. Additionally, the update introduces click-outside detection to ensure the dropdown closes when clicking outside of it, and a manual toggle for the dropdown direction. The internal logic for handling selected users has also been refactored. These improvements aim to resolve the problem of the dropdown not closing when clicking outside and obstructing the 'Create' button in the Direct Message modal. The changes are proposed from the fix-dropdown-issue-35375 branch to the develop branch.

[dionisio-bot]

Looks like this PR is not ready to merge, because of the following issues:

• This PR is missing the 'stat: QA assured' label
• This PR is missing the required milestone or project

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

[changeset-bot]

⚠️ No Changeset found

Latest commit: 50d4e29

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[CLAassistant]

All committers have signed the CLA.

[schourasia750]

@ggazzo Could you please assign the appropriate labels and milestone to this PR? Thanks!

[schourasia750]

@Sing-Li could you please review this PR

[kody-ai]

Code Review Completed! 🔥

The code review was successfully completed based on your current configurations.

Kody Guide: Usage and Configuration

Interacting with Kody

• Request a Review: Ask Kody to review your PR manually by adding a comment with the @kody start-review command at the root of your PR.

• Provide Feedback: Help Kody learn and improve by reacting to its comments with a 👍 for helpful suggestions or a 👎 if improvements are needed.

Current Kody Configuration

Review Options

The following review options are enabled or disabled:

Options	Enabled
Security	✅
Code Style	✅
Kody Rules	✅
Refactoring	✅
Error Handling	✅
Maintainability	✅
Potential Issues	✅
Documentation And Comments	✅
Performance And Optimization	✅
Breaking Changes	❌

Access your configuration settings here.

​

[kody-ai]

Code Review Completed! 🔥

The code review was successfully completed based on your current configurations.

Kody Guide: Usage and Configuration

Interacting with Kody

• Request a Review: Ask Kody to review your PR manually by adding a comment with the @kody start-review command at the root of your PR.

• Provide Feedback: Help Kody learn and improve by reacting to its comments with a 👍 for helpful suggestions or a 👎 if improvements are needed.

Current Kody Configuration

Review Options

The following review options are enabled or disabled:

Options	Enabled
Security	✅
Code Style	✅
Kody Rules	✅
Refactoring	✅
Error Handling	✅
Maintainability	✅
Potential Issues	✅
Documentation And Comments	✅
Performance And Optimization	✅
Breaking Changes	❌

Access your configuration settings here.

​