search

RocketChat / fuselage

React port of Rocket.Chat's design system, Fuselage
https://rocketchat.github.io/fuselage/
MIT License
108 stars 144 forks source link

PaginatedMultiSelectFiltered: Issue with closing the dropdown menu by clicking outside the anchor but within the box. #1261

Open Spiral-Memory opened 6 months ago

Spiral-Memory commented 6 months ago

Description

In the PaginatedMultiSelectFiltered component, an unexpected behavior occurs when closing the dropdown menu. It behaves as expected when clicking outside the component or inside the anchor (placeholder input text field). However, clicking inside the box anywhere except the anchor causes the dropdown to close and reopen, resulting in a jump. This issue is present in the component itself and is also observed in the Rocket Chat web application when creating channels.

Steps to reproduce

  1. Clone the fuselage repository.
  2. Navigate to the fuselage monorepo responsible for components.
  3. Execute yarn install to install dependencies, followed by yarn build for the build process.
  4. Execute yarn lint and yarn test to verify everything.
  5. Change directory to packages/fuselage.
  6. Run yarn storybook.
  7. In the Storybook interface, select the PaginatedMultiSelectFiltered from the list of components.
  8. Test the issue as demonstrated in the attached video.

You can also verify this within the Add Member multiselect box when creating channels in the Rocket Chat web application.

Expected behavior

The dropdown should close when clicking anywhere on the component.

Actual behavior

https://github.com/RocketChat/fuselage/assets/78961432/77889b34-849b-4392-a839-82575ffeb730

Setup Information

OS: Ubuntu 22.04.3 LTS Storybook: 6.5.16 Node JS Version: v14.21.3

Spiral-Memory commented 6 months ago

Maintainers, I've submitted a PR. Please review it. I'm unsure about the config error displayed under "kodiakhq: status." and merging is blocked. This is my first contribution, so I would appreciate guidance if possible.

umangutkarsh commented 6 months ago

@ggazzo @hugocostadev . What do you think?

Should the Issue of dropdown toggling in RocketChat be dealt with in the fuselage repository? What are your thought on this? Please let us know Thanks

Spiral-Memory commented 6 months ago

@dougfabris @ggazzo @hugocostadev , What are your opinions on this? Does the approach seem right, or is there anything that needs correction?