From 1b45eb70c9ba446c2bff6a7d261ff7a3f1525aa2 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Mon, 12 May 2025 23:44:11 +0530
Subject: [PATCH] feat: Add scroll lock on chat list context menu (#11467)

# Pull Request Template

## Description

This PR uses `useScrollLock` from `VueUse` to lock scrolling on the chat
list panel when the context menu is open.

## Type of change

- [x] New feature (non-breaking change which adds functionality)

## How Has This Been Tested?

### Loom video

https://www.loom.com/share/68a25af2c1b149f8bd06bdbaafb4d82d?sid=0984fde6-ade2-405a-afc9-6d8f99480874


## 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
---
 app/javascript/dashboard/components/ChatList.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index dc18ddd66..8a44acecb 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -8,6 +8,7 @@ import {
   computed,
   watch,
   onMounted,
+  onUnmounted,
   defineEmits,
 } from 'vue';
 import { useStore } from 'vuex';
@@ -42,7 +43,7 @@ import {
   useSnakeCase,
 } from 'dashboard/composables/useTransformKeys';
 import { useEmitter } from 'dashboard/composables/emitter';
-import { useEventListener } from '@vueuse/core';
+import { useEventListener, useScrollLock } from '@vueuse/core';
 
 import { emitter } from 'shared/helpers/mitt';
 
@@ -85,6 +86,12 @@ const store = useStore();
 
 const conversationListRef = ref(null);
 const conversationDynamicScroller = ref(null);
+const conversationListScrollableElement = computed(
+  () => conversationDynamicScroller.value?.$el
+);
+const conversationListScrollLock = useScrollLock(
+  conversationListScrollableElement
+);
 
 const activeAssigneeTab = ref(wootConstants.ASSIGNEE_TYPE.ME);
 const activeStatus = ref(wootConstants.STATUS_TYPE.OPEN);
@@ -738,6 +745,7 @@ function allSelectedConversationsStatus(status) {
 
 function onContextMenuToggle(state) {
   isContextMenuOpen.value = state;
+  conversationListScrollLock.value = state;
 }
 
 function toggleSelectAll(check) {
@@ -761,6 +769,10 @@ onMounted(() => {
   }
 });
 
+onUnmounted(() => {
+  conversationListScrollLock.value = false;
+});
+
 provide('selectConversation', selectConversation);
 provide('deSelectConversation', deSelectConversation);
 provide('assignAgent', onAssignAgent);