From 07dd6448f47580332ac7f6cb803ea470b2ee8e76 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Mon, 14 Jul 2025 11:02:51 +0530
Subject: [PATCH] fix: fast scrolling in canned responses list on mouse hover
 (#11933)

# Pull Request Template

## Description

This PR fixes a fast scrolling issue in the canned responses list that
occurred when hovering near the top or bottom edge.

Fixes https://github.com/chatwoot/chatwoot/issues/11923,
[CW-4624](https://linear.app/chatwoot/issue/CW-4624/canned-responses-menu-scrolls-too-fast-when-mouse-near-top-or-bottom)

## Type of change

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

## How Has This Been Tested?

### Screencast

**Before**


https://github.com/user-attachments/assets/1c39ad33-c5c9-49ce-a252-542428b7f7e3

**After**


https://github.com/user-attachments/assets/19c73713-0ffe-461a-9c3d-486e53e21abf




## 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
---
 .../widgets/mentions/MentionBox.vue           | 23 ++++++++-----------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue b/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
index 894ab3045..999ec758d 100644
--- a/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
+++ b/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch, computed } from 'vue';
+import { ref, watch, computed, nextTick } from 'vue';
 import { useKeyboardNavigableList } from 'dashboard/composables/useKeyboardNavigableList';
 
 const props = defineProps({
@@ -19,19 +19,16 @@ const mentionsListContainerRef = ref(null);
 const selectedIndex = ref(0);
 
 const adjustScroll = () => {
-  const container = mentionsListContainerRef.value;
-  const item = container.querySelector(`#mention-item-${selectedIndex.value}`);
-  if (item) {
-    const itemTop = item.offsetTop;
-    const itemBottom = itemTop + item.offsetHeight;
-    const containerTop = container.scrollTop;
-    const containerBottom = containerTop + container.offsetHeight;
-    if (itemTop < containerTop) {
-      container.scrollTop = itemTop;
-    } else if (itemBottom + 34 > containerBottom) {
-      container.scrollTop = itemBottom - container.offsetHeight + 34;
+  nextTick(() => {
+    const container = mentionsListContainerRef.value;
+    if (!container) return;
+    const selectedElement = container.querySelector(
+      `#mention-item-${selectedIndex.value}`
+    );
+    if (selectedElement) {
+      selectedElement.scrollIntoView({ block: 'nearest', behavior: 'auto' });
     }
-  }
+  });
 };
 
 const onSelect = () => {