search

RocketChat / EmbeddedChat

An easy to use full-stack component (ReactJS) embedding Rocket.Chat into your webapp
https://www.npmjs.com/package/@embeddedchat/react
107 stars 214 forks source link

[BUG] Menu doesn't close when multiple menus are open and the user clicks on another menu icon #522

Closed Spiral-Memory closed 3 months ago

Spiral-Memory commented 3 months ago

Description:

The menu opens and closes just fine if the user clicks outside the menu. However, if there are multiple menus on a page, the menu must close if the user clicks anywhere outside. Currently, it does close when you click outside the menu, but not when you click on another menu. It remains open.

Steps to reproduce:

  1. Set up embedded chat.
  2. Upload at least 2 files in the chat.
  3. Go to the file menu.
  4. Observe the menu behavior as shown in the video.

Expected behavior:

The menu must close when the user clicks anywhere except on the same menu.

Actual behavior:

The menu does not close when the user clicks on another menu, and multiple menus remain visible.

https://github.com/RocketChat/EmbeddedChat/assets/78961432/ca54464d-8a3a-4953-8e8e-fb2f6b1241b0

Note: This issue is not specific to file-menu, but rather the menu component itself.

Spiral-Memory commented 3 months ago

Feel free to raise a PR fixing this issue.

Hint: In the Menu component (Menu.js), it only checks whether it has been clicked on something that is closest to .ec-menu-wrapper. If not, then close the menu. However, in the case of multiple menus, the .ec-menu-wrapper class is present in all.

image

Spiral-Memory commented 3 months ago

@Akshun-01, were you looking for an issue to fix? If you want, you can give it a try.

Other contributors, please feel free to raise a PR for this issue as well.

Akshun-01 commented 3 months ago

Yeah sure, will look into this! Thanks Zishan ^^

Akshun-01 commented 3 months ago

Hey @Spiral-Memory, fixed the bug. Would appreciate any changes or feedback.