iachat/app/javascript/dashboard/components/widgets
Sivin Varghese 3fe771df6f
fix: Modal in the context menu disappears unless hovered (#10333)
# Pull Request Template

## Description

This PR resolves the issue where the modal in the context menu
disappears when not being hovered over.

**Cause of issue.**
The problem occurred because the modal-related component was placed
inside `MessageContextMenu.vue`, and the parent wrapper was using the
classes `group-hover:visible invisible`. This caused the modal to only
appear when the message item, where the context menu was opened, was
hovered over.

**Solution**
To fix this, I removed the `group-hover:visible` invisible class from
the parent wrapper and moved it into the `woot-button` within the
`MessageContextMenu.vue` component. Additionally, I added a nested group
with the class group/context-menu, allowing the focus to remain on the
context menu itself.

Fixes
https://linear.app/chatwoot/issue/PR-1415/modal-in-the-context-menu-disappears-unless-hovered

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?

**Loom video**

**Before**

https://www.loom.com/share/458f90708664493c86e909a56869d065?sid=0564a508-09a5-4e73-800b-8042140a22ba

**After**

https://www.loom.com/share/c119936d181d406d89468f9482ef6b81?sid=5cf3b1b4-6c66-4f8c-8f93-a62465a93b57

## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
2024-10-22 13:26:56 +05:30
..
conversation fix: Modal in the context menu disappears unless hovered (#10333) 2024-10-22 13:26:56 +05:30
DashboardApp style: apply fixes for eslint issues [cw-3590] (#10210) 2024-10-03 15:02:12 +05:30
FilterInput style: apply fixes for eslint issues [cw-3590] (#10210) 2024-10-03 15:02:12 +05:30
forms fix: emits for FormSelect and PhoneInput component (#10226) 2024-10-04 15:09:42 +05:30
mentions feat: Adds support for selecting emojis using the keyboard (#10055) 2024-09-04 11:32:54 +05:30
modal fix: vue 3 followup fixes (#10213) 2024-10-03 19:59:07 +05:30
WootWriter feat: Add the new design for edit article page (#10285) 2024-10-16 10:50:44 -07:00
AIAssistanceButton.vue style: apply fixes for eslint issues [cw-3590] (#10210) 2024-10-03 15:02:12 +05:30
AIAssistanceCTAButton.vue style: apply fixes for eslint issues [cw-3590] (#10210) 2024-10-03 15:02:12 +05:30
AIAssistanceModal.vue style: apply fixes for eslint issues [cw-3590] (#10210) 2024-10-03 15:02:12 +05:30
AICTAModal.vue style: apply fixes for eslint issues [cw-3590] (#10210) 2024-10-03 15:02:12 +05:30
AILoader.vue feat: Eslint rules (#9839) 2024-08-05 14:02:16 +05:30
AttachmentsPreview.vue feat: Eslint rules (#9839) 2024-08-05 14:02:16 +05:30
AutomationActionInput.vue feat: remove usage of .sync and define explicitly emits (#10209) 2024-10-03 12:44:18 +05:30
AutomationActionTeamMessageInput.vue fix: emit events across the app (#10227) 2024-10-04 08:03:41 -07:00
AutomationFileInput.vue style: apply fixes for eslint issues [cw-3590] (#10210) 2024-10-03 15:02:12 +05:30
Avatar.vue feat: Eslint rules (#9839) 2024-08-05 14:02:16 +05:30
BackButton.vue feat: Eslint rules (#9839) 2024-08-05 14:02:16 +05:30
ChannelItem.vue style: apply fixes for eslint issues [cw-3590] (#10210) 2024-10-03 15:02:12 +05:30
ChatTypeTabs.vue feat: Vite + vue 3 💚 (#10047) 2024-10-02 00:36:30 -07:00
ColorPicker.vue style: apply fixes for eslint issues [cw-3590] (#10210) 2024-10-03 15:02:12 +05:30
EmptyState.vue feat: Eslint rules (#9839) 2024-08-05 14:02:16 +05:30
FeatureToggle.vue style: apply fixes for eslint issues [cw-3590] (#10210) 2024-10-03 15:02:12 +05:30
InboxDropdownItem.vue feat: Eslint rules (#9839) 2024-08-05 14:02:16 +05:30
InboxName.vue style: apply fixes for eslint issues [cw-3590] (#10210) 2024-10-03 15:02:12 +05:30
LabelSelector.vue feat: Vite + vue 3 💚 (#10047) 2024-10-02 00:36:30 -07:00
LoadingState.vue feat: Eslint rules (#9839) 2024-08-05 14:02:16 +05:30
SettingIntroBanner.vue feat: Eslint rules (#9839) 2024-08-05 14:02:16 +05:30
ShowMore.vue feat: Vite + vue 3 💚 (#10047) 2024-10-02 00:36:30 -07:00
TableFooter.vue style: apply fixes for eslint issues [cw-3590] (#10210) 2024-10-03 15:02:12 +05:30
TableFooterPagination.vue feat: Eslint rules (#9839) 2024-08-05 14:02:16 +05:30
TableFooterResults.vue feat: Eslint rules (#9839) 2024-08-05 14:02:16 +05:30
TableHeaderCell.vue feat: Eslint rules (#9839) 2024-08-05 14:02:16 +05:30
Thumbnail.spec.js feat: Improve image loading for thumbnails (#5823) 2022-11-08 21:05:13 -08:00
Thumbnail.vue feat: Eslint rules (#9839) 2024-08-05 14:02:16 +05:30
ThumbnailGroup.vue feat: Eslint rules (#9839) 2024-08-05 14:02:16 +05:30
UserAvatarWithName.vue feat: Vite + vue 3 💚 (#10047) 2024-10-02 00:36:30 -07:00
VideoCallButton.vue style: apply fixes for eslint issues [cw-3590] (#10210) 2024-10-03 15:02:12 +05:30