fix: drop down close issue of multiselect component #1265
Conversation
|
|
@Spiral-Memory Great work buddy |
Thank you for the appreciation @Sayan4444 |
Spiral-Memory
force-pushed
the
fix/multiselect-dropdown-close-issue
branch
from
f19bd9e
to
83b6f27
Compare
Spiral-Memory
force-pushed
the
fix/multiselect-dropdown-close-issue
branch
from
83b6f27
to
d8101fb
Compare
|
Hi there, thanks for the contribution! 🚀 💯 We're planning an entire replacement of all the components related to Questions? Help needed? Feature Requests?
|
Got it, @dougfabris . Thanks for the appreciation. Well I recently discovered an issue in RC where the link is wrapped in the time component, which is incorrect behavior. I've attempted to fix that. It would be great if you could provide feedback on this PR as well: RocketChat/Rocket.Chat#31748 |
|
@Spiral-Memory I already addressed the issue to the design team, as soon as they answer I will share the news with you! |
Proposed changes (including videos or screenshots)
I've created a handleOnMouseDown function to control the visibility of the dropdown menu.
In the Anchor component, the onClick prop has been assigned an empty function since it's already being managed by the handleMouseDown function provided as a prop on the Box component. Additionally, a custom function called handleBlur has been introduced and is now assigned to the onBlur prop of the anchor component. This function is responsible for hiding the dropdown only when necessary. The handleClick function has also been modified to only work in creating focus within the box.
The sequence of actions is as follows: onMouseDown first, followed by onBlur, and finally onClick.
2024-01-16.22-50-44.mp4
Issue(s)
Closes #1305
Further comments
The issue occurred because the onBlur event, responsible for hiding the dropdown when clicking outside, executed before the onClick event. Therefore, clicking inside the box, such as on the arrow icon, triggered the onBlur event to hide the dropdown, and then the onClick event mistakenly thought it was hidden and displayed it again. To address this, I employed the onMouseDown event to better manage these scenarios.