-
Notifications
You must be signed in to change notification settings - Fork 273
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: render MessageActionsBox on modal #1716
feat: render MessageActionsBox on modal #1716
Conversation
…ose button display
… modal container props
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #1716 +/- ##
==========================================
+ Coverage 83.44% 83.63% +0.19%
==========================================
Files 251 252 +1
Lines 6166 6196 +30
Branches 1647 1654 +7
==========================================
+ Hits 5145 5182 +37
+ Misses 870 864 -6
+ Partials 151 150 -1 ☔ View full report in Codecov by Sentry. |
I've been trying to find a way to not have the message actions menu disappear when hovering away and found this PR which seems to do exactly what I want! Are there any plans on getting this merged? It would be great having this provided by this SDK instead of having to customize a lot of components in my codebase. |
Hello @DannyBiezen , this is currently on hold due the focus on other priorities. I plan to get back to this, but I do not have an exact roadmap to provide you. |
2cc3b70
to
a510e8f
Compare
e866edb
to
78d643f
Compare
295c64b
to
cd5542d
Compare
d8612f5
to
941707d
Compare
fixed by #2489 |
🎯 Goal
Render the message actions menu above an overlay that would prevent the erratic behavior of menu disappearing when hovered away. Make sure that only one menu is rendered in a given container.
🛠 Implementation details
This implementation uses React portal to append the modal to a selected container. That avoids the message hover state to influence the display of the message actions menu.
Only one message actions menu can be rendered per message list.
Each menu is positioned using
react-popper
. This assures that the menu position will be adjusted so that it is always entirely visible.Message options are kept visible meanwhile the message actions menu is open.
During the implementation the
Modal
component received changes that allows us to pass the properties to the inner modal containerdiv
as well as to set the reference to thisdiv
for the parent components. This is used in connection with thereact-popper
.🎨 UI Changes
demo_message_actions_on_modal.webm